React入门

React入门文章目录

---

---

前言

React是一个用于构建用户界面的JavaScript库,用来为现代的网络构建用户界面。

本次学习使用的React版本为18.1.0

"dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }

---

一、React的特点

• 虚拟DOM
• 声明式
• 基于组件
• 支持服务器渲染
• 快速、简单、易学

二、HelloReact

1.引入库

开发web项目，引入两个JS脚本

• react.js
  react.js是react核心库，只要使用react就必须引入
• react-dom.js
  用来管理Dom操作的库。开发web应用必备

2.创建React元素

React.createElement();
-用来创建React元素
-参数：
1.元素名
2.元素中的属性
3.元素的子元素（内容）
代码如下：

const div=React.createElement('div',{},'我是div');

3.获取根元素对应的React元素

ReactDOM.createRoot();
需要一个DOM元素作为参数

代码如下：

const root=ReactDOM.createRoot(document.getElementById('root');

4.渲染React元素到根元素

代码如下：

root.render(div);;

---

三、3个API

1.React.createElement()

• React.createElement(type,[props],[…children])
  参数：
  1.元素名称（html标签必须小写）
  2.标签属性
  设置事件时，属性名需要修改为驼峰命名法,
  3.标签内容
• 用来创建React元素
• React元素无法修改

2.ReactDOM.createRoot()

• ReactDOM.createRoot(container[,options])
• 用来创建React的跟容器，容器用来放置React元素

3.root.render()

• root.render(element)
• 当首次调用时，容器节点里的所有DOM元素都会被替换，后续的调用则会使用React的DOM差分算法(DOM diffing algorithm)进行高效更新。
• 不会修改容器节点（只会修改容器的子节点）。可以 在不覆盖现有子节点的情况下，将组件插入已有的DOM节点内。

总结