Question

采用以下示例代码：

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

每篇React render props文章都以这种模式为例，但是内联定义函数通常是不好的做法。这是该规则的例外吗？

在render之外定义函数是否有好处？

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

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

Answer 1

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

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

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

希望以上代码对您有所帮助！：）

在render（）中定义渲染道具功能的性能含义？

1 个答案: