React Hook 总结（React 萌新升级打怪中...）

1 useCallback

useMemo 和 useCallback 接收的参数都是一样，都是在其依靠项发生变革后才实行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果，useCallback 返回的是函数。
当必要使用 useCallback 的环境通常包括以下几种情况：
（1）将回调函数作为 prop 通报给子组件：在这种环境下，使用 useCallback 可以确保子组件在父组件重新渲染时不会不须要地重新渲染。

1. import React, { useCallback } from 'react';
3. const ParentComponent = () => {
4.   const handleClick = useCallback(() => {
5.     console.log('Button clicked!');
6.   }, []);
8.   return <ChildComponent onClick={handleClick} />;
9. };
11. const ChildComponent = ({ onClick }) => {
12.   return <button onClick={onClick}>Click me</button>;
13. };

复制代码

（2）优化依靠项变革引起的重新渲染：在 useEffect 中使用 useCallback 可以制止不须要的重新实行。

1. import React, { useState, useEffect, useCallback } from 'react';
3. const ExampleComponent = () => {
4.   const [count, setCount] = useState(0);
6.   const handleIncrement = useCallback(() => {
7.     setCount(count + 1);
8.   }, [count]);
10.   useEffect(() => {
11.     console.log('Count changed:', count);
12.   }, [handleIncrement]);
14.   return (
15.     <div>
16.       <p>Count: {count}</p>
17.       <button onClick={handleIncrement}>Increment</button>
18.     </div>
19.   );
20. };

复制代码

（3）制止不须要的函数创建：在必要动态天生函数的场景下，使用 useCallback 缓存函数。

1. import React, { useCallback } from 'react';
3. const ExampleComponent = () => {
4.   const generateRandomNumber = useCallback(() => {
5.     return Math.floor(Math.random() * 100);
6.   }, []);
8.   return (
9.     <div>
10.       <p>Random number: {generateRandomNumber()}</p>
11.     </div>
12.   );
13. };

复制代码

注意： useCallBack不要每个函数都包一下，否则就会变成反向优化，useCallBack本身就是必要一定性能的
useCallBack并不能阻止函数重新创建,它只能通过依靠决定返回新的函数还是旧的函数,从而在依靠稳定的环境下保证函数地址稳定。useCallBack你真的知道怎么用吗。
2 useMemo

useMemo 可以在函数组件 render 上下文中同步实行一个函数逻辑，这个函数的返回值可以作为一个新的状态缓存起来。
场景一：在一些场景下，必要在函数组件中举行大量的逻辑盘算，那么我们不期望每一次函数组件渲染都实行这些复杂的盘算逻辑，以是就必要在 useMemo 的回调函数中实行这些逻辑，然后把得到的产物（盘算结果）缓存起来就可以了。
场景二：React 在整个更新流程中，diff 起到了决定性的作用，比如 Context 中的 provider 通过 diff value 来判断是否更新
缓存盘算结果：

1. function Scope(){
2.     const style = useMemo(()=>{
3.       let computedStyle = {}
4.       // 经过大量的计算
5.       return computedStyle
6.     },[])
7.     return <div style={style} ></div>
8. }

复制代码

缓存组件,减少子组件 render 次数：

1. function Scope ({ children }){
2.    const renderChild = useMemo(()=>{ children()  },[ children ])
3.    return <div>{ renderChild } </div>
4. }

复制代码

参考

「React 进阶」 React 全部 Hooks 使用大全 （包含 React v18 版本 ）


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。