React 初探

目前在前端开发领域，框架Angular、react和vue占据着主流的地位而且可能会持续比较长的一段时间。三门框架中，从数据绑定机制来看，vue和angular采用了双向数据绑定的MVVM模式，而react虚拟Dom没有双向数据绑定机制，需要通过API来实现input的双向场景。下面主要对react的一些特性和使用进行分析。
一、 一切都是组件

1 组件本质
React 的核心思想是：封装组件。各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。

2 创建组件方式
(1)函数式定义的无状态组件
function HelloComponent(props, / context /) { return

Hello {props.name}

} ReactDOM.render(, mountNode)
(2)es5原生方式React.createClass定义的组件
React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件。
(3)es6形式的extends React.Component定义的组件
React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于React.createClass可以更好实现代码复用。

二、react的生命周期
在react中触发render的四种方式为：
• 首次渲染Initial Render
• 调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
• 父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
• 调用this.forceUpdate

三、react虚拟Dom技术
1 传统的页面开发，或多或少会牵扯到dom操作，而进行dom操作时，就会有相应的各种优化策略来尽可能地减少页面重新布局和重绘的次数。
2 比如下面dom批量更新的优化就主要有三种：
1 使用documentFragment进行dom批量更新，然后一次性更新到document上
2 克隆你将要更新的node，在克隆的node上进行dom批量更新，然后克隆的node和原始的node进行交换
3 先隐藏将要更新的node,然后进行dom批量更新，最后重新显示隐藏的node
传统的这种手工的批量更新复杂且易错，而React的虚拟DOM技术让我们远离了这种复杂，我们无需再时刻考虑何时以及如何做DOM性能调优。

基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React会产生以下情况：触发相应组件render方法；重新构建新的虚拟DOM树；将当前新的虚拟DOM树和上一次的旧树进行对比；得到DOM结构的区别，计算出最小变化集，进行实际的浏览器DOM更新（批量更新）。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要因某个数据的变化而考虑如何更新到一个或多个具体的DOM元素，无需再写额外的代码来做性能优化，将之完全交给React类库来做，而我们只需要关心在相应数据状态下如何实现相应组件的render方法即可，使得开发简单。
那么使用了虚拟DOM技术的React性能到底如何呢，到底是徒有虚名还是货真价实呢，接下来我们来看看React和其他一些流行框架的性能比较。

四、React小结
1 ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2 可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3 为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4 组件名称首字母必须大写。
5 变量名用{}包裹，且不能加双引号。