48.React学习笔记.hooks useMemo

useMemo实际目的也是为了进行性能的优化。
如何进行性能优化？

1. useMemo返回的也是一个memoized值；
2. 在依赖不变的情况下，多次定义的时候，返回的值是相同的。

import React, { useState, useMemo } from 'react'
function calcNumber(count) {
  console.log("cal重新计算");
  let total = 0;
  for (let i = 1; i <= count; i++) {
    total += i;
  }
  return total
}
export default function MemoHookDemo01() {
  const [count, setCount] = useState(10);
  const [show, setShow] = useState(true);
  // const total = calcNumber(count);
  const total = useMemo(() => {
    return calcNumber(count);
  }, [count])
  return (
    <div>
      <h2>计算数字的和：{total}</h2>
      <button onClick={e => { setCount(count + 1) }}>+1</button>
      <button onClick={e => { setShow(!show) }}>show切换</button>
    </div>
  )
}

这个例子中：

• useMemo第一个参数为回调函数，第二个参数为依赖项；
• 当依赖项发生改变时，执行回调函数。

当我们用memo包裹函数组件时，重新渲染时，重新定义局部变量，传给子组件的也都是新的值；及性能浅层比较时，对象时不一样的，就会重新渲染。

有什么方法能解决这个问题呢？

1. 用useState；
2. 用useMemo包裹回调函数，设置依赖项。

import React, { useState, memo, useMemo } from 'react'
const HYInfo = memo((props) => {
  console.log('HYInfo重新渲染');
  return <h2>名字：{props.info.name} 年龄：{props.info.age}</h2>
})
export default function MemoHookDemo02() {
  console.log('MemoHookDemo02重新渲染');
  const [show, setShow] = useState(true);
  // const info = { name: "wwq", age: 18 };
  const info = useMemo(() => {
    return { name: "wwq", age: 18 }
  }, []);
  return (
    <div>
      <HYInfo info={info} />
      <button onClick={e => { setShow(!show) }}>show切换</button>
    </div>
  )
}

注意事项：

1. useMemo对返回值做优化；
2. useCallback对回调函数优化；
3. useCallback也可以转为useMemo。

useMemo优化场景：

1. 大量计算操作，是否有必要每次渲染都重新计算；
2. 对子组件传递相同内容的对象时，使用useMemo进行性能的优化。