5

現在reselect、セレクターを作成してストアからデータを抽出し、それをpropsviaに渡していconnectます。簡単にするために、私のセレクターの結果は常に JS オブジェクト (toJS()セレクターの最後で呼び出す) であり、次のようになります。

const selector = state => state.get('data').toJS();

今、私はいくつかのパフォーマンスを改善しようとしていますshouldComponentUpdateが、セレクターから戻る方法のために、浅い比較では不変性の利点が失われることに気付きました。

一方、.get('prop')私のhtml内で使用するのは非常に面倒です：

<div>{this.props.data.get('prop')}</div>

特に、単純な JS オブジェクトを変更可能な子コンポーネントに渡す場合は、次のようになります。

<ChildComponent totalItems={10} />

また、小道具にアクセスするときに一貫性がありません (一部は変更可能で、一部は不変です)。

unwrap次のようなヘルパー関数を作成することを考えました。

const unwrap = obj => obj && obj.toJS ? obj.toJS() : obj;

しかし、私はこの解決策があまり好きではありません..私はこれらのアプローチのどれも本当に好きではありません.

クリーンなコードとパフォーマンスの両方のために何を使用していますか?

4

3 に答える 3

2

プロパティをコンポーネントに渡すには、キーの下のすべてのデータを不変として収集します。

<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} />

Immutable の利点を利用するには、toJS() の使用を避ける必要があります。非常にコストがかかり、便利な不変関数を使用することはできません。「値」に到達するまでは、Immutable.get() を使用する必要があります。最初は面倒ですが、時間が経つと便利で使いやすいことがわかります。( getIn() を使用して内部キーを取得することは、チェーン get 関数よりも煩わしくない場合があります)。このようにして、コードがより効率的に機能し、unwrap 関数を使用する必要がなくなります。コンポーネントでは、this.props.propsKey の下のデータが常に不変であることを保証します。

于 2016-08-22T18:55:44.783 に答える
1

toJS()プレゼンテーション コンポーネントは、渡された Immutable.js オブジェクト propsを呼び出す単純な高次コンポーネントにラップする必要があります。

これにより、Immutable.js のパフォーマンス上の利点を維持しながら、コンテナー コンポーネントが再レンダリングされすぎないようにすることと、プレゼンテーション コンポーネントを依存関係から解放し、再利用とテストを容易にすることの最適なバランスが得られます。

Redux のドキュメントには、 Immutable.js を使用するためのベストプラクティスが適切に選択されています。.toJS()

于 2017-08-29T14:17:45.983 に答える