我们知道，useMemo和useCallback主要作用是缓存中间状态，减少无意义的的render从而提高性能。但是最近我发现我对它们的使用一直有误解！
💎 对useMemo的误解
请看下面的代码，即使用了useMemo，在isZero的没有变的情况下，第二个子组件还是重新渲染了！
import { useCallback, useMemo, useState } from "react"; const Child = ({ value, onClick }) => { return ( <div style={{ height: 100, background: `#${(~~(Math.random() * (1 << 24))).toString(16)}` }} > my value is {value.toString()} </div> ); }; export default function App() { const [count, setCount] = useState(0); const isZero = useMemo(() => !!(count % 3), [count]); const onClick = useCallback(() => setCount(count + 1), [count]); return ( <div className="App"> <button onClick={onClick}>click me</button> <Child value={count} /> <Child value={isZero} /> </div> ); }
💡相关阅读
其实原因在之前的文章中也提到过：
React每次当组件状态发生改变时，都会从当前组件开始一直到所有叶子节点组件重新渲染。
文中同时也提到了这个问题的解决方案：子组件使用memo函数包裹，组件就可以按预期渲染了。
但是，此时我们去掉useMemo，子组件依然是按期望渲染的。
❝❞
memo和useMemo类似，都是基于Object.is的浅比较，仅仅对非引用类型有效。
所以上面的示例中，使用useMemo是没有意义的。
💎 对useCallback的误解
然而，上面的示例中，即使onClick函数不使用useCallback，组件也会按预期渲染。这是因为不管onClick的回调函数的缓存是否发生改变，App组件注定都会被渲染。
所以，现在我们得到了一个合理的代码，如下：
import { memo, useCallback, useMemo, useState } from "react"; const Child = memo(({ value, onClick }) => { return ( <div style={{ height: 100, background: `#${(~~(Math.random() * (1 << 24))).toString(16)}` }} > my value is {value.toString()} </div> ); }); export default function App() { const [count, setCount] = useState(0); // const isZero = useMemo(() => !!(count % 3), [count]); const isZero = !!(count % 3); // const onClick = useCallback(() => setCount(count + 1), [count]); const onClick = () => setCount(count + 1); return ( <div className="App"> <button onClick={onClick}>click me</button> <Child value={count} /> <Child value={isZero} /> </div> ); }
那到底应该何时使用useCallback呢？
请看下面的例子。在上面的代码基础上添加如下代码：
const onClickMethod = () => console.log("lll"); return ( <div className="App"> <button onClick={onClick}>click me</button> <Child value={count} onClick={onClickMethod} /> <Child value={isZero} onClick={onClickMethod} /> </div> );
此时，发现组件无法按预期渲染了，不管isZero是否发生变化，第二个Child组件都会被重新渲染。
这是因为此时的onClickMethod方法被做为Child组件的onClick属性了。
如果现在将onClickMethod方法使用useCallback包裹起来，就又正常了。
const onClickMethod = useCallback(() => console.log("lll"), []);
这才是useCallback的正确用法！
💎 总结
我们在写组件时，应该遵循下面的规律，可以有效提高页面性能：
- 👉尽量多用
memo方法包裹组件（减少渲染次数） - 👉当子组件的属性为非引用类型的中间状态时请用
useMemo（减少渲染次数） - 👉当子组件的属性为函数时请用
useCallback（减少渲染次数） - 👉仅作用在当前组件范围内的属性，尽量不要使用
useMemo和useCallback（减少调用）
好了今天的分享到这了，希望你也不要跟我一样再用错useMemo和useCallback了！
