MobX observables changeが常にオブザーバコンポーネントをトリガするとは限りません。

Question

私のプロジェクトはReactに基づいて構築されており、状態管理のためにMobxが使用されています。 私たちは、デコレータを使用していないので、観測を観察する必要があるコンポーネントは、次のようにラップする必要があります

import React from 'react'; 
import {observer} from 'mobx-react'; 
import MyComponent from '../app/my-component.jsx'; 
import myFilter from './my-filters.jsx'; 

export default observer(() => { 
    return <MyComponent filter={myFilter}/>; 
}); 

コンポーネントMyComponentが小道具として観測を受けている：

static propTypes() { 
    return { 
     myFilter: React.PropTypes.function.isRequired 
    }; 
    } 

そしてそれはrenderメソッドで使用されます。この場合には

render() { 
    if (this.props.myFilter.filterValue1 !== null) { 
    // some code here 
    } 
} 

myFilterはwhic、観測可能です時間は何とか次のようになります。この場合

import {observable} from 'mobx'; 

const myFilter = observable({ 
    filterValue1: null, 
    filterValue2: null, 
    addOrRemoveItem() { 
    // some function here 
    } 
}); 

export default myFilter; 

、いくつかのコンポーネントがmyFilterを変更した場合、小道具として、観察を受けオブザーバーMyComponentは、常に再レンダリングされません。場合によっては、これはコンポーネントの呼び出しの前に属性によって観測可能なオブジェクトに対処することで解決できます。例：

export default observer(() => { 
    console.log(myFilter.filterValue1); 
    return <MyComponent filter={myFilter}/>; 
}); 

これは安定していません。 これを回避する有効な回避策がありますか？

Answer 1

オブザーバーとしてMyComponentを宣言する。 app/my-component.jsxで

輸出はこの

export default observer(MyComponent); 

のようになります。コード

export default observer(() => { 
    return <MyComponent filter={myFilter}/>; 
}); 

のこの作品は、観察者に、匿名のステートレスなコンポーネント、ないMyComponentをオンにします。

MobXのマニュアルでは、観察可能なデータをレンダリングするすべてのコンポーネントにobserverを適用する必要があることを明確に明記しています。

この問題を解決するもう1つの方法は、この匿名のステートレスコンポーネントのプレーンデータをMyComponentに渡すことです。

export default observer(() => { 
    return <MyComponent filterValue1={myFilter.filterValue1}/>; 
}); 

それは新しい小道具にその親が再レンダリングされるたびに受け取るのでMyComponentのは再レンダリングされますこの方法です。

Answer 2

Alikが正しい場合は、オブザーバーとしてもMyComponentが必要です。

それ以外の場合は、オブジェクト（つまり参照先）が変更された場合にのみリフレッシュすることを意味する唯一のオブザーバブル内にコード<MyComponent filter={myFilter}/>があります。そのプロパティーにアクセスすることはないため、これらのプロパティーが変更されたときにリフレッシュは必要ありません。そのため、console.logステートメントのfilterValue1プロパティにアクセスすると、コンポーネントが更新されたのです。