react hook系列-useCallback useMemo memo

memo

• 缓存返回的新组件，如果组件的属性不改变，则不刷新 类似PureComponent

减少渲染次数

1 useCallback：

参数
  参数1：callback，逻辑放在callback函数体内执行
  参数2：逻辑函数需要引入的外部参数或者是依赖参数
  `useCallback第2个参数是依赖的变量的数组 当数组中变量发生改变后，就会重新生成生成新的函数`
返回值
 返回一个 memoized 回调函数。
 在依赖参数不变的情况下，返回的回调函数是同一个引用地址

2 useMemo

避免在每次渲染时都进行高开销的计算的优化的策略，这种优化有助于避免在每次渲染时都进行高开销的计算

案例代码：

import React, { useState, useCallback, useMemo, memo } from "react";

//函数组件是没有状态的
function Counter() {
//useState 会返回一个数组，第1个元素是当前状态 第2个元素是设置状态的方法
//1.setState特点1可以修改状态 2.状态修改完成后组件会刷新
let [state, setState] = useState( { number: 0, name: "数量" });
console.log("Counter");
return (
  <div>
    <p>
      {state.name}:{state.number}
    </p>
    <button
      onClick={() => setState({ number: state.number + 1, name: state.name })}
    >
      +
    </button>
  </div>
);
}
//memo  缓存返回的新组件，如果组件的属性不改变，则不刷新  类 PureComponent
let MemoMyCounter = memo(Counter);
function App() {
let [state, setState] = useState({ number: 0 });
let [value, setValue] = useState("");
console.log("render App");
//本意是地函数进行缓存
//useCallback第2个参数是依赖的变量的数组 当数组中变量发生改变后，就会重新生成生成新的函数
let onButtonClick = useCallback(() => {
  setState({ number: state.number + 1 });
}, [state]); 
let data = useMemo(() => ({ number: state.number }), [state]);
return (
  <div>
    <input value={value} onChange={(event) => setValue(event.target.value)} />
    <MemoMyCounter onButtonClick={onButtonClick} data={data} />
  </div>
);
}

export default App;