reactライフサイクルテストレコード

1656 ワード

1 reactライフサイクルに関するhook
    a.  :getInitialState
    b.  :getDefaultProps
    c.  : componentWillMount 
    d.  : componentDidMount
    e.  :componentWillReceiveProps
    f.  :shouldComponentUpdate
    g.  :componentWillUpdate
    h.  :componentDidUpdate
    i.  :componentWillUnmount

2試験結果記録
1,reactのライフサイクルは、初期化(props,state)、マウント、更新、アンインストール、renderの5つの部分に分けられると思います.2、すべてのテスト結果は主にhook、state、props、およびレンダリング展開を中心にします.3,reactはコンポーネントを最初にレンダリングするときに、初期化、マウント、レンダリング部分のhook関数のみをトリガーします. , render hook setState .これらのhookには、componentDidMountおよびcomponentDidUpdateが含まれる.4.setStateは、レンダリング前にcomponentWillMountおよびcomponentWillReceivePropsで使用してもトリガーされません.ただし、これは、以下に説明するように、レンダリング前のhookが二次レンダリングをトリガーしないことを意味しません.5、興味深いテストは、componentDidUpdateとcomponentWillUpdateでsetStateのstate値が自動的に増加したことです.どうしたと思う?死の循環.ページがブロックされ、瞬時にブラウザのメモリが不足し、ブラウザを強制的に閉じざるを得なくなった.6,componentWillUnmountでは、いくつかのコンポーネントの不要な変数を解放できます.ただし、componetWIllUnmountでsetStateを使用するとレンダリングはトリガーされません.7,getInitialStateや構造でpropsを使ってstateに値を付けると深刻なバグが発生するそうですが、getInitialStateも構造も一度しか呼び出されないからでしょうか?テストの結果、このstateが再び更新されないことを確認したと思います.この操作はcomponnetWillReceivePropsでsetStateを使用して完了することをお勧めします.意味的にも論理的にも適切です.8,サブコンポーネントのすべてのhookは親コンポーネントrenderの時から始まり,私たちの正常な思考論理と一致している.いくつかのサブコンポーネントを並べて、サブコンポーネントのライフサイクルは順番に行われ、ネストされた場合も論理的で、意外なことはありません.9,propTypesとdefaultPropsはes 2015でclassの外に書く必要があり、Appのようなものである.propTypesとApp.defaultProps.またpropTypesは開発とテストの過程でしか役に立たないので、生産環境で削除することをお勧めします.PropTypeのチェック結果は警告になる可能性がありますが、プログラムの実行に直接失敗することはありません.10.mixinというものについては、es 2015ではもうお勧めしません.資料を調べるとmixinの文章に代わる高次コンポーネントがあることが分かった.大まかな意味は、親レベルからメソッドを継承するのと同じように、コンポーネントに階層を付けることです.