一、react作用
react作用:替代DOM,用于敏捷开发,快速搭建前端web项目
二、react特点
- 虚拟DOM
- 声明式
React可以
轻松创建交互式用户界面
。为应用程序中的每个状态设计简单的视图。当数据更改时React将高效地更新和正确的渲染组件
声明式视图可以使代码更具可预测性,更易于调试 - 基于组件
创建好拥有各自state的组件,再将其组合构成更复杂的UI界面。
由于组件逻辑是用 JavaScript 而不是模板编写的,因此可以通过应用程序轻松传递丰富的数据,并将 state(状态) 保留在DOM之外。 - 支持服务器端渲染
- 快速、简单、易学
三、3个API
React.createElement
- React.createElement(type,[props],[…children])
- 作用:创建React元素
- React元素无法修改
ReactDOM.createRoot()
- createRoot(container[,options])
- 作用:创建React的根容器
root.render()
- root.render(element)
- 当首次调用时,容器节点里的所有DOM元素都会被替换,后续的调用则会使用React的DOM差分算法(DOM diffing algorithm)进行高效刷新
- 不会修改容器节点(只会修改容器的子节点)。可以在不覆盖现有的子节点的情况下将组件插入已有的DOM节点中。
四、JSX简介
非字符串,也非HTML。可以理解为JS的拓展
- 在React中可以通过JSX来创建React元素,JSX需要被翻译成JS代码才能被React来执行
- 在React中若要使用JSX,必须引入babel来完成“翻译”
JSX就是React.createElement()的语法糖
在JSX执行之前都会被Babel转换为JS
JSX的注意事项
- JSX不是字符串,不需要加引号
- JSX中HTML标签应该小写,React组件应该大写开头
- JSX中有且只有一个根标签
- JSX标签必须正确结束(自结束标签必须写/)
- 在JSX中可以使用{}嵌入表达式
- 如果{}中的值为NaN,undefined,布尔值,将不会显示(这些值通常是用于进行判断)
- 在JSX中,属性可以直接在标签中设置
注意
- class需要使用className代替
- style中必须使用对象设置
style={{ background:‘red’}}
五、虚拟dom
在React中我们操作的元素被称为React元素,并不是真的原生DOM元素
React通过虚拟DOM将React元素和原生DOM进行映射,虽然操作的是React元素,但是这些操作最终都会在真实的DOM元素中进行体现
虚拟DOM的优点:
- 降低API复杂度
- 解决兼容问题
- 提升性能(减少DOM的不必要操作)
虚拟dom核心:diff算法