React：为什么将组件存入useState时会自动调用React.createElement？

问题1：该行为是特性而非Bug #

这一表现是React的标准设计，核心原因是useState返回的状态更新函数（示例中的setComponent）支持函数式更新逻辑：

• 当你给更新函数传入普通值时，React会直接用该值覆盖旧状态
• 当你给更新函数传入函数类型参数时，React会自动执行这个函数，传入当前最新的旧状态作为参数，将函数的返回值作为新状态存储

你示例中的Test本身就是函数类型，调用setComponent(Test)时，React会将其判定为更新函数执行，最终存入component状态的是Test()返回的JSX元素，而不是Test函数本身。直接写{Test}时，JSX不会渲染函数类型的值，因此两个div的表现自然不同。

问题2：不建议依赖该行为做业务实现 #

函数式更新本身是React公开的稳定API，后续版本不会修改这一逻辑，但你当前的用法属于对该特性的误用，不建议依赖：

• 如果你确实需要把组件函数本身存在state中，应该主动规避自动执行逻辑，将setComponent(Test)修改为setComponent(() => Test)，此时外层箭头函数会被当作更新函数执行，返回的Test函数会被存入state
• 直接依赖“传入组件函数到更新函数会自动执行”的写法可读性极差，其他维护者很难理解你的设计意图，非常容易产生线上bug

// 正确存储组件函数到state的写法
<button onClick={() => setComponent(() => Test)}>Set the state</button>

// 渲染时需要先把组件赋值给首字母大写的变量，符合React组件命名规范
<div>
  {component && {
    const Comp = component;
    return <Comp />;
  }}
</div>

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