关于 useMemo 和 useCallback 的使用疑问

Question

团队成员中对什么时候使用 useMemo 和 useCallback 存在分歧

function App () {
  const [count, setCount] = useState(0);

  // 对于需要传递到子组件的方法大家都没有疑问，需要使用 useCallback 包裹，保证每次本组件渲染后 goBack 句柄不变
  const goBack = useCallback(() => {
    console.log('点击返回');
  }, []);

  // ????疑问1: 这个函数仅在本组件中使用是否需要使用 useCallback 包裹
  const addCount = () => {
    console.log('点击增加按钮');
    setCount(count => count + 1);
  };

  // ????疑问2: 类似这些变量是否需要使用 useMemo 包裹
  const columns = [
    {
      title: "名称",
      key: "1",
      width: "35%",
      align: "center",
    },
    {
      title: "模块",
      key: "2",
      width: "15%",
      align: "center",
    },
    ...
    ...
  ];

  return (
    <div>
      <Header goBack={goBack}>
      <div>count: {count}</div>
      <button onClick={addCount}>add button</button>
      {columns.map((item) => {
        return (
          <div key={item.key}></div>
        );
      })}
    </div>
  );
}

这两个优化 hook 到底应该什么时候使用呢？

Answer 1

双越 2020-11-04 17:47:54

你这俩问题，其实是一个问题 —— 何时应该使用。

这是函数组件，每次渲染函数都会重新执行，重新返回一个 jsx 。

useMemo 和 useCallback 的作用就在于，让你可以不用每次渲染都执行一般，给你缓存起来。

例如，有一个函数中有网络请求，你不希望每次组件渲染都重新请求一次，那就用 useCallback 。

但看你的代码，这两个地方，都没有必要用，因为都是简单的运算，不会影响性能。

• 提问者 内六角 #1

  非常感谢！