前端UI的本质问题是如何将来源与服务端的动态数据和用户的交互行为高效地反映到复杂地用户界面上。
React概述.jpg
为什么使用React
React源自facebook, 通过使用虚拟DOM、状态、单向数据流,Fiber架构等设计理念，形成以组件为核心，用组件搭建UI的开发模式，完美地将数据、组件状态和UI映射到一起，极大地提高了开发大型Web应用地效率。
React与JQ的对比
React
React的开发模式.jpg
JQ
在前端开发对性能的要求中，就是尽可能地减少操作DOM。很明显，React利用Virtual DOM这一层，很好的隔离的事件与真实DOM。其次，利用Virtual DOM和DIFF算法，高效的选择更新DOM方式，也是提高性能的一个方式。
React的特点
- 声明式的视图层
采用JSX语法来声明视图层，利用数据的变化触发视图层的更新。 - 简单的更新流程
由于是声明式的试图定义方式，只需要定义UI状态，React便会负责把它渲染成最终的UI。当状态数据发生变化时，React也会根据最新的状态渲染处新的UI。UI = Render(data)。 - 灵活的渲染实现(一次学习，多端受用)
React并不是把视图直接渲染成最终的终端界面，而是先把它们渲染成虚拟DOM。虚拟DOM只是普通的JavaScript对象，可以结合其他依赖库把这个对象渲染成不同终端上的UI。例如，使用react-dom在浏览器上渲染，使用Node在服务器上渲染，使用React Native在手机上渲染。 - 高效的DOM操作
有了虚拟DOM的隔离，采用高效的DIFF算法。React尽量减少虚拟DOM到真实DOM的渲染次数，以及每次渲染需要改变的真实DOM节点数。 - 基于组件开发
在React开发中，组件为最小开发单元。根据“高内聚，低耦合”的软件设计原则，合理的将功能拆分成组件。
JSX
JSX是JavaScript的语法扩展(eXtension)，让我们在JavaScript中可以编写像HTML一样的代码。
在React 17之前，在使用JSX的代码文件中，即使代码中并没有直接使用React，也一定要导入这个React，这是因为JSX最终会被转译成依赖于React的表达式。
JSX看起来和HTML几乎一模一样，都可以使用<div><button></button>之类的元素，但是JSX中使用的“元素”不局限于HTML中的元素，可以是任何一个React组件。React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写。
组件
任何一个复杂的应用，都是由一个简单的应用发展而来的，当应用还很简单的时候，可能只有一个组件就足够了，但是随着功能的增加，把越来越多的功能放在一个组件中就会显得臃肿和难以管理。
所以在React开发中，会将一个复杂的APP分解成多个不同的组件进行开发，之后再组装到一起，一方面提高了代码的利用率，可以重复调用，另一方面也避免了代码的冗余。
组件都有自己管理数据的方式，React组件的数据分为两种:state和prop
无论是prop或者state的改变，都可能引发组件的重新渲染。prop是组件的对外接口，state是组件的内部状态。
组件也有自己的事件管理方式，在组件范围内，利用委托的形式，挂载到最顶点的DOM节点上。
组件的生命周期
React严格定义了组件的生命周期，生命周期可能会经历如下三个过程：
- 装载过程(Mount)
- 更新过程(Update)
- 卸载过程(Unmount)
在使用react组件时，每个组件都包含"生命周期方法",你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。
挂载阶段
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
更新阶段
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
卸载
componentWillUnmount()
错误处理
- static getDerivedStateFromError()
- componentDidCatch()
参考网址：生命周期路线图:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
React家族
- React
- React Router
- Redux
- React Native
- React Canvas
- React VR
