React中createLegacyRoot是什么？使用Context时出现legacy提示原因咨询

标记为legacy的核心原因 #

• 这个提示和你编写的Context代码没有任何关联，你的Context实现完全符合当前React的官方规范，功能运行正常是合理的。
• 触发标记的根源是你使用了React 17及之前的旧根渲染API ReactDOM.render()，React 18推出了全新的根节点创建API createRoot，旧的渲染方式在新版DevTools中会被统一识别为createLegacyRoot模式，这个标记是针对整个应用的根渲染模式，不是针对Context API本身。

关于Context API的更新说明 #

目前没有新的Context创建方式即将推出，React.createContext、useContext、static contextType、<Context.Consumer>你用到的这几种用法都是React官方当前及后续版本会长期维护的稳定API，不需要做任何调整。

消除提示的方法 #

如果你升级到React 18及以上版本，只需要修改入口处的根渲染代码即可：

// 旧写法（触发legacy标记）
import ReactDOM from 'react-dom'
ReactDOM.render(<ContextApp />, document.getElementById('root'))

// 新写法（消除legacy标记）
import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<ContextApp />)

你遇到的提示截图如下：

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