时间戳

首页 > 解决方案 > 如何将回调作为道具传递给 React 中的较低组件，而无需每次都创建新的回调？

reactjs - 如何将回调作为道具传递给 React 中的较低组件，而无需每次都创建新的回调？

问题描述

我变得有棱有角并习惯于做出反应。我正在阅读有关事件处理的文档并偶然发现：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

然后文档说：

" 这种语法的问题在于，每次 LoggingButton 渲染时都会创建不同的回调。在大多数情况下，这很好。但是，如果将此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染. 我们一般建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。 ”

我使用钩子时无权访问构造函数。我应该怎么办？

我准备了一个快速演示。结构是 App > [CompA > Comp B]。组件 B 中有一个按钮可以增加计数，并且计数的状态保存在 App 中。通过 props 将回调从 App 通过 Comp A 委托给 Comp B。每当我单击 Comp B 中的计数按钮时，它都会重新渲染整个 Comp A。这可以通过随机数生成来验证。这个组件很好，但在大型项目中这不是问题吗？

现在想象一下我有一个测验应用程序，我在主应用程序中记录分数。如果有人在 Question 组件中选择了正确答案，我想在主 App 中保留一个计数。这样做会重新渲染任何中间组件。我应该遵循什么模式？

标签： reactjscallbackreact-props

解决方案

使用useCallback钩子。只要它的依赖关系保持不变，它就会返回相同的函数。

const callback = useCallback(()=> { /* do something */ }, [/* dependencies */])

依赖项的工作方式与useEffect钩子相同。

编辑

从你的演示来看，<CompA onCount={() => setCount(count + 1)} />非常好，Dan Abramov 说了这么多。

父级重新渲染将渲染其子级，因此如果计数状态处于父级，则子级将被重新渲染。这完全没问题。React 的构建是为了非常快速地做到这一点。

推荐阅读