こんにちは、
他の生成されたコンテンツのラッパーとしてのみ機能し、サードパーティのライブラリを使用するコンポーネントを構築しています。このライブラリprops.children
はのコンポーネントで動作します。これまでのところ良好ですが、このサードパーティのライブラリは、適用したとき、または要素を更新したときに少し遅れます。そして、このライブラリを更新する理由はprops.children
変更されたときだけなので、比較this.props.children
と比較の方法を理解しようとnextProps.children
していshouldComponentUpdate
ます。PureRenderMixinが機能するはずだと思っていましたが、私にとっては機能しません。state.listName
下の例のように変更しただけでもコンポーネントが再レンダリングされます。
<div>
List name '{this.state.listName}'
<br />
<MyComponent>
<ul>
{listOfLi}
</ul>
</MyComponent>
</div>
方法、比較の管理方法、props.children
またはそのようなことを行う他のオプションはありますか?助けてくれてありがとう!
key
Reactが提案する子の小道具を使用して、子の配列を指定して、それらを一意に識別する必要があります。各子にはキーがあるため、プロップの変更で子が変更されたかどうかを確実に知ることができます(これがキーのポイントです!)。
React.render(<App><Child key='1'/><Child key='2'/></App>, document.body)
子が変更された場合、各更新の前にチェックするAppコンポーネントでチェックを行います
shouldComponentUpdate(nextProps){
var oldKeys = this.props.children.map( child => child.key);
var newKeys = nextProps.children.map( child => child.key);
//compare new and old keys to make sure they are the same
}
さらに最適化すると、状態の変化の結果として子が変更されることはないため、実際に比較をcomponentWillReceiveProps()
行い、次のようないくつかの状態プロパティを設定できますchildrenHaveChanged
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加