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

Question

我想知道它是否是反模式，或者它是否会影响组件以某种方式执行以下操作：

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

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

Answer 1

我认为一般人都避免在渲染中定义函数，但根据this blog post，它并不是一个不好的做法。博客文章重点关注在render中定义的内联事件处理函数，但我猜它适用于render中定义的任何函数。在渲染中定义函数意味着每次调用渲染时都会有重新定义它们的开销，但这可能不会产生明显的性能差异，具体取决于您的组件。

对于您给出的特定示例，我建议不要在渲染中定义另一个反应组件。如果你确实在渲染中定义了任何函数，那么它们应该与渲染所做的一致。在render中定义另一个组件或添加一堆函数会使得难以理解并且难以理解代码正在做什么。

Answer 2

在做这个之前几个问题：

1. 它是否使代码更具可读性？ （这取决于，假设50/50）
2. 它是否使代码更易于测试？ （无法被嘲笑，紧耦合 - 所以“不”）
3. 它是否使代码更灵活？ （紧耦合 - 再“不”）

我宁愿投票让基础组件通过props获得内在组件。而那个内部组件是在外面创建的。您将获得更大的灵活性，代码因抽象而更具可读性，同时具有更好的可测试性。