React jsのライフサイクル

マウント
アップデート
アンマウント

機能コンポーネント

マウント:
useEffect(() => {...}, []): 空の依存関係配列を持つ useEffect フックは、componentDidMount と同様に、最初のレンダリング後に 1 回だけ実行されます。

更新:
useEffect(() => {...}, [dependency]): useEffect に依存関係を渡すと、componentDidUpdate と同様に、依存関係 (状態またはプロパティ) の 1 つが変更されるたびに実行されます。
useState(): このフックは状態を更新し、再レンダリングをトリガーします。
useMemo() および useCallback(): これらのフックは、値と関数をメモ化することで、更新中のパフォーマンスの最適化に役立ちます。

アンマウント:
useEffect(() => {... return () => {...}}): コンポーネントのアンマウント時に実行するクリーンアップ関数を useEffect から返すことができます (componentWillUnmount と同様)。

クラスコンポーネント

マウント:
コンストラクター()
コンポーネントを初期化し、状態を設定し、メソッドをバインドします。

getDrivedStateFromProps()
レンダリング前に状態を小道具と同期します。あまり使用されません。

render()
何をレンダリングするか (UI) を記述し、JSX を返します。

componentDidMount()
コンポーネントがマウントされた後に呼び出されます (データのフェッチ、
の設定に役立ちます) サブスクリプションをアップします)。

更新:
getDrivedStateFromProps()
レンダリング前に状態をプロパティと同期します (更新中にも呼び出されます)。

shouldComponentUpdate()
再レンダリングが必要かどうかを決定します (パフォーマンスの最適化に使用されます)

render()
状態またはプロパティが変更されたときにコンポーネントを再レンダリングします。

getSnapshotBeforeUpdate()
DOM が変更される前に情報 (スクロール位置など) をキャプチャします

componentDidUpdate()
コンポーネントが再レンダリングされた後に呼び出されます (
との対話に役立ちます) DOM またはネットワーク リクエスト)。

アンマウント:
componentWillUnmount()
コンポーネントが DOM から削除される前に呼び出されます (クリーンアップに使用されます、
サブスクリプションの削除など)

エラー処理
componentDidCatch()
子コンポーネントのエラーをキャッチし、エラー処理を可能にします (React
16 ).

以上がReact jsのライフサイクルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。