react中的useMemo和useCallback

组件内部的state发生改变的时候，便会重新渲染
父组件传递的props发生变化也会重新渲染

在函数组件中，react不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo 和useCallback就是解决性能问题的杀手锏。

useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

import React from 'react';
 
 
export default function WithoutMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
 
    function expensive() {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }
 
    return <div>
        <h4>{count}-{val}-{expensive()}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

这里创建了两个state，然后通过expensive函数，执行一次昂贵的计算，拿到count对应的某个值。我们可以看到：无论是修改count还是val，由于组件的重新渲染，都会触发expensive的执行(能够在控制台看到，即使修改val，也会打印)；但是这里的昂贵计算只依赖于count的值，在val修改的时候，是没有必要再次计算的，在这种情况下，我们就可以使用useMemo。

import React,{useState,useMemo} from 'react'

function UseMemo() {
  const [count, setCount] = useState(1);
  const [val, setValue] = useState('');

  // 未性能优化前，数据每次更新时，均会触发
  // const expensive = () => {
  //   console.log('compute');
  //   let sum = 0;
  //   for (let i = 0; i < count * 100; i++) {
  //       sum += i;
  //   }
  //   return sum;
  // }

  // 使用useMemo 性能优化,仅在count更新时触发
  const expensive = useMemo(() => {
      console.log('compute');
      let sum = 0;
      for (let i = 0; i < count * 100; i++) {
          sum += i;
      }
      return sum;
  }, [count])

  return (
    <div>
        {/* <h4>{count}-{val}-{expensive()}</h4> */}
        <h4>{count}-{val}-{expensive}</h4>
        <p><button onClick={() => setCount(count + 1)}>+c1</button></p>
        <input value={val} onChange={event => setValue(event.target.value)}/>
    </div>
  )
}

export default UseMemo;

而useCallback跟useMemo比较类似，但它返回的是缓存的函数。