React优化勾子集合

1. React中常常需要优化性能，特别是对于渲染频率高计算量大的组件，优化过程中可以使用

   useCallback()用于缓存一个函数，以避免在每次渲染时重新创建一个新的函数

   useMemo()用于缓存计算结果，避免在每次渲染时重新计算结果

   React.memo()用于缓存组件的渲染结果，以避免在相同props下必要的渲染,只有在props发生变化时，才会重新渲染组件

2.  使用场景举例

对于给定的父组件和子组件，如果父组件需要向子组件传递一个函数作为props，并且子组件中也有一个需要用到这个函数的方法，则可以使用useCallback

• import React, { useCallback, useMemo } from 'react';
  
  // 子组件
  function Child({ data, onClick }) {
    const handleClick = useCallback(() => {
      onClick(data);
    }, [data, onClick]);
  
    const result = useMemo(() => {
      return data + 1;
    }, [data]);
  
    return (
      <div onClick={handleClick}>
        <p>data: {data}</p>
        <p>result: {result}</p>
      </div>
    );
  }
  
  // 父组件
  function Parent() {
    const handleClick = useCallback((data) => {
      console.log(`clicked data: ${data}`);
    }, []);
  
    return (
      <div>
        <Child data={1} onClick={handleClick} />
      </div>
    );
  }

• 对于React.memo,用来创建一个高阶组件，可以帮助我们缓存组件。它只在组件props发生变化时重新渲染组件

• import React, { memo } from 'react';
  
  //父组件
  function ParentComponent() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <div>Count: {count}</div>
        <ChildComponent count={count} />
      </div>
    );
  }
  
  
  //子组件
  const ChildComponent = memo(props => {
    console.log('Rendering ChildComponent...');
  
    return (
      <div>Count: {props.count}</div>
    );
  });

  当count值发生变化时，父组件和子组件都会被重新渲染，使用React.memo可以告诉React只有在count的值改变时才需要重新渲染子组件。