【React】React-18版本脚手架使用、React-17 与 React-18 入口与卸载区别

一. React-18版本脚手架使用

（1）首先：创建脚手架

npx create-react-app my-app

（2）其次：在index.js文件内 导入react 和 react-dom/client 以及 APP.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.js'

（3）然后使用 ReactDOM.createRoot获取 id为root  id名并定义 root名,然后 root.runder以标签形式导入 App.js

const root = ReactDOM.createRoot(document.querySelector(`#root`))
root.render(<App />)

（4）App.js文件内 声明函数 并 默认导出，然后打开页面就可以看到 “你好世界”

function App () {
  return <div>你好世界</div>
}

export default App

二. React-17 与 React-18 入口与卸载区别

入口和卸载 ReactDOM的引入不一样

 // React 17采用的  
  import ReactDOM from 'react-dom'
  
  
  ReactDom.render(<APP />,  rootNode)
  
  // React 18采用的是
  
  import ReactDOM from 'react-dom/client'
  
  ReactDOM.createRoot(rootNode).render(<App />)
  依然保留了legacy模式
  
  
  // 卸载组件
  React 17 
      ReactDOM.unmountComponentAtNode(root); 
  React 18 
      root.unmount();