为何React允许将React元素（JS对象）作为组件子元素？此操作不应报错吗？

开发者阿泽

2026-5-13

首先，你对React.createElement返回对象的理解完全正确——它就是React虚拟DOM（Virtual DOM）的节点，用来描述对应DOM元素的类型、属性、子元素等信息，React会根据这些对象构建和更新真实DOM。

至于为什么React允许将预创建的React元素存在state里并直接渲染，而不是报错，主要有这几个原因：

灵活性与向后兼容：React的设计哲学是尽可能赋予开发者自由度，早期版本就支持这种用法，为了不破坏大量已有的代码库，官方不会直接禁止或报错。框架的目标是支持多种场景，而非限制死写法。
存在少数合理的边缘场景：虽然这种做法不常见，但某些场景下确实有用：
- 缓存完全静态的元素：如果某个元素的内容永远不会变化，提前创建好并复用可以避免每次render都重新生成虚拟DOM节点，带来微小的性能提升。
- 动态组合外部传入的元素：比如某些组件库可能允许用户传入已创建的元素数组作为组件内容，这种场景下直接渲染预创建元素是合理的。
React的diff算法可以处理：即使你这么做了，React的调和（reconciliation）机制依然能识别这些虚拟DOM节点，不会直接崩溃——只是会带来你遇到的问题：元素是创建时的不可变快照，后续状态更新不会同步到这些已创建的元素上。

不过你说得对，这种做法确实非常不推荐，核心问题在于：
预创建的React元素会捕获创建时的props快照，之后不管state怎么变化，这些元素都不会重新渲染。就像你例子里的情况：点击"Increase count"后，之前添加的<div>I am a thing. count is: X</div>里的count永远是当时添加的值，只有新添加的元素才会用最新的count，导致UI和状态不一致。

最佳实践永远是在state里存储数据，而不是React元素，然后在render阶段根据数据动态生成元素。比如把你的代码改成这样：

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = { things: [], count: 0 }
  }
  updateForm(obj, cb) {
    this.setState(obj, cb);
  }
  render() {
    return (<> {this.props.render({ updateForm: this.updateForm.bind(this), ...this.state })} </>)
  }
}
const makeThing = props => <div> I am a thing. count is: {props.count} </div>
const App = () => <Form render={ props => (
  <div>
    {/* 每次render时，根据things的数量重新生成元素，确保用最新的count */}
    {props.things.map((_, idx) => <makeThing key={idx} count={props.count} />)}
    <button onClick={() => props.updateForm({things: [...props.things, {}]})}>Add thing</button>
    <button onClick={() => props.updateForm({count: props.count + 1})}>Increase count</button>
  </div>
)} />

这样每次state更新触发render时，都会用最新的count生成所有的makeThing元素，UI就能和状态保持一致了。

内容的提问来源于stack exchange，提问作者Zach Smith