【React】关于useCallback和useEffect的内容
React.useCallback 可以被翻译为 “React.使用回调函数” 或者 “React.利用回调函数”。
目标
用于函数的记忆化。
句法
const memoizedFunction = React.useCallback(
() => {
// 関数のロジック
},
[dependency1, dependency2] // 依存関係の配列
);
优点
-
- 不要な関数の再生成を避けることができる。
- 子コンポーネントへの関数の再渡しを防ぐことで、子コンポーネントの不要な再レンダリングを防ぐことができる。
使用案例
-
- 関数を子コンポーネントに渡す場面
- 計算に時間がかかる関数や、頻繁に実行される関数の場合、その関数の再生成を防ぐためにuseCallbackを使用することが推奨される
如果不使用useCallback会怎么样？
每当父组件重新渲染时，传递给子组件的函数有可能被重新生成。这会导致子组件不必要地重新渲染的风险。通过使用useCallback钩子来存储函数，可以防止子组件接收的函数引用发生变化，从而避免不必要的重新渲染。
React.useEffect – React中使用的副作用函数
图片来源
为了执行副作用（例如数据获取、显式DOM更改、订阅、清理等），使用该项操作。
构文
React.useEffect(() => {
// 副作用のロジック
};
}, [dependency1, dependency2]); // 依存関係の配列
优点
-
- コンポーネントのライフサイクルに合わせて副作用を制御できる。
-
- 依存配列を使って、特定の状態やプロップの変更時にのみ副作用を実行することができる。
- クリーンアップ関数を使用して、副作用のクリーンアップ（例: イベントリスナの解除、購読のキャンセルなど）を行うことができる。
使用案例
-
- コンポーネントがマウントされたときや、特定の状態・プロップが変更されたときに外部APIからデータを取得する場合
- マウント、アンマウント、または特定の状態・プロップの変更に応じて、明示的にDOMを操作する場合
