useMemo 和 useCallback - Hook

title: useMemo 和 useCallback - Hook id: 94bfaffefee3abdab161bc8ac1f2ffc6 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

useMemo 和 useCallback - Hook

useMemo 类似于 vue 的 computed，用于监听几个变量，当发现这几个变量变化了，会立刻(改组件重新渲染之前)触发绑定的方法，会返回值新的值。

useCallback 和 useMemo 功能相同，但 useCallback(fn, deps) 等同于 useMemo(() => fn, deps)。

注意

useEffect 也可以用于监听几个变量，但不同的是，useEffect 是「后置」的副作用方法，而 useMemo 和 useCallback 是变量刚发生变化时。

用法

了解用法的，可直接看下一条，了解这两个功能如何解决痛点，提升性能。

父组件中

import React from 'react'

import Home from './pages/Home'

function App() {
  let [a, setA] = React.useState(1);
  let [b, setB] = React.useState(10);

  const set = () => {
    setA(a + 1)
    setB(b + 1)
  }

  return (
    <div className="App">
      <button onClick={set}>点击</button>
      <Home a={a} b={b}/>
    </div>
  );
}

export default App;

子组件中

当点击父组件的按钮，打印如下：

useMemo 可以返回一个函数，这样就等同于 useCallback 的作用

父组件不变，子组件仍然是用 useMemo，但改动如下所示：

改为使用 useCallback：

痛点

参考自：useCallback()、useMemo() 解决了什么问题？

React.memo() 无法判断复杂数据类型的 prop。

父组件种引用子组件，当父组件重新渲染，或者父组件传给子组件的 props 没有变化时，为了避免子组件无意义的重新渲染，可以使用 React.memo() 方法把函数子组件包裹一层。

但 React.memo() 方法只能判断简单数据类型，如果父组件传给子组件的是复杂数据类型，比如对象、数组、方法等等，当父组件重新渲染，这些复杂数据类型重新赋值生成，虽然最终内容可能没有变化，但复杂数据类型的堆地址变了，React.memo() 还会认为 props 更新了，还会进行渲染。

父组件：

子组件：

当点击父组件中的「更新自身的值」按钮，会发现打印了 子组件渲染，因为父组件重新渲染，传给子组件的 all 对象重新生成了，虽然内容没变化，但是对象的堆地址变了，子组件 React.memo() 会认为其发生了变化，导致子组件发生了无意义的更新。

解决：使用 React.useMemo 生成对象

修改后的父组件：

使用 React.useMemo 包裹后，只有当 a 或 b 发生变化，React.useMemo 中的方法才会执行，返回给 all 的对象才会重新生成，也就是时 all 的值，只有内容真的发生变化，堆地址才会发生变化。

当传给子组件的 prop 是方法

同理，及时传给子组件的是方法，也可以使用 React.useMemo，只需要后面的数组不监听变量，这样 fn 方法只生成一次，比如：

但会比较麻烦，一个方法什么也不做，直接返回一个方法。

此时就可以使用 useCallback 了，因为 useCallback(fn, deps) 等同于 useMemo(() => fn, deps)。

PrevioususeEffect HookNextuseRef Hook

Last updated

Was this helpful?