登录
useMemo 和 useCallback - Hook
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;
更新时间：2022/12/09 13:40:03