useMemo与callBack作用与区别

useMemo性能优化

const [val, setVal] = useState(0);
const [count, setCount] = useState(1);
const getDoubleCount = () => {
  console.log('getDoubleCount进行计算了');
  return count + 1;
};
return (
    <div>
      <h2>value: {val}</h2>
      <h2>doubleCount: {getDoubleCount()}</h2>
      <button onClick={() => setVal(val + 1)}>value+1</button>
      <button onClick={() => setCount(count + 1)}>count+1</button>
    </div>
)

初始化打印出来 每次点击value+1按钮也会执行一次

const [val, setVal] = useState(0);
const [count, setCount] = useState(1);
const getDoubleCount = useMemo(() => {
  console.log('getDoubleCount进行计算了');
  return count + 1;
},[count]);
return (
    <div>
      <h2>value: {val}</h2>
      <h2>doubleCount: {getDoubleCount}</h2>
      <button onClick={() => setVal(val + 1)}>value+1</button>
      <button onClick={() => setCount(count + 1)}>count+1</button>
    </div>
)

用useMemo包裹之后不会在value变化时候渲染

useCallBack性能优化

useCallback返回的是一个 memoized（缓存）函数，在依赖不变的情况下,多次定义的时候,返回的值是相同的，他的实现原理是当使用一组参数初次调用函数时，会缓存参数和计算结果，当再次使用相同的参数调用该函数时，会直接返回相应的缓存结果。

const parent = () => {
  const [value1, setValue1] = useState(0);
    const [value2, setValue2] = useState(0);
    const handleClick1 = useCallback(()=> {
        setValue1(value1 + 1);
    }, [value1]);
    const handleClick2 = useCallback(()=> {
        setValue2(value2 + 1);
    }, [value2]);
    return (
        <>
            {(() => console.log("Parent-render"))()}
            <h3>{value1}</h3>
            <h3>{value2}</h3>
            <Child1 handleClick1={handleClick1} />
            <Child2 handleClick2={handleClick2} />
        </>
    );  
}

const Child1 = memo((props: any) => {
  return (
    <div>
        {(() => console.log("Child1-render"))()}
        <button onClick={() => props.handleClick1()}>value1 + 1</button>
    </div>
  );
});
const Child2 = memo((props: any) => {
  return (
      <div>
          {(() => console.log("Child2-render"))()}
          <button onClick={() => props.handleClick2()}>value2 + 1</button>
      </div>
  );
});

export default Parent

useCallback返回的是一个memoized回调函数，仅在其中绑定的一个依赖项变化后才更改可防止不必要的渲染，在跨组件共享数据中举例的事件是在父组件中点击触发，而现在是使用状态提升，在父组件中传递方法供子组件调用，每次render时函数也会变化，导致子组件重新渲染，上面例子useCallback将函数进行包裹，依赖值未发生变化时会返回缓存的函数，配合React.memo即可优化无意义的渲染

useMemo和useCallback的共同点：

接收的参数都是一样的，第一个是回调函数，第二个是依赖的数据
它们都是当依赖的数据发生变化时才会重新计算结果，起到了缓存作用

useMemo和useCallback的区别：

useMemo计算结果是return回来的值，通常用于缓存计算结果的值
useCallback计算结果是一个函数，通常用于缓存函数

参考文章： www.cnblogs.com/hymenhan/ar… events.jianshu.io/p/d08d5eceb…