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;

子组件中

import React from 'react';

function Home({a, b}) {

  // 使用 useMemo
  const sum = React.useMemo(() => {
    // 此函数只有 a 或 b 发生变化时才触发
    console.log('a 和 b 发生变化', a, b)
    return a + b
  }, [a, b]);

  // 可再次 useMemo
  const mul100 = React.useMemo(() => {
    // 此函数只有 sum 发生变化时才触发
    console.log('sum 发生变化', sum)
    return sum * 100
  }, [sum]);

  // 还可用于 useEffect
  React.useEffect(() => {
    // 虽然监听了 sum 和 mul100 两个变量
    // 但这是「副作用」函数
    // 被触发时，sum 和 mul100 两个变量已经都发生过变化了，所以每次点击按钮，此方法只触发一次
    console.log('sum 或 mul100 发生变化：', sum, mul100)
  }, [sum, mul100])

  return (
    <>
      <div>和为：{sum}</div>
      <div>和 * 100 为：{mul100}</div>
    </>
  )
}

export default Home

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

> 打开页面
# a 和 b 发生变化 1 10
# sum 发生变化 11
# sum 或 mul100 发生变化： 11 1100
> 点击按钮
# a 和 b 发生变化 2 11
# sum 发生变化 13
# sum 或 mul100 发生变化： 13 1300
> 点击按钮
# a 和 b 发生变化 3 12
# sum 发生变化 15
# sum 或 mul100 发生变化： 15 1500

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

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

import React from 'react';

function Home({a, b}) {
  const [age, setAge] = React.useState(18)

  const getSum = React.useMemo(() => {
    // return 一个方法，这个方法只有当 a 或 b 发生变化，才会更新
    return () => {
      let num = a + b * 1000 / 500 * 1234
      return num
    }
  }, [a, b])

  return (
    <>
      <div>{getSum()}</div>

      <div>页面岁数：{age}</div>
      <button onClick={() => setAge(age + 1)}>岁数 + 1</button>
    </>
  )
}

export default Home

改为使用 useCallback：

import React from 'react';

function Home({a, b}) {
  const [age, setAge] = React.useState(18)

  // 使用 useMemo，返回一个方法，只要 a 或 b 的值没有变化，这个方法返回的值就不会变
  const getSum = React.useCallback(() => {
    console.log(22)
    let num = a + b * 1000 / 500 * 1234
    return () => num
  }, [a, b])

  return (
    <>
      <div>{getSum()}</div>

      <div>页面岁数：{age}</div>
      <button onClick={() => setAge(age + 1)}>岁数 + 1</button>
    </>
  )
}

export default Home

痛点

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

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

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

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

父组件：

import React from 'react'

import Home from './pages/Home'

function App() {

  let [num, setNum] = React.useState(1);

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

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

  // 要传给子组件的 prop
  const all = {a, b}

  return (
    <div className="App">
      <button onClick={set}>更新 props</button>
      <button onClick={() => setNum(num + 1)}>更新自身的值：{num}</button>
      <Home all={all}/>
    </div>
  );
}

export default App;

子组件：

import React from 'react';

function Home({all}) {

  console.log('子组件渲染')
  return <div>{all.a + all.b}</div>
}

export default React.memo(Home)

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

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

修改后的父组件：

import React from 'react'

import Home from './pages/Home'

function App() {

  let [num, setNum] = React.useState(1);

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

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

  // 要传给子组件的 prop
  const all = React.useMemo(() => ({a, b}), [a, b])

  return (
    <div className="App">
      <button onClick={set}>更新 props</button>
      <button onClick={() => setNum(num + 1)}>更新自身的值：{num}</button>
      <Home all={all}/>
    </div>
  );
}

export default App;

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

当传给子组件的 prop 是方法

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

import React from 'react'

import Home from './pages/Home'

function App() {

  // 要传给子组件的 prop
  const fn = React.useMemo(() => {
    return () => console.log('子组件触发的打印')
  }, [])

  return (
    <div className="App">
      <Home fn={fn}/>
    </div>
  );
}

export default App;

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

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

import React from 'react'

import Home from './pages/Home'

function App() {

  // 使用 React.useCallback
  const fn = React.useCallback(() => {
    console.log('子组件触发的打印')
  }, [])

  return (
    <div className="App">
      <Home fn={fn}/>
    </div>
  );
}

export default App;