小编Eas*_*war的帖子

我最近开始使用钩子，并将现有的类组件迁移到钩子。在使用钩子的几个性能好处中，我无法理解的一个方面是回调是如何传递的。

Hooks 引入了useCallback它提供了一个记忆化的回调，这样每次重新渲染都不需要生成一个新的方法。但在完成API 的设置后，我仍然可以看到，对于每个渲染，它仍然做了很多事情。

另一方面，类 API 提供了一种绑定回调一次的简单方法，因此每个渲染都不会有任何额外的混合。

比较示例代码：

/**
 * Hooks
 */

function Test() {
  const handleCallback = React.useCallback(() => {
    /**
     * Callback handler implementation
     */
  }, [/** deps */]);

  return <ChildComponent callback={handleCallback} />;
}


/**
 * Class API
 */
class Test extends React.Component {
  handleCallback = () => {
    /**
     * Callback handler implementation
     */
  };

  render() {
    return <ChildComponent callback={this.handleCallback} />;
  }
}

引用文档：

挂钩允许您根据相关部分（例如添加和删除订阅）来组织组件中的副作用，而不是根据生命周期方法强制进行拆分。

• 这个性能是否达到了将所有部分集中在一处的预期权衡？

• 是否存在使用内联回调的情况，因为它总是会导致子项的重新渲染。在这种情况下，useCallback 几乎总是不需要？

这是一个关于使用钩子时可能会影响性能的问题。引用useStatereact 文档中的示例：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

React 保证 setState 函数标识是稳定的，并且不会在重新渲染时发生变化。这就是为什么从 useEffect 或 useCallback 依赖项列表中省略是安全的。

我有两个关于使用的疑问useState：

• 什么identity is stable and won’t change on re-renders意思？
• 我可以看到每个按钮都有一个anonymous函数作为事件处理程序传递。即使如setState identity is stableReact 所声称的那样，匿名函数不会在每次重新渲染时重新创建吗？

如果useCallback用于定义记忆化函数并将它们用作事件处理程序，不是更有效吗？