useMemo用法

1.未使用useMemo组件的state更新后，计算的一些数据也会重新经常计算
例子：页面一个根据count计算显示的总数，另外一个功能是切换页面主题，当页面切换主题改变state的时候，总数会去重新计算，造成页面卡顿

  const [colors, setColors] = useState(true);
  const [count, setCount] = useState(1);

  const clickFn = () => {
    let sum = 0;
    for (let i = 0; i < 1000000000*count; i++) {
      sum += i;
    }
    return sum;
  };

      <div>获得总数{clickFn()}</div>
      <div onClick={() => { setCount(count+1);}}>改变count</div>
      <div onClick={() => { setColors(!colors);}}>点我换主题{colors == true ? 'red': 'black'}</div>

2.使用useMemo，当依赖的count发生改变才去重新计算，return值出来，这时候切换主题页面就不卡顿了

  const clickFn = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < 100000000*count; i++) {
      sum += i;
    }
    return sum;
  },[count]);

    <div>获得总数{clickFn}</div>

3.注意usememo 是return一个值出来，和useEffect不一样