1.什么是React
- 一个快速构建前端视图的javascript库
2.虚拟DOM
- 真实dom：操作真实dom节点成本太大
- 什么是虚拟dom：使用js去描述真实dom节点
- 创建虚拟dom的方法
- 封装虚拟dom转换成真实dom的方法
3.JSX
1.是什么
a.jsx是xml和js的结合，可以更加直观影响的表示dom
b.不是合法的js语法，不借助“外力”是不能被浏览器识别的
c.需要使用babel来进行转码编译成浏览器能识别的js代码
2.写法
const app = <div id="app">hello</div
3.搭配环境安装依赖
a.@babel/core
b.@babel/cli
c.@babel/plugin-transform-react-jsx
4.运行转义：npx babel src -d dist
5.jsx语法特性：（使用{ }来区分xml还是js，遇到<>当成标签解析，遇到{ }当成js代码解析）
a. js表达式：花括号
b. 样式类名
1.class=className
2.For=htmlFor
3.内联样式（react推荐使用内联样式）
const app = <div id="app" style={fontSize:24}>app</div
c.数组：JSX允许在模板中插入数组，数组会自动展开所有成员
d.jsx不是合法的js语法，不能被js引擎解析（所以需要babel）
6.安装vscode插件
ES7 React/Redux/GraphQL/React-Native snippets 2.8.3
4.搭建React环境
1.安装依赖
a. react:react的核心代码
b. react-dom:处理真实dom的代码，比如把虚拟dom转成真实dom
c. webpack
d. webpack-cli
当使用jsx的时候
a. @babel/core babel-loader
b. @babel/plugin-transform-react-jsx
c. 配置babelrc
2.两个核心方法
a. react.createElement( 类似标签名，属性，子节点...） ：创建虚拟dom
b. reactDom.render(虚拟dom，挂载dom点，回调函数 ）
5.在react中使用jsx
1.类名 class=className
2. label的for属性 = htmlFor属性
3. 循环数组的时候，要加key属性
4. 标签的属性值如果为变量，不需要加引号，直接花括号包住变量即可
5. style和class的写法
<span className={styleList.join(' ')} style={{color:"red"}}>111</span>
6.使用脚手架快速搭建react的环境
1.全局安装脚手架
a. npm i create-react-app -g
b. 检测是否安装成功：在命令行里面输入create-react-app --version 如果能成功输出版本号，则安装成功
2. 使用步骤
a. 创建项目 ：create-react-app 项目名称
b. 释放：(目的是暴露出react的相关配置文件)：npm run eject
3. 目录结构的认识
a. 入口文件
7.react重要概念
1.组件
a.函数式组件：
i : 首先是个函数
ii：其次必须返回一个虚拟dom
b.类组件：语法糖
i : 引入component
ii : 按照类的方式创建并继承Component
iii : render函数必须有，并且必须返回虚拟dom
8.组件实例
1. this指向问题
a. 类组件内部的this，指向的就是当前组件，当前实例
2. 组件实例是独立且不相同
3. 组件实例上挂载了组件相关的属性和方法
4. 绑定事件
9.组件内部状态
1. State
a.初始化状态
state={ list: [1,2,3] }
b. 获取状态：this.state
{this.state.list.map((item,key)=> <div key={key}>{item}</div>)}
c. 修改状态 ：setState方法（异步）
1.不要直接修改state：this.state.name="123"
2. 使用setState方法修改state：更新原理是合并对象 this.setState的第二个参数，dom更新结束之后执行
10.父子通信
1.父=>子通信 ：父组件给子组件传递属性（属性的值可以是函数，数据）
a. props:父组件给子组件的属性 ： props不能被修改
b. 父组件传
<Title name={"hello"}></Title>
类组件接受
{this.props.name}
函数式组件接受：参数要从形参中去取
function List（props）
2. 子=>父通信 ： 子组件触发父组件传递过来的函数
父组件传递函数
<Fu setFun={()=> this.function()} ></Fu>
子组件接受传过来的函数
<div onClick={()=>this.props.setFun()}></div>
11.组件的子元素
1.是什么：写在标签中间的内容
<List>子元素</List>
2.如何获取：在组件中 this.props.children
12.跨级传参
1.上级给下级传
a. createContext: 执行会返回两个虚拟dom
1.Provider：提供数据
2.Consumer：接收数据
