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

Question

采取以下示例代码：

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}
      />
    )
  }
}

标签： javascriptreactjsreact-nativerender

Answer 1

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

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

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

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