. React特性与简介
首先，React的官方定义是：用于构建用户界面的Javascipt组件
React的特点主要分为：声明式，组件化以及跨平台编写。
React是用JavaScript构建快速响应的大型web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。
影响web性能的主要原因是：等待资源加载时间、浏览器的单线程执行
2. React更新流程
Scheduler（调度器）：负责维护时间切片与浏览器任务调度。
Reconciler（协调器）：将JSX转化为Fiber，Fiber树对比来确定本次更新的Fiber
Renderer（渲染器）：用于管理React树，使其根据底层平台进行不同的调用。
用React开发web应用组件
数据：定义state操作视图，Mount时获取数据更新state，ref保存与视图无直接关系的值，unmount前清空ref
通信：props父子组件通信、context&redux组件信息共享
性能：函数使用useCallback值或者计算使用useMemo组件来提高性能
UI：数据决定视图，通过Ref获取到DOM
组件挂载位置的冒泡：
通过createPotral改变了组件的真实渲染位置，一个从Portal内部触发的事件会一直冒泡至包含React树的祖先，即使这些元素并不是DOM树中的祖先 JSX中使用js表达式
{name} 相当于vue里的 {{ }}
js表达式：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）
特点：有值或者说 能够计算出一个值。
验证是不是js表达式，看内容能不能作为方法的参数，console.log
规则：{} 必须放在标签内才生效
1.const name = xx {name}
2.对象的属性，{}对象不能被渲染
3.三元运算符
4.方法() // 需要返回一个值
5不能出现js语句，比如if、for、while等
组件生命周期方法
组件在进入和离开DOM时要经历一系列生命周期方法，下面是这些生命周期方法。
componentWillMount() 在渲染前调用,在客户端也在服务端，它只发生一次。
componentDidMount() 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps() 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate() 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
componentWillUpdate() 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate() 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnMount() 组件从 DOM 中移除的时候立刻被调用。
getDerivedStateFromError() 这个生命周期方法在ErrorBoundary类中使用。实际上，如果使用这个生命周期方法，任何类都会变成ErrorBoundary。这用于在组件树中出现错误时呈现回退UI，而不是在屏幕上显示一些奇怪的错误。
componentDidCatch() 这个生命周期方法在ErrorBoundary类中使用。实际上，如果使用这个生命周期方法，任何类都会变成ErrorBoundary。这用于在组件树中出现错误时记录错误。
