dw做的网站成品wordpress 主题 标签

useMemo

useMemo
用于 缓存 计算结果，避免不必要的重新计算。它返回一个记忆化的值，仅在 依赖项变化时重新计算，否则会返回上次计算的结果。这样可以有效减少昂贵的计算或渲染。

语法：

let xxx = useMemo(callback,[dependencies])

• 第一次渲染组件的时候，callback会执行
• 后期只有依赖的状态值发生改变，callback才会再执行
• 每一次会把callback执行的返回结果赋值给xxx
• useMemo具备“计算缓存”，在依赖的状态值没有发生改变，callback没有触发执行的时候，xxx获取的是上一次计算出来的结果
• 和Vue中的计算属性非常的类似！！

使用

  const Demo = function Demo() {console.log("渲染")let [supNum, setSupNum] = useState(10),[oppNum, setOppNum] = useState(5),[x, setX] = useState(0);let ratio = useMemo(() => {console.log(useMemo,'useMemo')let total = supNum + oppNum,ratio = '--';if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';return ratio;}, [supNum, oppNum]);return <div className="vote-box"><div className="main"><p>支持人数：{supNum}人</p><p>反对人数：{oppNum}人</p><p>支持比率：{ratio}</p><p>x:{x}</p></div><div className="footer"><Button type="primary" onClick={() => setSupNum(supNum + 1)}>支持</Button><Button type="primary" danger onClick={() => setOppNum(oppNum + 1)}>反对</Button><Button onClick={() => setX(x + 1)}>干点别的事</Button></div></div>;
};

初始渲染，打印如下：

点击新增，打印如下：

点击干点别的事，打印如下：

注意事项

useMemo 不会提高性能的使用频率，它只是优化那些需要高开销计算的场景。如果计算本身就很轻量化，使用 useMemo 反而可能带来额外的性能开销。
useMemo 不会阻止组件重新渲染，它只是在渲染过程中缓存某些计算值。

useCallback

useCallback 用于 缓存函数，避免函数在每次渲染时都被重新创建。它返回一个记忆化的回调函数，只有当依赖项变化时，才会重新创建该函数。
虽然减少了堆内存的开辟，但是useCallback本身也有自己的处理逻辑和缓存机制，这个也消耗时间。

语法

  const xxx = useCallback(callback,[dependencies]) 

• 组件第一次渲染，useCallback执行，创建一个函数“callback”，赋值给xxx
• 组件后续每一次更新，判断依赖的状态值是否改变，如果改变，则重新创建新的函数堆，赋值给xxx；但是如果，依赖的状态没有更新「或者没有设置依赖“[]”」则xxx获取的一直是第一次创建的函数堆，不会创建新的函数出来！！
• 或者说，基于useCallback，可以始终获取第一次创建函数的堆内存地址(或者说函数的引用)

适用场景

useCallback主要用于优化传递给子组件的函数，避免每次父组件重新渲染时，子组件因为接受到新的函数引用而重新渲染。

父组件更新时，传递给子组件的属性仅仅是一个函数「特点：基本应该算不变的」，不再让子组件也跟着更新。

1、传递给子组件的属性（函数），每一次需要是相同的堆内存地址（是一致的），基于useCallback处理。

2、在子组件内部也要做一个处理，验证父组件传递的属性是否发生改变，如果没有变化，则让子组件不能更新，有变化才需要更新。子组件需要判断传递过来的属性有没有变化，此时

• 类组件可以使用React.PureComponent即可「在shouldComponentUpdate中对新老属性做了浅比较」
• 函数组件可以使用React.memo函数，对新老传递的属性做比较，如果不一致，才会把函数组件执行，如果一致，则不让子组件更新。

使用

父组件

const Demo = function Demo() {let [x, setX] = useState(0);// const handle = () => { };  //第一次:0x001  第二次:0x101  第三次:0x201 ...const handle = useCallback(() => { }, []); //第一次:0x001  第二次:0x001  第三次:0x001 ...return <div className="vote-box"><Child handle={handle} /><div className="main"><p>{x}</p></div><div className="footer"><Button type="primary" onClick={() => setX(x + 1)}>累加</Button></div></div>;
};

子组件为类组件

class Child extends React.PureComponent {render() {console.log('Child Render');return <div>我是子组件</div>;}
} 

子组件为函数组件

const Child = React.memo(function Child(props) {console.log('Child Render');return <div>我是子组件</div>;
}); 

useCallback 对性能的优化主要体现在避免子组件不必要的重新渲染，尤其是在子组件是 React.memo 或 shouldComponentUpdate 进行优化时。