私は今回は、Component と PureComponent の使用の違いについて詳しく説明します。Component と PureComponent を使用する際の 注意事項 は何ですか? 以下は実際のケースです。
PureCompoent
の使用に切り替え始めました。これは、Component
のよりパフォーマンスの高いバージョンであるためです。これは事実であることが判明しましたが、このパフォーマンスの向上にはいくつかの注意点があります。 PureComponent
をさらに深く掘り下げて、なぜそれを使用する必要があるのかを理解しましょう。
PureCompoent
是因为它是一个更具性能的Component
的版本。虽然事实证明这是正确的,但是这种性能的提高还伴随着一些附加的条件。让我们深挖一下PureComponent
,并理解为什么我们应该使用它。除了为你提供了一个具有浅比较的shouldComponentUpdate
方法,PureComponent
和Component
基本上完全相同。当props
或者state
改变时,PureComponent
将对props
和state
进行浅比较。另一方面,Component不会比较当前和下个状态的props
和state
。因此,每当shouldComponentUpdate
被调用时,组件默认的会重新渲染。
当把之前和下一个的props
和state
作比较,浅比较将检查原始值是否有相同的值(例如:1 == 1
或者ture==true
),数组和对象引用是否相同。
您可能已经听说过,不要在props
和state
中改变对象和数组,如果你在你的父组件中改变对象,你的“pure”子组件不将更新。虽然值已经被改变,但是子组件比较的是之前props
的引用是否相同,而不会进行深度比较。
与此相反,你可以通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库达到不可变性,来返回一个新的对象。
比较原始值值和对象引用是低消费操作。如果你有一列子对象并且其中一个子对象更新,对它们的props
和state
进行检查要比重新渲染每一个子节点要快的多
假设你有一个项目列表,每个项目都传递一个唯一的参数到父方法。为了绑定参数,你可能会这么做:
<CommentItem likeComment={() => this.likeComment(user.id)} />
这个问题会导致每次父组件render方法被调用时,一个新的函数被创建,已将其传入likeComment
。这会有一个改变每个子组件props
的副作用,它将会造成他们全部重新渲染,即使数据本身没有发生变化。
为了解决这个问题,只需要将父组件的原型方法的引用传递给子组件。子组件的likeComment
属性将总是有相同的引用,这样就不会造成不必要的重新渲染。
<CommentItem likeComment={this.likeComment} userID={user.id} />
然后再子组件中创建一个引用了传入属性的类方法:
class CommentItem extends PureComponent { ... handleLike() { this.props.likeComment(this.props.userID) } ... }
考虑一下你的配置组件将从一系列文章中展示用户最喜欢的十篇文章。
render() { const { posts } = this.props const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9) return //... }
每次组件重新渲染时topTen
都将有一个新的引用,即使posts
没有改变并且派生数据也是相同的。这将造成列表不必要的重新渲染。
你可以通过缓存你的派生数据来解决这个问题。例如,设置派生数据在你的组件state
浅い比較を行う ShouldComponentUpdate
メソッドを提供することに加えて、PureComponent と <code>Component
は基本的に同じです。 props
または state
が変更されると、PureComponent
は props
と state
を浅く変更します。 。一方、コンポーネントは、現在の状態と次の状態の props
と state
を比較しません。したがって、 shouldComponentUpdate
が呼び出されるたびに、コンポーネントはデフォルトで再レンダリングされます。
前後の props
と state
を比較する場合、浅い比較は次のようになります。元の値が同じ値 (例: 1 == 1
または ture==true
)、配列、および オブジェクト
同じですか?
聞いたことがあるかもしれませんが、props
と state
オブジェクトは変更しないでください。配列の場合、親コンポーネントのオブジェクトを変更しても、「純粋な」子コンポーネントは更新されません。値は変更されていますが、サブコンポーネントは詳細な比較を行わずに、以前の props
参照が同じかどうかを比較します。
対照的に、es6 assign メソッドまたは配列拡張子 operator を使用するか、サードパーティのメソッドを使用することができます。ライブラリは、新しいオブジェクトを返す不変性を実現します。
props
と state
をチェックする方が、各子を再レンダリングするよりもはるかに高速です
componentWillMount() { this.setTopTenPosts(this.props.posts) } componentWillReceiveProps(nextProps) { if (this.props.posts !== nextProps.posts) { this.setTopTenPosts(nextProps) } } setTopTenPosts(posts) { this.setState({ topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9) }) }
likeComment
に渡されます。これには、各子コンポーネントの props
が変更されるという副作用があり、データ自体が変更されていない場合でも、すべての子コンポーネントが再レンダリングされます。 🎜🎜この問題を解決するには、親コンポーネントのプロトタイプ メソッドの参照を子コンポーネントに渡すだけです。子コンポーネントの likeComment
属性は常に同じ参照を持つため、不必要な再レンダリングは発生しません。 🎜rrreee🎜次に、受信属性を参照するクラス メソッドを子コンポーネントに作成します。 🎜rrreeetopTen
は、posts
が変更されておらず、派生データが同じであっても、コンポーネントが再レンダリングされるたびに新しい参照を持ちます。これにより、リストの不必要な再レンダリングが発生します。 🎜🎜この問題は、派生データをキャッシュすることで解決できます。たとえば、コンポーネントの state
に派生データを設定して、投稿が更新された場合にのみ更新されるようにします。 🎜rrreee🎜 Redux を使用している場合は、派生データを結合してキャッシュするための「セレクター」を作成するために reselect を使用することを検討してください。 🎜🎜この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜 React でのライフサイクルの使用方法の詳細な説明🎜🎜🎜🎜 React でのコンポーネント通信の使用方法の詳細な説明🎜🎜以上がComponentとPureComponentの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。