【学习笔记】前端学习-React18-第二章 页面元素渲染与组件

二 页面元素渲染与组件

2.1 元素渲染

打开项目文件中src/main.jsx

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

元素的渲染是

通过ReactDOM.createRoot()创建一个Dom容器可以看出参数是document的Element，当然这里你不一定非要用id作为Element获取方式，也可以用class，只要获取到的是唯一一个document的Element节点即可，这样就创建了一个react的根容器，所有的react应用都将挂载在这个容器中。接下来用render将ReactNode节点渲染到已经创建好的react的根容器中。

React.StrictMode组件：

标识所有渲染组件将在React 的严格模式下进行渲染，关于严格模式可参考文章:

React中StrictMode严格模式

<App / > 表示调用的子组件

2.2 组件

在正式学习组件前请了解Jsx（在TypeScript预法下为tsx），指导文章为菜鸟教程:

菜鸟教程-React JSX

组件是构成React应用的最基本单元，体现了React的模块化特性。

2.2.1 组件类型

React对于组件的编写分为函数组件和类组件两种，在React 16.8之前被称为无状态组件和有状态组件，在React 16.8 后增加了Hooks,使得在不编写类组件也能使组件应用到状态（state）的特性，从此组件可以应开发者喜欢而随意挑选编写方式，函数式组件不在为了展示页面而写，也可像类组件一样进行更多的业务逻辑。

2.2.1.1 编写函数组件

打开我们创建的src/App.jsx,这就是一个标准的函数式组件。

import './App.css';

function App() {

  return (
    <>
      <div>
            Mark·虎
      </div>
    </>
  )
}

export default App;

组件名称为App，返回了一个ReactNode，最后在用export default导出组件。这是符合es6模块化的语法规范。

2.2.1.2 编写类组件

修改下src/App.jsx

import './App.css';
import React from "react";

class App extends React.Component {
    render() {
        return <>
            <div>
                Mark·虎
            </div>
        </>
    }
}

export default App;

这里我们写了一个App的类他继承React.Component，必须包含一个render()的方法返回一个ReactNode，最后export 导出类。