关于 useMemo 和 useCallback 的使用疑问

来源:14-9 使用useCallback做性能优化

内六角

2020-11-04

团队成员中对什么时候使用 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 到底应该什么时候使用呢?

写回答

1回答

双越

2020-11-04

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

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

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

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

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

1
1
内六角
非常感谢!
2021-08-23
共1条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程