機能をリクエストしバグを報告しますか？
どちらでもない/バグ
現在の動作は何ですか？
クラスコンポーネントを（フックを使用して）関数コンポーネントに移行しているときに、パフォーマンスがことに気付きました。 ツリー構造の一部であるコンポーネント（ TreeNodeComponentと呼ばれる）があります。 ツリーのサイズによっては、何百ものインスタンスが表示される場合があります。
関数コンポーネントをPureComponentでラップすると、観察される「レンダリング時間」が大幅に短縮されました。 （〜160msから〜60ms）
Chrome開発ツールで観察される「レンダリング時間」
環境：
アプリは、これらのTreeNodeComponentをtree-structureレンダリングします。 親が更新されると、すべての直接の子を調整する必要があります。
プロジェクト： https ：
期待される動作は何ですか？
機能コンポーネントとクラスコンポーネント間の同等のパフォーマンス。
Reactのどのバージョン、およびどのブラウザ/ OSがこの問題の影響を受けますか？
OSX
クロム73 /エレクトロン5.0.5
React 16.8
Typescript＆Webpack
thomasnordquist
全てのコメント3件
関数コンポーネントをPureComponentでラップすると、観察される「レンダリング時間」が大幅に短縮されました。 （〜160msから〜60ms）
TreeNodeComponentレンダリングにReact.PureComponent早期にベイルアウトします。
クラスコンポーネントを（フック付きの）関数コンポーネントに移行しているときに、パフォーマンスが大幅に低下していることに気付きました。
React.Componentを拡張するクラスから関数コンポーネントに移行すると、パフォーマンスが低下したと言っていますか？ または、すでにReact.PureComponent （またはshouldComponentUpdate ）を使用していましたか
React.memoを使用して、関数コンポーネントで同じベイルアウトセマンティクスを取得できます。
aweary
2019年07月11日
React.ComponentからshouldComponentUpdateに移行しました。
「レンダリング」を避けるためにReact.useMemoを使用します。
React.memoは、 PureComponent結果と同じくらい良い結果をもたらします。 （〜50-60ms）
明確にしてくれてありがとう。
thomasnordquist
2019年07月11日
機能コンポーネントとクラスコンポーネントのどちらがパフォーマンスが優れているのかわかりませんでした。 長いリストには何を使うべきですか
TheMisir
2019年11月27日
関連する問題
jvorcak
·
3コメント
DimitarChristoff
·
3コメント
zpao
·
3コメント
jmullo
·
3コメント
varghesep
·
3コメント
最も参考になるコメント
TreeNodeComponentレンダリングにReact.PureComponent早期にベイルアウトします。React.Componentを拡張するクラスから関数コンポーネントに移行すると、パフォーマンスが低下したと言っていますか？ または、すでにReact.PureComponent（またはshouldComponentUpdate）を使用していましたかReact.memoを使用して、関数コンポーネントで同じベイルアウトセマンティクスを取得できます。