React Hooks ---useMemo

转载于：https://segmentfault.com/a/1190000018697490

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

下面我们通过一个实例，来理解下 useMemo 的用法。

父组件

function App() {
  const [name, setName] = useState("名称");
  const [content, setContent] = useState("内容");
  return (
    <>
      <button onClick={() => setName(new Date().getTime())}>name</button>
      <button onClick={() => setContent(new Date().getTime())}>content</button>
      <Button name={name}>{content}</Button>
    </>
  );
}

子组件

function Button({ name, children }) {
  function changeName(name) {
    console.log("11");
    return name + "改变 name 的方法";
  }

  const otherName = changeName(name);
  return (
    <>
      <div>{otherName}</div>
      <div>{children}</div>
    </>
  );
}

熟悉 react 的同学可以很显然的看出，当我们点击父组件的按钮的时候，子组件的 name 和 children 都会发生变化。

注意我们打印 console.log 的方法。
不管我们是改变 name 或者 content 的值，我们发现 changeName 的方法都会被调用。
是不是意味着 我们本来只想修改 content 的值，但是由于 name 并没有发生变化，所以无需执行对应的 changeName 方法。但是发现他却执行了。 这是不是就意味着性能的损耗，做了无用功。

下面我们使用 useMemo 进行优化

优化之后的子组件

function Button({ name, children }) {
  function changeName(name) {
    console.log("11");
    return name + "改变 name 的方法";
  }

  const otherName = useMemo(() => changeName(name), [name]);
  return (
    <>
      <div>{otherName}</div>
      <div>{children}</div>
    </>
  );
}

export default Button;

这个时候我们点击 改变 content 值的按钮，发现 changeName 并没有被调用。
但是点击改变 name 值按钮的时候，changeName 被调用了。
所以我们可以使用 useMemo 方法 避免无用方法的调用，当然一般我们 changName 里面可能会使用 useState 来改变 state 的值，那是不是就避免了组件的二次渲染。
达到了优化性能的目的