React hooks: callback as prop在调用时重新呈现依赖于它的每个钩子

基础概念

在React中，Hooks是一种允许你在函数组件中使用状态和其他React特性的方法。useEffect和useState是最常用的hooks。当一个组件接收一个回调函数作为prop，并且这个回调函数在每次渲染时都可能变化时，它会影响到依赖于这个回调函数的每个钩子。

类型

useCallback：用于记忆回调函数，避免在每次渲染时都创建新的函数实例。
useMemo：用于记忆计算结果，避免在每次渲染时都进行昂贵的计算。

应用场景

当父组件传递一个回调函数给子组件，并且这个回调函数依赖于父组件的状态时。
当需要在多个组件之间共享状态逻辑时。

遇到的问题及原因

当回调函数作为prop传递给子组件时，如果这个回调函数在每次父组件渲染时都会重新创建，那么即使子组件的props没有变化，子组件也会因为接收到了新的回调函数实例而重新渲染。这可能导致性能问题，尤其是当子组件树很深或者渲染开销很大时。

解决方法

使用useCallback钩子来记忆回调函数，确保只有在依赖项变化时才重新创建函数实例。

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // 使用useCallback记忆回调函数
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 只有当count变化时，handleClick才会重新创建

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
}

export default ParentComponent;

在这个例子中，handleClick函数只有在count状态变化时才会重新创建，这样即使ParentComponent重新渲染，ChildComponent接收到的onClick prop也不会变化，从而避免了不必要的重新渲染。