2017-11-21 2 views
1

は、私が読んで:React v16.0でステートレスコンポーネントがどのように最適化されていますか?反応ドキュメントで

このパターンは、アプリの大部分を含むべきであるこれらの単純な コンポーネントの作成を奨励​​するために設計されています。 では、不必要なチェックやメモリの割り当てを避けて、これらのコンポーネントに対してパフォーマンスの最適化を具体的に行うこともできます。

ありthisなどのgithubの上のいくつかの議論があるが、これらはかなり古いです、私が聞きたいことで行う任意の最適化があるかどうv16.0を反応させるのか、などの暗黙的なshouldComponentUpdateなどの機能部品のための前にこれらの場合であります最適化が行われ、次にそれらは何ですか?

答えて

1

v16.0.0では、まだステートレスコンポーネントに対して行われた最適化はありません。 V15からV16ヨーヨーをやっているの変更は

fragmentserror boundariesportalssupport for custom DOM attributesimproved server-side rendering、およびreduced file sizeです。

あなたはこのについての詳細は、React Blogを参照してください私が知っ

1

のみ現在の最適化は、ステートレスコンポーネントのインスタンスオブジェクトが作成されなかったり保持んです変更することができます。したがって、レンダリングされたインスタンスごとに1つ少ないオブジェクトが作成され、メモリに格納されます。

2

したがって、クラスコンポーネントに対してFSC(機能的なステートレスコンポーネント)のパフォーマンス向上に関する正式なドキュメントはありません。しかし、私はthis well written medium articleを見て、FSCを使ってどのようにパフォーマンスを上げることができるかを説明しました。

TLDR:React.createElementを使用して機能コンポーネントをマウントするのではなく、機能として直接呼び出す方がはるかに高速です。例えば

、FSCは次のようになります。

const Avatar = (props) => { 
    return <img src={props.url} />; 
} 

我々は通常、これらのコンポーネントを使用する方法はJSXコンポーネントの構文である:

<Avatar url="/path" /> 

しかし、いくつかの慎重なベンチマークを通って、 FSCをファンクション

と呼ぶことで、著者は約45%の速度改善を得ることができました

コンポーネントとして実装するのではなく、単純に実際のJavaScript関数を呼び出してみましょう。

Avatar({ url: "/path" }); 

私はこの方法によるパフォーマンスの向上を得ることだと思うが、実際にアプリの構造に依存するが、私はそれが潜在的に本当に役立つことができ巧妙なトリックだと思いました。

関連する問題