store變化了而頁面取不到值——mobx會對什麼作出反應

delete1111111111111發表於2020-12-16

1、mobx怎麼對可觀察物件作出反應

MobX 通常會對你期望的東西做出反應。這意味著在90％的場景下，mobx “都可以工作”。然而，在某些時候，你會遇到一個情況，它可能不會像你所期望的那樣工作。在這個時候理解 MobX 如何確定對什麼有反應就顯得尤為重要。

MobX 會對在 追蹤函式執行過程中讀取現存的可觀察屬性做出反應。

“讀取” 是物件屬性的間接引用，可以用過 . (例如 user.name) 或者 [] (例如 user['name']) 的形式完成。
“追蹤函式” 是 computed 表示式、observer 元件的 render() 方法和 when、reaction 和 autorun 的第一個入參函式。
“過程(during)” 意味著只追蹤那些在函式執行時被讀取的 observable 。這些值是否由追蹤函式直接或間接使用並不重要。

換句話說，MobX 不會對其作出反應:

從 observable 獲取的值，但是在追蹤函式之外
在非同步呼叫的程式碼塊中讀取的 observable
MobX 追蹤屬性訪問，而不是值

假設你有如下的 observable 資料結構(預設情況下 observable 會遞回應用，所以本示例中的所有欄位都是可觀察的)。

`let message = observable({
    title: "Foo",
    author: {
        name: "Michel"
    },
    likes: [
        "John", "Sara"
    ]
})` Copy

在記憶體中看起來像下面這樣。綠色框表示可觀察屬性。請注意，值本身是不可觀察的！

現在 MobX 基本上所做的是記錄你在函式中使用的是哪個箭頭。之後，只要這些箭頭中的其中一個改變了(它們開始引用別的東西了)，它就會重新執行。

2、沒有封裝成observer 元件

容器元件

import Change from './Change';
import Father from './Father';

const Main = (props: any) => {
  return (
    <div>
      <Father></Father>
      <Change></Change>
    </div>
  )
}

export default Main;

Father元件

import { inject } from 'mobx-react';
import React from 'react';
import Store from '../../store/store';

interface IProps {
  store?: Store;
}

const Father = (props: IProps) => {
  const { store } = props;
  const { message } = store as Store;

  return <div>
    <div>title: {message.title}</div>
    <div>author: {message.author.name}</div>
    <div>likes: {message.likes[0]}</div>
  </div>
}

export default inject('store')(Father);

Change元件

import { Divider } from 'antd';
import { inject, observer } from 'mobx-react';
import React from 'react';
import Store from '../../store/store';

interface IProps {
  store?: Store;
}

const Change = (props: IProps) => {
  const { store } = props;

  const { setName, setTitle, setLikes } = store as Store;

  return <div>
    <button onClick={() => setTitle('spin')}>改變title</button>
    <button onClick={() => setName('tom')}>改變name</button>
    <button onClick={() => setLikes('john')}>改變likes</button>
  </div>
}

export default inject('store')(observer(Change));

store

import { observable, action } from 'mobx';

class Store {
  @observable message = {
    title: 'Bar',
    author: {
      name: 'Susan'
    },
    likes: ['Michel']
  }

  @action
  setTitle = (title: string) => {
    this.message.title = title;
  }
  
  @action
  setName = (name: string) => {
    this.message.author.name = name;
  }

  @action
  setLikes = (target: string) => {
    this.message.likes[0] = target;
  }
}

export default Store;

當點選改變title、name、likes按鈕時，store中觀察物件message的屬性值改變了，但是Father元件並沒有重新渲染。因為Father元件並不是observer元件，只有封裝成observer元件，mobx才會對render函式（函式元件理解為return返回的ReactNode）中讀取現存的可觀察屬性做出反應。

因此，只需要將Father元件封裝成observer元件就可以解決

export default inject('store')(Father);
改後
export default inject('store')(observer(Father));

3、MobX 只會為資料是直接通過 render 存取的 observer 元件進行資料追蹤

Father元件

const Father = (props: IProps) => {
  const { store } = props;
  const { message } = store as Store;

  return <div>
    <div>title: {message.title}</div>
    <Child title={() => <div>{message.author.name}</div>}></Child>
    <div>likes: {message.likes[0]}</div>
  </div>
}

export default inject('store')(observer(Father));

Child元件

interface IProps {
  title: () => React.ReactNode;
}

const Child = (props: IProps) => {
  const { title } = props;

  return <div>{title()}</div>
}

export default Child;

當改變store中message.author.name時，頁面並不會重新渲染。因為div實際上不是由 Father(有追蹤的渲染) 渲染的，而是 Child。所以要確保 Child 的 title 可以正確對新的 message.author.name 作出反應，Child 應該也是一個 observer。

如果 Child 來源於外部庫的話，這通常不在你的掌控之中。在這種場景下，你可以用自己的無狀態 observer 元件來包裹 div 解決此問題，或通過利用 <Observer>元件:

// 將Child改成observer元件
const Child = (props: IProps) => {
  const { title } = props;

  return <div>{title()}</div>
}

export default observer(Child);

另外一種方法可以使用 mobx-react 內建的 Observer 元件，它不接受引數，只需要單個的 render 函式作為子節點:

const Father = (props: IProps) => {
  const { store } = props;
  const { message } = store as Store;

  return <div>
    <div>title: {message.title}</div>
    <Child title={() => <Observer>{() => <div>{message.author.name}</div>}</Observer>}></Child>
    <div>likes: {message.likes[0]}</div>
  </div>
}

4、在本地欄位中快取 observable

一個常見的錯誤就是把間接引用的 observable 儲存到本地變數，然後認為元件會作出反應。舉例來說:

@inject('store')
@observer
class Father extends React.Component<IProps, any> {
  author: { name: string; } | undefined;
  likes: string[] | undefined;
  title: string | undefined;

  constructor(props: IProps) {
    super(props);
    this.title = props.store?.message.title;
    this.author = props.store?.message.author;
    this.likes = props.store?.message.likes;
    console.log('title: ' ,this.title, 'author: ' ,this.author, 'likes: ', this.likes)
  }

  render() {
    return <div>
      <div>title: {this.title}</div>
      <div>name: {this.author?.name}</div>
      <div>likes: {this.likes && this.likes[0]}</div>
    </div>
  }
}

export default Father;

元件會對author和likes做出反應，不會對title做出反應，因為this.title = props.store?.message.title;是賦值，而this.author = props.store?.message.author;是賦引用，這個引用也是一個observable物件

換成函式元件

const Father = (props: IProps) => {
  const { store } = props;
  const { message } = store as Store;

  const title = message.title;
  const author = message.author;
  const likes = message.likes;

  return <div>
    <div>title: {title}</div>
    <Child title={() => <Observer>{() => <div>{author.name}</div>}</Observer>}></Child>
    <div>likes: {likes[0]}</div>
  </div>
}

export default inject('store')(observer(Father));

發現元件即會對author和likes做出反應，也會對title做出反應

JSp頁面使用El表示式取不到值
2020-10-07
JS
為什麼獲取不到@Value註解值？
2020-12-15
layui獲取頁面checkbox核取方塊值
2019-04-19
UI
javascript　將變數值作為物件屬性　獲取物件對應的值
2024-05-15
JavaScript變數物件
面對變革，我們應該怎麼做？
2022-11-07
為什麼C語言Scanf函式對字串不要加取地址運算子？而整型變數要加？
2024-06-14
C語言函式字串變數
tkinter調取簽名網而設計簽名頁面（十七）
2018-04-20
遊戲跨界營銷，已經15年沒什麼變化了
2020-11-10
遊戲
如何例項化不同頁面物件對應不同的 iframe，而不用頻繁切換
2020-12-11
物件
什麼是反對稱關係？
2024-03-17
鎖賦值給其他變數為什麼會死鎖呢？
2019-04-29
賦值變數
《反應式應用開發》之“什麼是反應式應用”
2021-02-02
什麼是反應式應用開發？
2020-12-21
Android 網頁開啟App進入對應頁面
2019-04-10
Android網頁APP
藍碳是什麼，為什麼它是應對氣候變化的關鍵？
2024-06-11
藍芽滑鼠已配對為什麼沒反應 win10藍芽滑鼠已連線無反應
2022-02-28
藍芽Win10
vue中未定義的的物件屬性在頁面中繫結不到值
2020-12-04
Vue物件
win10 app store無法載入此頁面怎麼辦
2019-11-28
Win10APP
為什麼HashMap的鍵值可以為null，而ConcurrentHashMap不行？
2024-03-03
HashMapNull
什麼是反應式程式設計？
2024-04-03
程式設計
技術面試應該問些什麼？應聘者應該如何應對？
2020-11-20
面試
網站會DDOS攻擊會有哪些反應，如何應對此現象？
2020-10-26
網站
win10系統下microsoft store購買頁面變成英文如何解決
2019-04-17
Win10ROS
人是什麼？人生是什麼？人為什麼會變？
2018-03-17
為什麼我反對過度使用TypeScript?
2024-04-28
TypeScript
electron-store會將資料儲存為什麼格式
2024-04-21
單頁面應用和多頁面應用
2020-04-04
網頁出現404頁面,是什麼問題?
2024-10-08
網頁
我為什麼反對公開網路IP？
2022-05-02
golang什麼時候應該把方法繫結在struct的值上而不是指標上？
2019-02-16
GolangStruct指標
getBoundingClientRect方法獲取元素在頁面中的相對位置
2018-04-25
GCclient
WordPress能夠製作出什麼樣的網站？
2018-04-09
網站
steam打不開沒反應是什麼原因點選steam沒反應怎麼解決
2022-04-06
多頁面-HASH-頁面間傳值 Sloth-state
2019-01-02
為什麼你應當選擇 PostgreSQL 而不是 Oracle？
2019-05-24
SQLOracle
什麼是聚合頁面？seo做聚合頁面的好處
2018-06-19
SAP Commerce開發之如何找到某個頁面對應的JSP實現頁面
2020-08-30
JS
Nuxt頁面級快取
2020-03-08
UX快取

store變化了而頁面取不到值——mobx會對什麼作出反應

相關文章