Reactインテリジェントコンポーネント&&人形コンポーネント&&ライフサイクル

インテリジェントコンポーネント&人形コンポーネント

これはReactを用いてシステム設計を行う際の2つの非常に重要な概念である.Reactでは、すべての単位をコンポーネントと呼びますが、上記の例では、./app/containersと./app/componentsの2つのフォルダにそれぞれ配置しています.

インテリジェントコンポーネントは日常開発において、我々も「ページ」と略称する.なぜ「スマート」と言うのか.頭のいいことを指揮しているので、汚い仕事も疲れて仕事もしません.データのみに責任を負い、データを取得し、データ操作に関する関数を定義し、これらのデータ、関数を具体的な実装の構築に直接伝えるだけで

です.

人形コンポーネントここで「人形」という言葉は特別なイメージで使われており、彼はいつも糸で引っ張られている.インテリジェントコンポーネント(またはページ)からデータ、関数を受信し、取得したデータをユーザーに表示し、関数操作をユーザーに開放する展示作業を開始します.データの内容が何であるかについては、関数操作が何であるかについては、

には関心がありません.

ライフサイクル

開発の過程で最も一般的なライフサイクルは

getInitialStateコンポーネントstateデータを初期化するが、es 6構文では

の代わりに以下の書き方を用いることができる.

    constructor(props, context) { //        ES5 new    
        super(props, context);
        this.state = {
            now: Date.now()
        }
    }

constructorを使用するとsuper()と書かなければなりません.thisを初期化するために使用され、このイベントにバインドすることができます.constructorでthis.propsを使用する場合は、superにパラメータを追加する必要があります:super(props);(constructorがあるかどうかにかかわらずrenderではthis.propsが使用可能で、これはReact自動付属です)

render最も一般的なhookは、コンポーネントがレンダリングするテンプレート

を返します.

componentDidMountコンポーネントの最初のロード時にレンダリングが完了するイベントは、一般的にここでネットワークデータを取得し、実際にプロジェクト開発を開始する際に

がよく使用される.

shouldComponentUpdateは主に性能最適化に用いられ,Reactの性能最適化も重要な話題である

である.

componentDidUpdateコンポーネントの更新後にトリガーされるイベントは、一般的にデータを空にして更新するために用いられ、実際のプロジェクト開発時(例えばルーティング更新)には、更新完了

をトリガーすることを指すことがよく用いられる.

componentWillUnmountコンポーネントが破棄前にトリガーするイベント、一般ユーザが特定の情報を記憶すること、setTimeoutイベントをクリーンアップすることなど

.