javascript - 我可以将 React 组件放入 state 中吗？

Question

如果允许以下三个选项中的任何一个，则找不到任何最近的官方信息？

constructor(props){

  this.state={

    item:<SomeItem/>,
    item1:()=><SomeItem/>,
    item2:SomeItem

  }

}

我找到了 this回答但它引用了网络存档中的一个旧链接，上面写着:

What Shouldn’t Go in State?...React components: Build them in render()based on underlying props and state.

但是那个链接没有说明为什么这是个坏主意，它是否会引入错误等。

Answer 1

这是一个很好的问题。

不建议将组件置于状态的原因只是因为它从根本上违背了 React 模型，即组件提供了一个 render 方法(这是一个纯函数)，React 引擎使用该方法来自动更新 DOM反射(reflect)组件的 Prop 和状态的值(value)。

该渲染的输出，即 React 元素，应该由 React 引擎直接使用。契约(Contract)是您的应用程序及其所有组件以一种纯粹的方式生成一堆元素，供 React 引擎管理。

通过在 render 中引入副作用，或将元素置于状态中，您实际上是在破坏“纯”契约，并且它可能会产生不可预测的结果，这可能会或可能不会被视为您的应用程序中的错误。错误的细节甚至可能随着不同版本的 React 和不同的引擎实现而改变。关键是你打破了 React 契约(Contract)，所以虽然它在某些情况下可能有效，但在其他情况下甚至在 React 本身发生变化的情况下也可能无效。无法保证行为。

React 有内置的方法来缓存基于 prop 值的渲染，比如 React.memo，引擎提供和理解，并且是契约的一部分。如果出于性能原因想要缓存渲染输出，可以采用这种方式。

确实，这正是 React API 提供此类功能而不是让您自己完成的原因。