在render（）函数中定义函数组件是否是反模式？

Question

我想知道它是否是反模式，或者是否以某种方式影响组件，例如：

render() {
  const MyFuncComponent = ({ prop1, prop2 }) => (
    // code here
  )

  return (
    <div>
      <MyFuncComponent prop1={something} prop2={else} />
    </div>
  )
}

Answer 1

我认为一般来说，人们避免在render中定义函数，但是根据这篇博客文章，这并不是一个坏习惯。该博客文章重点介绍了在render中定义的内联事件处理函数，但我想它适用于render中定义的任何函数。在渲染器中定义函数意味着每次调用渲染器时都要重新定义它们的开销，但这可能不会因组件而导致明显的性能差异。

对于您给出的特定示例，我建议不要在render中定义另一个react组件。如果您确实在渲染中定义了任何功能，则它们应与渲染的工作紧密结合。在render内定义另一个组件或添加一堆函数会使您难以理解代码的工作。