React 18 不再支持 ReactDOM.render

ReactDOM.render is no longer supported in React 18

出现错误“ReactDOM.render is no longer supported in React 18. Use createRoot instead”是因为该ReactDOM.render方法已被弃用。要解决该错误，请创建一个根元素并改用该ReactDOMClient.render
方法。

React 18 不再支持 Reactdom 渲染

下面是一个错误如何在index.jsReact v18 应用程序的文件中发生的示例。

索引.js


import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ⛔️ 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.
ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);

要解决该错误，请创建一个根元素并改用该ReactDOMClient.render
方法。

索引.js


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

import App from './App';

// 👇️ IMPORTANT: use correct ID of your root element
// this is the ID of the div in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

包的render()方法
react-dom被认为是遗留的起始react-dom版本 18。

该方法替换
为从导出的createRoot()react-dom/client方法。

该createRoot()方法将根元素作为参数并创建 React 根。

root 有一个render()方法可以用来将 React 元素渲染到 DOM 中。React 中的根是指向顶级数据结构的指针，React 使用该数据结构来跟踪要渲染的树。

在新的 API 中，我们创建一个根，然后调用render()它的方法。

如果您的应用程序在更新到 React 18 后无法运行，请检查它是否包装在<StrictMode>.
严格模式
在 React 18 中发生了变化，比以前的版本有更多的检查。

如果删除严格模式修复了您的应用程序，请在升级期间将其删除并在解决它指出的问题后将其添加回来（在顶部或应用程序的特定部分）。

如果在进行更改后仍然显示警告，请确保也更新您的
@testing-library/*版本。

壳


npm install --save-dev @testing-library/react@latest

npm install --save-dev @testing-library/jest-dom@latest

npm install --save-dev @testing-library/user-event@latest

现在您应该能够开始测试而不会出现错误。

应用程序测试.js


import {render, screen} from '@testing-library/react';
import App from './App';

test('renders react component', () => {
  render(<App />);
  const divElement = screen.getByText(/hello world/i);
  expect(divElement).toBeInTheDocument();
});

我们必须更新@testing-library/react包的版本，因为版本 13 添加了对 React 18 的支持。

在版本 13 中，React 测试库放弃了对 React 17 及更早版本的支持，并默认使用新的
createRoot API。

消除警告的另一种解决方案是将您的react和react-dom包的版本恢复到旧版本，例如17.0.2通过运行npm install react@17.0.2 react-dom@17.0.2，但不推荐这样做。

您可以在他们的Github 发布页面中阅读更多关于 React 18 的重大变化
，但您很可能不会受到重大变化的影响，并且您将通过更新到 React 18 来利用更好的性能。

ReactDOM.hydrate ()方法在 React.js 18 中也已弃用，并已替换为
hydrateRoot。

索引.js


import {hydrateRoot} from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');

// Create *and* render a root with hydration.
const root = hydrateRoot(rootElement, <App />);
// Unlike with createRoot, you don't need a separate root.render() call here

unmountComponentAtNode
()root.unmount()方法在 React 18
中被替换为。

索引.js


// Before
unmountComponentAtNode(container);

// After
root.unmount();

当在unmount()根元素上调用该方法时，它会从 DOM 中移除。

findDOMNode ()StrictMode方法在启动 React v 18.0.0时也已弃用。

您可以在此 GitHub 发布页面中阅读有关 React 18.0 中的更改的更多信息
。

您还可以查看官方的
如何升级到 React 18 指南。

结论

–