时间戳

首页 > 解决方案 > React 中的内联函数导致重新渲染？

javascript - React 中的内联函数导致重新渲染？

问题描述

我在一篇文章中读到，如果您有一些代码，例如：

class Parent extends Component {
  render() {
    return (
      <Child
        onClick={() => console.log('You clicked!')}
     />
    );
  }
}

Child每次Parent重新渲染时都会重新渲染，即使它的道具没有变化，只是因为该onClick函数是内联的，所以它在每次渲染时都会创建一个新的引用。

但是，即使将该功能移到外部render()，Child重新渲染..那么我在这里缺少什么？

此外，那篇文章还提到内联函数会增加 React 应用程序的内存占用，因为每次渲染都会创建一个新的函数引用。真的吗？JS 不是有某种自动垃圾收集功能吗？

标签： javascriptreactjs

解决方案

有几件事，您发布的内容仅适用于 Class 组件，而为什么它适用于 Class 组件是您正在创建一个回调函数并将其绑定到组件的实例，因此每次渲染组件，它是使用的同一个回调函数实例。

更多阅读https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/在“为什么不'我们不需要为箭头函数绑定'this'吗？”

对于一个函数组件，它是不同的，没有类实例，你可以使用useCallback将记住回调的钩子，给定一组依赖项保持不变。

正如有人在评论中指出的那样，您应该只真正致力于记忆回调等，尽管它们会阻止重新渲染大/深孩子

推荐阅读