能否在不同渲染和上下文场景中复用同一个React元素实例？

结论 #

纯静态、无任何状态/上下文/hooks依赖的场景下，你这种写法完全可以正常运行，不会出现功能问题，但不符合React最佳实践，不推荐在生产项目中大规模使用。

具体原理说明 #

• 你写的const Foo = <div><h1>Hello world!</h1></div>本质是提前执行了一次React.createElement生成了一个静态React元素对象，这个对象本身是不可变的，你在任意组件、任意渲染次数里复用它，React只会读取它的结构描述来生成对应的DOM节点，不会修改对象本身，不同位置渲染的实例完全独立，不存在冲突。
• 你测试发现常量节点内嵌套的带hooks的子组件能正常调用hooks是合理的：常量只是保存了子组件的元素描述，渲染时React会正常实例化子组件，走完整的组件渲染流程，hooks自然会按规则执行，不会出现异常。

不推荐这种写法的原因 #

1. 扩展性极差：后续如果需要给这个节点加props、状态、上下文依赖，必须全部重构为函数组件写法，改动成本很高。
2. 可读性差：常规React开发习惯里，{Foo}的写法会让其他开发者默认认为Foo是一个状态变量，而非固定的UI片段，增加了理解成本。
3. 容易隐含bug：如果定义常量时不小心依赖了顶层可变变量，UI会出现不符合预期的变更，且很难排查问题根因。

特殊踩坑提醒 #

不要在定义这个常量的顶层作用域直接调用hooks，比如下面的写法直接违反React hooks规则，会直接报错：

// 错误示例：hooks只能在组件函数/自定义hooks内部调用
const [count, setCount] = useState(0)
const Foo = <div>{count}</div>

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