1、react是啥
js库，构建用户界面
将获取到的数据渲染到页面（数据-虚拟dom-真实dom）
2、react特点（为啥要用react）
模块化（向外提供特定功能的js程序，一般就是一个js文件）、组件化编码（很多组件组成组件化），可复用，组件化应用，高效的diff算法，react native 编写原生应用
3、react高效原因
使用虚拟dom。不直接操作页面真实dom
dom diff算法，最小化页面重绘
4、虚拟dom本质
本质也是一般对象，虚拟dom对象比真实dom少了很多属性，虚拟dom是react内部在用，虚拟dom最终会被react转化为真实dom，呈现在页面上
5、react开发
react（核心插件库），react-dom（支持react操作dom），jsx（babel将jsx转化为js）
引入插件，容器，组件，虚拟dom交给react-dom渲染
jsx注意事项：
注意jsx是一种语法糖
jsx标签中混入js表达式时要用 {}，注意里面只能混入表达式，不可混入语句（表达式：会产生一个值，可以赋值；语句：不会产生值，例如 if（）{}，for（）{} switch（）{}）
样式类名用className
内联样式style={{key：vlue}}
只有一个根标签，标签要是闭合标签
标签小写字母开头，将转化为html中同名元素；标签大写字母开头，react则去渲染对应组件
6、react组件分类
函数式组件（适用于简单组件）---react解析组件标签，然后调用函数（函数的返回值是虚拟dom），将返回的虚拟dom转化为真实dom，渲染到页面
类似组件（适用于复杂组件）---
类----构造函数（可接参数props，里面有super）、render周期
类中构造器不是必须要写的，可以在需要初始化一些属性时写，如果有类继承，super要写上，类中方法供实例使用，类中直接写赋值语句，相当于给实例对象上添加一个属性
类中自定义方法用赋值语句加箭头函数，这样能保证函数中的this指向实例对象
备注：组件自定义方法中this可通过 .bind()改变this指向，或者通过赋值加箭头函数定义自定义方法，一般用后者。
7、组件3大核心属性
函数式组件默认只有props属性（但是可以通过hooks插件，保证函数组件也可以有state，refs，生命周期）
类式组件3大属性：state（状态），props（标签属性），refs（dom节点）
1、state（对象，初始化状态，数据驱动视图更新的数据需要初始化在state中） 注意更新数组对象等不要用push 等方法，要产生新对象，不然视图不会更新
2、props（对象，还可以限制属性的类型，必要性，默认值--借助prop-types插件，组件内不修改props，保证只读）
3、refs（this.refs.xx ，回调形式的ref， React,createRef(), ）
8、react中事件绑定
onClick
onBlur、onChange
。。。。
9、react中收集表单数据
onChange事件中更新数据，公共的回调，
callBack=（datatype,event）={
this.setState({ [datatype] : event.target.value})
}
10、函数
高阶函数 （符合二者之一）函数参数是函数、函数返回值是函数
函数的柯里化 函数调用继续返回函数，函数再调用再返回函数，实现多次接受参数最后统一处理的编码形式 sum（1）（2）（3）
11、组件的生命周期
1、 初始化阶段
constructor()
componentWillMount()
render()
componentDidMount() 组件初始化完成，已有真实dom在界面
2、组件更新阶段 组件内部setState调用或者父组件重新render
shouldComponentUpdate（） 组件是否需要更新 组件更新的闸门
componentWillUpdate（）
render（）
componentDidUpdate（）
3、卸载组件
componentWillUnmount（） 组件将要卸载
4、组件将要接收新的props钩子
componentWillReceiveProps（）
最常用
render（）
componentDidMount() 组件初始化完成，已有真实dom在界面
componentWillUnmount（） 组件将要卸载
12、虚拟dom中key作用
key是虚拟dom对象的标识，在更新显示时key起着极其重要作用（一般不用index作为key值，而是用id等唯一标识）
数据更新时：新虚拟dom和旧虚拟dom对比diff算法，如果有逆序添加添加，删除等顺序操作会产生不必要的更新或是界面错误
13、react脚手架开发
react提供了一个用于创建react项目的脚手架库 create-react-app
项目整体技术架构为：react+webpack+es6+eslint
使用脚手架特点：模块化 组件化 工程化
14、react单页面应用
一个html页面
public---静态资源文件
src---项目源码
入口文件 index,js
最外层组件 App.js(App.jsx)
备注：css可以用模块化css （index.module.css）---文件导出大对象，样式类挂在对象上
15、功能界面的组件化编码流程
1、拆分组件
2、实现静态组件
3、实现动态组件
获取数据（axios）
数据名称
数据保存在哪个组件
交互（事件绑定）
16、路由的基本使用
17、路由组件与一般组件
18、ui组件的按需引用以及主题定制（antd ---参考官网）
19、react-redux（组件数据共享---状态管理）
3大核心概念
actions 做什么（dispatch）异步actions （return 一个函数）
store 状态 （reducers的合并）
reducers 初始化状态+更新状态 （必须是纯函数）
容器组件 ui组件 redux
20、扩展知识
1、setState（xx，【bb】）第一个参数可以是对象也可以是函数，第二个参数是状态更新后的回调函数
2、lazyLoad 懒加载组件 用到了才会加载的组件
3、Hooks 可以让你在函数式组件中使用 state、 生命周期、ref
4、模板标签 渲染后不显示，可用来做根标签 Fragment，可以用key属性
5、context 用于祖组件与后代组件的通信
6、组件优化
PureComponent组件（重写了组件是否需要更新的生命周期）
7、render props------功能就是vue中的插槽
如何向组件标签里面传入带有内容的结构（标签/组件）
8、错误边界---用来捕获后代组件生命周期中产生错误时，渲染出备用页面
9、组件通信方式总结
组件关系
父子、兄弟、祖孙
扩展详情如下图
