Question

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

Hooks引入了useCallback，它提供了一个已记忆的回调，因此每次重新渲染都不需要不必要地生成新方法。但是，即使经过API's setup，我仍然可以看到，对于每个渲染，它仍然可以发挥很多作用。

另一方面，Class API提供了一种绑定一次回调的简单方法，因此每个渲染都不会有任何其他mixin。

用于比较的示例代码：

/**
 * 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} />;
  }
}

引用docs：

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

此性能是否达到了将所有部件放在一个地方的预期折衷？
在任何情况下都将使用内联回调，因为它总是会导致子代重新呈现。在那种情况下不是useCallback almost always needed吗？

useCallback与类方法[性能比较]

0 个答案: