React:Facebook的开源框架
React的特点：
JSX语法(JavaScript XML)语法React可以让我们用JS的语法书写HTML
虚拟DOM（Virtual DOM） 虚拟DOM：顾名思义不是真正的DOM结构，他不需要浏览器DOM API的支持 ，其实就是一个JS对象，该对象其实是在真实的DOM基础上建立的一个抽象层，用来反应真是的DOM结构，当页面数据发生变化的时候，React会通过diff算法比较出删一次虚拟DOM中的不同，仅仅将变化同步到真实的DOM中，提高浏览器的效率 3.组件化操作 4.操作灵活（React推崇 all in JS）
浏览器的渲染机制：
DOM树：浏览器会将HTML代码解析成DOM树
CSS规则树：浏览器会将CSS代码解析成CSS规则树
Render树：将DOM树和CSS规则树合并成Render树
规则（layout）：对Render树的各个节点进行布局，计算大小，位置等
绘制(paint)：根据计算出的规则，通过显示将内容绘制到屏幕上（最浪费效率的） 其中4和5是最耗时的 6.重绘（reapint）:只改变页面元素的颜色，字体样式，只要不影响布局，但是影响风格，浏览都会进行重绘
React和Vue的比较：
数据是不可变的（immutable），数据流是单向的，如果想要修改react的数据，需要人为的触发更新数据的代码（setstate）才能让react重新渲染视图
通过JS来操作一切
class组件/函数组件的写法
react很多东西都交给社区去做，而vue很多功能都是内置的 React的路由（react-router-dom),状态管理（redux)
React的使用：
使用react创建元素（虚拟DOM），将其插入到app中 语法格式：
React.createElement();
参数1：节点名参数2：节点的属性参数3：节点的内容返回值：新建的DOM节点（虚拟DOM）
例如：我想添加一个有一个标签h2 设置id为title 标签的内容是hello react 步骤：
引入三个js
设置根标签：
写js部分：
letapp = document.getElementById("app");letnewH2 =React.createElement("h2",{id:"title",className:"c1"},"Hello react");ReactDOM.render(newH2,app);
如果是jsx语法写标签渲染的话：
//JSX语法需要在script中写type="text/babel"letelement1 =
这是标题标签百度一下
; ReactDOM.render(element1,app);JSX语法
JSX语法的注意点：
JSX语法结构可以被包裹在小括号里，小括号里也可以不谢
JSX里的注释比较特殊（是一种新的形式）{/**/}
在JSX里可以通过{}嵌入表达式或者变量
如果JSX里的标签是单标签，注意啦，最后一定要以/结尾，不然会报错
JSX结构有且只有一个根标签
React中列表的渲染： 建议使用map方法进行遍历数组以及返回想要渲染的jsx标签 react要求，列表渲染的时候需要设置key属性给标签做唯一标识，建议以后使用的数据集合中的某个兑现给的唯一值作为key（数字和字符串均可以） 栗子：
letcityArray = ["郑州","杭州","广州","兰州","福州","鄂州","深圳"];ReactDom.render({
-
{ cityAarray.map((v,i)=>{ return
- 数组中的第{i+1}个城市是{v} }) }
设置css样式
第一种： 通过class给标签设置样式 提前写好class样式 在标签渲染的时候给标签设置className=""
ReactDOM.render(
第二种： 通过style属性的方法设置样式 注意：在jsx语法中，给标签通过style设置样式，需要注意的style的值不再是一个字符串，而是一个对象，且必须在react编译环境中
letstyleObj = { backgroundColor:"red",font-size:"22px",height:"100px", textAlign:"center",}ReactDOM.render({
-
列表1 列表2
React组件
组件就是将整个UI拆分成可以复用的代码片段，并且对每个片段进行独立构思
React中的组件，从概念上来讲更像是js中的函数，其接收任意的参数（即"prop"）,并返回用于描述UI界面的React
React中创建组件的两种方式：
函数式组件（写法简单，但是不通用，没办法写生命周期，想要更完整需要使用react-hook语法）
class式组件（通用） 栗子：
函数式组件：
functionWelcome(props){ return
welcome {props.name}
}functionHello(props){ return你好,{props.name}{props.age}
{ props.array.map((v,i)=>{ return
- 数组中第{i+1}个城市是{v}
})}
} ReactDOM.render(
class式组件
class 本类名 extends 父类名{ 属性--constructor--不需要手动调用--创建对象 方法--就是普通的自定义方法methods } 一般写法 class 组件名 extends React.Component{
} 也可以以下写法：
let {Component} =React;classChild1extendsComponent{ render() {return(
- {this.props.name}
- {this.props.age}
- {this.props.sex}