笔者最近接手了一个项目，其为前后端分离，前端使用React，后端使用Java，因本人之前从未使用过React，故决定学习一些关于React的基础知识，以备后续使用。如有谬误，欢迎指正。
1.1 React简介
React把用户界面抽象成一个组件，通过这个抽象，把代码和真实渲染目标隔离开。
1.1.1 专注视图层
React并不是完整的MVC/MVVM框架，它专注于提供清晰、简洁的View层解决方案。而又与模板引擎不同，React不仅专注于解决View层的问题，又是一个包括View和Controller的库。
1.1.2 View DOM
1.1.3 函数式编程
React能重复利用很多函数式方法来减少冗余代码。
1.2 JSX语法
1.2.1 JSX的由来
JSX直接将HTML语法直接加入到JS代码中，再通过翻译器转换成纯JS，不会带来任何的副作用，反而会让代码更加直观并易于维护。例如：
1.2.2 JSX基本语法
JSX的官方定义是类XML语法的ECMAScript扩展。
1.XML基本语法
JS中的最外层标签只允许有一个。
标签一定要闭合。
2.元素类型
HMTL标签首字母为小写的是DOM元素，大写的是组件元素。
3.元素属性
在JSX中，DOM元素的属性都是标准规范属性，但class和for例外，因为在JS中它们是关键词。需把class改为ClassName，for改为htmlFor。而组件属性完全是自定义的属性，也可以理解为实现组件所需要的参数。
4.JS属性表达式
属性值要使用表达式，只要用{}替换""即可。
5.HTML转义
React会将所有要显示到的字符串转义，防止XSS。
1.3 React组件
1.3.1 React组件的构建
React组件的组成如下图所示：
React组件的构建方法：React.createClass、ES6 Classes和无状态函数。
1.4 React数据流
在React中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。
1.4.1 state
常见的MVC框架也非常容易实现交互界面的状态管理，它们将view与状态交互的界面解耦，一般将状态放在Model中管理。但在React没有结合Flux或Redux框架前，它自身也同样可以管理组件的内部状态。在React中，把这类状态统一称为state。
1.4.2 props
它是properties的缩写，props是组件间互相联系的一种机制，通俗得说就像方法的参数一样。
1.5 React生命周期
React组件的生命周期根据广义定义描述，可以分为挂载、渲染和卸载这几个阶段。
1.5.1 挂载或卸载过程
组件挂载是最基本的过程，这个过程主要做组件状态的初始化。
组件卸载非常简单，只有componentWillUnmount这一个卸载前状态。
1.5.2 数据更新过程
更新过程是指父组件向下传递props或组件自身执行setStates方法时发生的一系列更新动作。
1.5.3 整体流程
1.6 React与DOM
React已将涉及DOM操作的部分剥离，目的是为了抽象React，同时适用于Web端和移动端。ReactDOM的关注点在DOM上，因此只适合Web端。
1.6.1 ReactDOM
API非常少，只有findDOMNode、unmountComponentAtNode和render。
1.6.2 ReactDOM的不稳定方法
有两个不稳定方法，unstable_renderSubtreeIntoContainer和unstable_batchedUpdates。
1.6.3 refs
它是react组件中非常特殊的prop，可以附加到任何一个组件上。组件被调用时会新建一个该组件的实例，而refs就会指向这个实例。
1.6.4 React之外的DOM操作
React的声明式渲染机制把复杂的DOM操作抽象为简单state或props的操作，因此避免了很多直接的DOM操作。但还有一些尚无法避免。