创建新的react项目，控制台警报：Deprecation notice: ReactDOM.render is no longer supported in React 18

今天搭建新的 react 项目，控制台警报：Deprecation notice: ReactDOM.render is no longer supported in React 18

问题

复现步骤，通过 npx create-react-app my-app 创建新的应用

运行项目，控制台报警 🚔

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

原因

react18 针对旧的 api 进行了调整，render 方法后面不会用。需要使用新的 api createRoot。

除了 render 方法，还有一些全局方法也做了变更。

准备废弃的 API

react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.

解决

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果使用 ts 来写的，可以这样

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/reactdom-render-is-no-longer-supported-in-react-18

问题​

原因​

准备废弃的 API​

解决​

问题

原因

准备废弃的 API

解决