React 初探

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

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

2 建立组件方式
(1)函数式定义的无状态组件
function HelloComponent(props, / context /) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, 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能够更好实现代码复用。

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

3、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和其余一些流行框架的性能比较。

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