React18文档里的一个坑

2023-09-21 22:30:50

React 18引入了许多新特性，其中一项重大变化涉及渲染方法的更新。当从旧版本升级到React 18时，开发者可能会遇到一个常见的警告提示：需要使用createRoot而不是ReactDOM.render来创建应用。

解决警告问题：从render切换到createRoot

在React 18中，推荐的方法是使用createRoot来替代旧的ReactDOM.render。这样不仅可以避免报警，还能确保应用能充分利用新的特性如并发模式。

步骤一: 首先，在项目中安装或更新至React和ReactDOM至最新版本。

npm install react@latest react-dom@latest

步骤二: 修改旧的渲染方式。假设原来的代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

将其修改为使用createRoot的方式：

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

确保在StrictMode模式下运行应用

为了确保代码符合最佳实践，建议在开发环境中使用React的StrictMode。这可以帮助开发者识别潜在问题，并遵循良好的编程习惯。

步骤三: 在应用入口文件中添加<React.StrictMode>包裹组件：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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