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

Posted 2023-02-22

【中文标题】在 render() 中定义渲染道具函数的性能影响？

【英文标题】：Performance implications of defining render props function within 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
      />
    )
  

【参考方案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() 中创建一个新函数。避免这种情况的方法是使用您的实例方法。 :)