为什么当前react的Index.js与以前的教程有区别?

Question

我是read.js新手，我目前正在学习REACT，目前我在index.js的教程中看到以下声明:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<Routes />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

但是从Visual Studio Code检查index.js，我有以下内容:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();

是什么导致了这种差异?它是否对应于以前的版本?以及如何回到以前的版本，因为目前出现的所有教程，都有index.js的第一个代码的编码

我特别指的是document.getElementById('root')的声明，它以不同的方式定位。

感谢您的关注，提前谢谢您。

Answer 1

reportwebvital是一个收集应用程序性能数据的函数。不是严格必需的，所以如果您想删除函数调用和导入，您可以这样做。对于其他新的导入，App.js应该保留，index.css只是一个新的样式表。您可以决定是使用它还是以另一种方式进行样式化。更多关于Web vital的信息:https://create-react-app.dev/docs/measuring-performance/