React’s useMemo Hook to memoize a functions return value(s) and to run a function only if its dependencies have changed

基本使用

  1. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

返回一个 memoized 值。
把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

示例1

  1. import React from "react";
  3. const users = [{ id: "a", name: "Robin" }, { id: "b", name: "Dennis" }];
  4. const List = ({ list }) => {
  5.   return (
  6.     <ul>
  7.       {list.map(item => (
  8.         <ListItem key={item.id} item={item} />
  9.       ))}
  10.     </ul>
  11.   );
  12. };
  14. const ListItem = ({ item }) => {
  15.   return <li>{item.name}</li>;
  16. };
  18. const App = () => {
  19.   const [text, setText] = React.useState("");
  20.   const [search, setSearch] = React.useState("");
  22.   const handleText = event => {
  23.     setText(event.target.value);
  24.   };
  26.   const handleSearch = () => {
  27.     setSearch(text);
  28.   };
  30.   const filteredUsers = users.filter(user => {
  31.     console.log("Filter function is running ...");
  32.     return user.name.toLowerCase().includes(search.toLowerCase());
  33.   });
  35.   return (
  36.     <div>
  37.       <input type="text" value={text} onChange={handleText} />
  38.       <button type="button" onClick={handleSearch}>
  39.         Search
  40.       </button>
  42.       <List list={filteredUsers} />
  43.     </div>
  44.   );
  45. };
  47. export default App;

上面的例子中，在input中输入的时候，App的状态text会改变，App就会重新渲染，重新define filteredUsers，就会打印 Filter function is running …

image.png
可以看到只有users变化的时候，才会触发filteredUsers

示例2

假设以下场景，父组件在调用子组件时传递 info 对象属性，点击父组件按钮时，发现控制台会打印出子组件被渲染的信息。

  1. import React, { memo, useState } from 'react';
  3. // 子组件
  4. const ChildComp = (info:{info:{name: string, age: number}}) => {
  5.   console.log('ChildComp...');
  6.   return (<div>ChildComp...</div>);
  7. };
  9. const MemoChildComp = memo(ChildComp);
  11. // 父组件
  12. const Parent = () => {
  13.   const [count, setCount] = useState(0);
  14.   const [name] = useState('jack');
  15.   const [age] = useState(11);
  16.   const info = { name, age };
  18.   return (
  19.     <div className="App">
  20.       <div>hello world {count}</div>
  21.       <div onClick={() => { setCount(count => count + 1); }}>点击增加</div>
  22.       <MemoChildComp info={info}/>
  23.     </div>
  24.   );
  25. };
  27. export default Parent;

分析原因：

点击父组件按钮，触发父组件重新渲染；父组件渲染，const info = { name, age } 一行会重新生成一个新对象，导致传递给子组件的 info 属性值变化，进而导致子组件重新渲染。

解决：

使用 useMemo 将对象属性包一层，useMemo 有两个参数：

  • 第一个参数是个函数，返回的对象指向同一个引用，不会创建新对象；
  • 第二个参数是个数组，只有数组中的变量改变时，第一个参数的函数才会返回一个新的对象。
  1. import React, { memo, useMemo, useState } from 'react';
  3. // 子组件
  4. const ChildComp = (info:{info:{name: string, age: number}}) => {
  5.   console.log('ChildComp...');
  6.   return (<div>ChildComp...</div>);
  7. };
  9. const MemoChildComp = memo(ChildComp);
  11. // 父组件
  12. const Parent = () => {
  13.   const [count, setCount] = useState(0);
  14.   const [name] = useState('jack');
  15.   const [age] = useState(11);
  17.   // 使用 useMemo 将对象属性包一层
  18.   const info = useMemo(() => ({ name, age }), [name, age]);
  20.   return (
  21.     <div className="App">
  22.       <div>hello world {count}</div>
  23.       <div onClick={() => { setCount(count => count + 1); }}>点击增加</div>
  24.       <MemoChildComp info={info}/>
  25.     </div>
  26.   );
  27. };
  29. export default Parent;

完整代码见https://stackblitz.com/edit/react-kkxeqs

使用场景

  • 优化函数返回值

Reference：
https://www.robinwieruch.de/react-usememo-hook
https://mp.weixin.qq.com/s/fF-H3Lr0aP3Ld8jfJrrwQg