ReactDOM.createRoot

ReactDOM.createRoot是React框架中的一个API，用于创建一个独立的根节点（Root）。它是React 16版本中引入的新特性，用于替代之前的ReactDOM.render方法。通过使用createRoot，可以在应用中创建多个独立的根节点。每个根节点代表一个独立的React应用实例，它们可以独立地更新和渲染。使用方法如下： ```javascript import ReactDOM from 'react-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); ``` 在上面的例子中，我们首先使用createRoot方法创建了一个根节点，并将其绑定到HTML页面中的一个DOM元素上（通过getElementById获取）。然后，我们调用root的render方法，将要渲染的组件（这里是App组件）传递进去。与之前的ReactDOM.render方法相比，createRoot提供了更好的性能和并发渲染能力。它是React异步渲染模式的基础，可以更好地处理大型应用和复杂UI场景。

ReactDOM.createRoot().render()作用

ReactDOM.createRoot().render()的作用是渲染一个React根组件，类似于ReactDOM.render()方法，但是在高版本的React中，官方建议使用ReactDOM.createRoot()方法创建与挂载根组件。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  </head> <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <body> <div id="root"></div> <script type="text/babel"> class App extends React.Component { constructor() { super(); this.state = { counter: 0 } } render() { const { counter } = this.state; return ( <div> <h2>当前计数:{counter}</h2> <button onClick={this.add.bind(this)} > +</button > <button onClick={this.sub.bind(this)} > -</button > </div > ) } add() { this.setState({ counter: this.state.counter++ }) } sub() { this.setState({ counter: this.state.counter-- }) } } const root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<App />) </script> </body> </html>点击无效

这段代码是一个使用 React 和 Babel 的计数器组件，但是点击按钮无效的原因可能是因为代码中使用了后缀为 .development.js 的 React 和 ReactDOM 库，而应该使用后缀为 .production.min.js 的库，另外一种可能是因为代码中的 setState 操作不正确，应该使用 setState((prevState) => ({ counter: prevState.counter + 1 })) 和 setState((prevState) => ({ counter: prevState.counter - 1 })) 来更新 state。

阅读全文

ReactDOM.createRoot().render()作用

相关推荐

react-router-dom-demo

React-Router Demo

reactor宝典.doc

react用charts报 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

ReactDOM.render()方法在1.8之后不推荐使用，那用什么代替

React_code_structure：React项目模板....很有趣

react-dom.min@16.14.0.zip

三. React组件化2 1.使用antd 2.设计并实现表单控件

react-apps:由create-reacte-app工具创建的React App

create-react-app-material-ui:使用Material-UI表单轻松创建React App提交示例

前端框架概述：Vue.js vs React.js

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

react-dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.

react中createroot如何使用，请给我举2个例子

const Container: React.FC<{}> = () => { return ( <> <HashRouter> <Routes> <Route path="/" element={ <Suspense fallback={}> <Entry /> </Suspense> } /> <Route path="*" element={} /> </Routes> </HashRouter> <Toaster /> </> ); }; createRoot(document.getElementById("root")).render(<Container />);

create react app 如何渲染react组件

基于python的垃圾分类系统资料齐全+详细文档.zip

最新推荐

基于python的垃圾分类系统资料齐全+详细文档.zip

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

"互动学习：行动中的多样性与论文攻读经历"

Fluent UDF进阶秘籍：解锁高级功能与优化技巧

在Vue项目中，如何利用Vuex进行高效的状态管理，并简要比较React中Redux或MobX的状态管理模式？

WStage平台：无线传感器网络阶段数据交互技术