Question

我已经在多个地方读过React中的无状态函数不应该有内部函数。为什么会这样，虽然它有效？

const Foo = () => {
 let bar = () => {
    return <span>lorem ipsum</span>
 }
 return <div>{bar()}</div>
}

这很有效。但是，为什么不应该这样做呢？

Answer 1

虽然仍然是有效的代码，但就反应而言，上述示例不是无状态组件。

无状态组件基本上是有状态组件的render方法的快捷方式（没有相同的生命周期），并且应该“理想地”仅返回数据，不定义方法或实际操作或创建其他数据或功能。理想情况下，使用有状态组件，您不需要在render方法中定义方法，因此不应在无状态组件中添加任何方法。

通过在无状态组件内部但在render方法之外定义方法，函数或参数，你基本上是说在无状态组件中存在操作的可能性，这违背了目的。

请注意，它仍然是有效的代码...但只是没有“反应”理想。

Answer 2

N.B。这个答案假定使用“方法”这个词是不正确的，而且我们实际上是在讨论内部函数，如问题中提供的示例所示。

无状态组件被定义为返回可由React呈现的内容的函数：

const MyStatelessComponent = function (props) {
  // do whatever you want here

  return something; // something must be render-able by React
}

要（重新）渲染组件，React会调用该函数，因此提前执行昂贵的计算并将其结果保存在函数之外是有意义的。

在您的玩具示例中，函数bar在每次渲染时声明一次，并且仅使用一次。我们假设稍微更复杂，并传递一个参数：

const Foo = () => {
  let bar = text => {
    return <span>{text}</span>
  }
  return <div>{bar("lorem ipsum")}</div>
}

通过将bar移到组件外部，您不需要为每个渲染创建一次函数，只需调用已存在的函数：

const bar = text => {
  return <span>{text}</span>
}

const Foo = () => {     
  return <div>{bar("lorem ipsum")}</div>
}

现在你的组件的效率越来越高，因为每次调用它时工作量都会减少。

另请注意，bar现在几乎与无状态组件相同，并且可以通过使函数采用props对象而不是单个字符串参数轻松地转换为一个。

但最重要的是，你可以在无状态组件中做任何你想做的事情。值得注意的是，每次（重新）渲染都会发生一次。

Answer 3

函数Foo基本上是React组件的render方法。因此，每次需要渲染组件时都会调用它。通过在其中声明一个局部函数，每次组件重新渲染时它都会创建一个新函数，这很糟糕。要么在外部声明函数，要么实现有状态的组件。