React 18 createRoot方法:ReactDOM.render is no longer supported in React 18

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

自React 18开始,ReactDOM.render被废弃,使用React 18会以兼容模式运行旧代码,并且会有类似以下的警告:

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

使用createRoot

原来渲染方式:

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

使用createRoot后:

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

首先通过createRoot创建root对象,createRoot的参数是应用挂载的Element元素。接着调用root对象的render方法渲染。

index.js的变化

原来方式:

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

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

使用createRoot后:

import React from 'react';

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

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

版权声明:著作权归作者所有。

相关推荐

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

React Router 5.1.0使用useHistory做页面跳转导航

从React Router v5.1.0开始,新增了useHistory钩子(hook),如果是使用React >16.8.0,编写以下函数组件,使用useHistory即可实现编程时页面跳转导航。示例:import { useHistory } from "react-router-dom";function HomeButton() { const history = useHisto