2021-05-13 react useMemo

常见使用方法

// parent.jsx
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>

        <Child name={name}>{content}</Child>
      </>
  )
}

// child.jsx
function Child({ name, children }) {
  function changeName(name) {
    console.log('fe')
    return name + '改变name的方法'
  }
    
  // 父组件的渲染 -> 都会导致changeName的方法被调用
  const otherName =  changeName(name)
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>
  )
}

当点击父组件的按钮的时候，子组件的name和children都会发生变化。

注意打印console.log的方法。

不管是改变name或者content的值，会发现 changeName的方法都会被调用。
意味着本来只想修改content的值，但是由于name并没有发生变化，所以无需执行对应的changeName方法。但是发现它却执行了。

这就意味着性能的损耗，做了无用功。

使用useMemo缓存数据值优化

function Child({ name, children }) {
  function changeName(name) {
    console.log('fe')
    return name + '改变name的方法'
  }

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

export default Child;

这个时候我们点击 改变content值的按钮，changeName 并不会被二次被调用。

但是点击改变name值按钮的时候，changeName被调用了。

所以我们可以使用useMemo方法 避免无用方法的调用，对数值进行了缓存

当然一般我们changName里面可能会使用useState来改变state的值，那是不是就避免了组件的二次渲染。

useMemo包裹组件

// 使用React.memo包裹组件
const MyComponent = React.memo(() => {
  return <Child prop={prop} />
}, [prop]);

// or
function A({ a, b }) {
  const B = useMemo(() => <B1 a={a} />, [a]);
  const C = useMemo(() => <C1 b={b} />, [b]);
  return (
    <>
      {B}
      {C}
    </>
  );
}