在 render() 中定义渲染道具函数的性能影响？答案

【问题标题】：Performance implications of defining render props function within render()?在 render() 中定义渲染道具函数的性能影响？
【发布时间】：2020-12-24 04:08:51
【问题描述】：

以下面的示例代码为例：

class Something extends Component {
  render() {
   return (
      <SomeProvider
        render={providedProps => (
          <SomeChild {...providedProps}/>
        )}
      />
    )
  }
}

每篇 React 渲染道具文章都使用这种模式作为示例，但内联定义函数通常是不好的做法。这是该规则的例外吗？

在渲染之外定义函数有什么好处吗？

class Something extends Component {
  renderSomeChild = providedProps => (
    <SomeChild {...providedProps}/>
  )

  render() {
   return (
      <SomeProvider
        render={this.renderSomeChild}
      />
    )
  }
}

【问题讨论】：

标签： javascript reactjs react-native render

【解决方案1】：

在这个“外部函数”中，const renderSomeChild（我猜是因为你没有提到）只是引用内存中分配的函数。因此，如果您不打算重用该功能，那么在外部使用它是没有意义的，我真的认为这对性能没有意义......

将第一个示例用作最佳实践的一种方法是编写如下代码：

 class Something extends Component {
  render() {
   return (
      <SomeProvider>
        {providedProps => (
          <SomeChild {...providedProps}/>
        )}
      </SomeProvider>
    )
  }
}

希望以上代码对您有所帮助！ :)

【讨论】：

但是，我相信内联定义渲染函数可以保证SomeProvider组件会重新渲染，因为新的render函数属性不等于前一个，对吧？跨度>
仅在扩展 React.PureComponent 时。
这不正确。如果某些事情会触发extends PureComponent 的重新渲染，那么它必然会导致extends Component 的重新渲染
如果我不清楚，我很抱歉。我明白你的意思，是的！你说得对！我的意思是，即使你扩展了一个 React.PureComponent，它也会在 render() 中创建一个新函数。避免这种情况的方法是使用您的实例方法。 :)