コンポーネントのライフサイクルをフック

前のポストでは、フックを活用できるようにクラスコンポーネントを機能的なコンポーネントに変換する方法を説明しました.
ここでは記事へのリンクです.

アクションフック：クラスコンポーネントを機能的に使用し、フックを使用する

アナンドクマル・ 5月12日・ 5分読む

#react #reacthooks #javascript

このポストでは、我々はあなたが反応フックとコンポーネントのライフサイクルを使用して達成するために使用した同じ出力を取得する方法を理解するのに役立ちます.
次のライフサイクルメソッドをカバーします.

componentWillMount

componentDidMount

componentDidUpdate

shouldComponentUpdate

componentWillUnmount

始める前に、次のフックについて理解しましょう.

useState

useEffect-useState ステートフル値とそれを更新する関数を返します.
-

-甘経楽
機能コンポーネントを使用すると、コンポーネントの本体内の突然変異、タイマー、突然変異またはその他の副作用のような副作用を持つことはできません.

だから、ここにあるuseEffect これは、レンダリングが発生した後に実行されます.デフォルトでは、効果はすべてのレンダリング後に実行されますが、それを制御する方法があります.

文法

フックの詳細については、または反応によって提供される他のフックのために、公式ドキュメントを見てください.
それで、コンポーネントライフサイクルから始めましょう、そしてフックと同じものの交換を理解しようとしてください.

Pro Tip: Do not use hooks inside any code blocks. It must be at the top level hierarchy of the functional component.

小さなアプリケーションの実行中の例を見てみましょう.この使用法はクラスベースのコンポーネントとライフサイクルに反応します.記事の最後に、機能コンポーネントを使用して作成された同じアプリケーションをチェックすることができますし、同様のライフサイクル実行しています.
始めましょう.

コンポーネント

すべてのクラスコンポーネントを機能的なコンポーネントに変換するとき、我々は使用している状態を定義した後にコードを書くことができますuseState またはコードがレンダリング(JSX)部分に到達する前にcomponentWillMount 動作.我々が知っているように、コード実行は上から下へ起こります.

コンポーネントのマウント

前述の通りuseEffect , 2番目のオプションパラメータを渡すことで、componentDidMount 動作.次のコードスニペットを見てみましょう.

React.useEffect(()=>{
  console.log('Robot: componentDidMount');
  // ...code goes here...
  fetchData();
}, []);

上のコードでは、空白の配列[] 5行目の2番目の引数として.なぜ?🤔
さて、提供されたときの2番目の引数は、提供されるエントリのいずれかの変更を検出した場合にのみ効果を呼び出すように反応するためです.この配列は、useEffect .
この場合、それはどんな変化も検出するつもりでないことを意味します、そして、それは一度だけ起動します.それじゃないcomponentDidMount ?一度だけ、右を呼び出す?

Please note that if the second argument is not passed in useEffect, it will execute always after render.

コンポーネントdidupdate

例えば、コンポーネントのプロップの変更があれば再度API呼び出しを呼び出す必要があります.我々はそれを使用して達成することができますuseEffect . しかし、今回は2番目の引数へのエントリを渡す必要があります.

React.useEffect(() => {
  console.log('Robot: componentWillUpdate');
  // code goes here
  fetchData();
}, [props.selectedRobotId]);

今回、我々は支柱を通過したselectedRobotId を返します.それで、この小道具が変化するときはいつでも、効果は実行されます、そして、我々は更新された構成要素を得ます.

コンポーネント

これは少しトリッキーですが、私はあなたがこれを理解するのを助けることができます.ご存知のように、このライフサイクルメソッドは、コンポーネントのレンダリングを制御するのに役立ちます.以下に例を示します:

shouldComponentUpdate(nextProps, nextState) {
  console.log("Robot: shouldComponentUpdate");
  return (
    nextProps.selectedRobotId !== this.props.selectedRobotId ||
    nextState.loadedRobot.id !== this.state.loadedRobot.id ||
    nextState.isLoading !== this.state.isLoading
  );
}

しかし、機能的なコンポーネントで、我々はこのように反応成分ライフサイクル方法を使用することができません.だから、この同じ結果を達成する方法?
まあ、反応して、我々は何かを呼ばれるReact.memo . 次のようにコンポーネントをラップできます.

export default React.memo(Robot);

これは交互にshouldComponentUpdate . ……
ので、ここにある.React.memo は、nextProps and prevProps . これは、同じことを達成するのを助けることができますshouldComponentUpdate .

export default React.memo(Robot, (prevProps, nextProps) => {
  console.log('Robot: shouldComponentUpdate');
  return nextProps.selectedRobotId === prevProps.selectedRobotId;
});

There is one thing to note here. This works opposite of shouldComponentUpdate. You return true if you do not want to re-render. You return false if you want it to render.

あなたがどんな小道具変化のためにre - renderを望まないならば、第2の機能は必要とされるだけであるので、反応は美しくこれを扱います.さあ、あなたのためにそれを処理しましょう.

コンポーネント

覚えておいてくださいuseEffect , 私は、内部のオプションの戻り関数について言及しましたuseEffect . この関数は、クリーンアップの目的になります.

React.useEffect(() => {
  console.log('Robot: componentDidUpdate');
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId])

上記のコードスニペットはcomponentDidUpdate 現在のリターンブロックを除いたコードブロック.だから、いつでもprops.selectedRobotId 変更、この効果は実行されます、そして、復帰機能は我々がクリーンアップをすることができる効果の完了について起動します.
しかし、これは何が起こるかではないcomponentWillUnmount . 正しい?
ので、達成するためにcomponentWillUnmount 我々は、もう一つを加えることができますuseEffect を返します.[] ). このcomponentDidMount でもuseEffect この関数は内部でこの関数を返しますcomponentWillUnmount .

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId]);

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('Robot: componentWillUnmount');
  }
}, []);

それは2つのレベルでクリーンアップを行う方法を提供します.つは、コンポーネントの更新時にアンマウントする準備ができているとき.

概要

この記事では、我々はカバーuseState and useEffect . それから私たちはuseEffect and memo クラスベースのコンポーネントを持つコンポーネントライフサイクルメソッドを達成するには.
最初は、これは混乱しているかもしれませんが、心配しないでください.ここでは同じアプリケーションのためのcodepenです.
コードと練習をチェックアウトしてください.また、それを共有したり、任意の質問/懸念のために私に手を差し伸べる感じ.
ハッピーラーニング!