Skip to main content

useMemo

useMemo、useEffect 的执行时机对比​

useMemo 和 useCallback 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个 hooks 都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。

使用场景​

使用过 vue 的话，你可以把它理解成 vue 里面的 computed，是一种数据的缓存，而这个缓存依赖后面的第二个参数数组，如果这个数组里面传入的数据不变，那么这个 useMemo 返回的数据是之前里面 return 的数据。

在具体项目中，如果你的页面上展示的数据是通过某个（某些）state 计算得来的一个数据，那么你每次这个组件里面无关的 state 变化引起的重新渲染，都会去计算一下这个数据，这时候就需要用 useMemo(()=>{}, [])去包裹你的计算的方法体，这样那些无关的 state 改变引起的渲染不会重新计算这个方法体，而是返回之前计算的结果，达到一种缓存的效果。

export default function WithMemo() {
  const [count, setCount] = useState(1);
  const [val, setValue] = useState("");

  const expensive = useMemo(() => {
    console.log("compute");
    let sum = 0;
    for (let i = 0; i < count * 100; i++) {
      sum += i;
    }
    return sum;
  }, [count]); // 只有当count改变参会重新渲染

  return (
    <div>
      <h4>
        {count}-{expensive}
      </h4>
      {val}
      <div>
        <button onClick={() => setCount(count + 1)}>+c1</button>
        <input value={val} onChange={(event) => setValue(event.target.value)} />
      </div>
    </div>
  );
}

参考​