React面接問題——Reactのライフサイクル

reactライフサイクルは4つの段階に分けられます.

   （4 ），   （5 ），   （1 ），      （2 ）。   12   。

1.マウント時の段階(4つのフック):

constructor()のロード時に一回呼び出して、stateを初期化し、イベント処理関数のバインディングの例を実現することができる.

	constructor(props) {
	  super(props);
	  //         this.setState()
	  this.state = { counter: 0 };  //   state。
	  this.handleClick = this.handleClick.bind(this); 
	}

static get DerivedStation FroomPropsは、コンポーネントが更新されるたびに呼び出しられ、プロpsが変化した時にstateを更新させ、新しいpropsを受信するたびに、新しいstateとしてオブジェクトを返します.nullに戻ったら、何も更新しません.

レンダー()クラスのコンポーネントの中で唯一実現しなければならない方法は、仮想domツリーを作成し、domツリーを更新するためにここで行われる.

component DidMount()コンポーネントをマウントした後に呼び出します.一回だけ呼び出します.普通ここでデータを要求します.

2.更新時段階(5つのフック):

static get DerivedStation FroomPropsはレンダーメソッドを呼び出す前に呼び出し、初期マウントおよび後続の更新時に呼び出しられます.これはオブジェクトに戻ってstateを更新します.nullに戻ったら何も更新しません.

	static getDerivedStateFromProps(nextProps, prevState) {
	    const {type} = nextProps;
	    //     type       ，  state
	    if (type !== prevState.type) {
	        return {
	            type,
	        };
	    }
	    //   ，  state       
	    return null;
	}

shuldComponentUpdate(nextProps、next State)は、プロpsまたはstateが変化したとき、レンダリングの前に呼び出します.return trueはdomを更新し、return falseは更新を阻止できます.性能最適化の方式としてのみ存在する.

render()render()関数は、コンポーネントstateを変更しない場合、呼び出しごとに同じ結果を返し、ブラウザと直接対話しないことを意味する純関数であるべきである.render()を純粋な関数として保持することで、コンポーネントをより考えやすくすることができます.

get SnapshotBeforeUpdateは、最近のレンダリングがDOMノードに提出される前に呼び出し、一つの値を返し、componentDidUpdateの第三のパラメータとして返します.これは、コンポーネントが変更される前に、DOMからいくつかの情報(例えば、ローリング位置)を獲得することを可能にする.

component DidUpdate(prevProps、prevState、snapshot)は更新後すぐに起動されます.最初のレンダリングはこの方法を実行しません.コンポーネントが更新されると、ここでDOMを操作し、ネットワーク要求を行うことができる.

3.アンインストール時段階(1つのフック)

componentWillUnmount()は、コンポーネントのアンインストールおよび廃棄前に直接呼び出し、この方法では必要なクリーン操作、例えば、timerを明確にし、ネットワーク要求をキャンセルするなどを実行する.

4.エラー処理フェーズ(2つのフック)

static get DerivedStation Froom Errはレンダリング段階で呼び出され、エラーをパラメータとして投げ、値を返してstateを更新し、副作用を実行することができません.

componentDidCatchは、提出段階で呼び出しられ、エラーを記録するために使用され、副作用を許可する.

副作用:(1つの関数は実行中に外部で観察可能な変化を生み出しています.例えば、グローバル変数を修正したり、参照を修正したり、consolie.log()などの外部でその変化が観察できます.)
なお、ライフサイクルの3つの方法は時代遅れとなり、react 17バージョンでは淘汰されますが、現在も有効です.componentWillMount()、UNSAFE_componentWillceive Props、UNSAFE_componentWillUpdate(next Props、next State)