React总结 简讲Diff算法

做微信前端开发做了一段时间了，对一直使用的React做一个总结

React   的优点我主要体会在更新Dom和响应时间上。 类似一个“状态机“，UI组件化，单项数据流（方便打理，自上而下的渲染方式）

React 的diff算法，利用虚拟Dom实现了非常好的渲染系统。利用setstate等一些渲染函数。读入当前状态，将其转化目标页面的一个虚拟表现。然后利用diff算法

计算虚拟页面和真实Dom的差异，然后对这些差异进行最少的更新。

React的主要的优势就是在最小重绘了Dom操作，避免不必要的更新。

React发源自Facebook的PHP框架XHP的一个分支，Xhp在每次有请求进来的时候都渲染整个界面。React的产生就是把重新渲染整个界面的PHP的工作方式带到客户端应用来。

Diff算法（虚拟DOM）   

一个Web页面可以看做是一个DOM树，每一个节点位置的改变，就会导致整颗树的改变，React里面有虚拟DOM，一个被修改后的DOM树。每次渲染就是虚拟DOM和真是DOM树通过Diff算法进行重新渲染。Diff的算法复杂度为O（n）

Diff算法之所以为O（n）是从高层往底层进行查找。   很简单，也有区分。 
1.只比较同层，如果一层的DOM类型都不同，直接把不同的DOM节点给删去，然后替换上虚拟DOM上被修改的DOM节点。  新增加的DOM节点的子节点就不用查看了。
2.如果类型相同属性不同，进行属性的替换。
3.如果在列表的子节点，比如一个table里面的子组件，在使用过程中大家应该遇到过，如果没有给子节点附上独一无二的key值那么会进行提示。  只是在列表当中diff可以利用键值对使用插入的方式进行替换。不然类似冒泡排序一个个的替换节点。  如果表中元素没有独一无二的key,那么就会进行提示。当时并没有影响，但是可能在替换的时候发生问题。

React就类似一个View，组件化（向web componet 看齐），多端同构。

UI由无数的组件嵌套而成，它们存在层级关系。所有有父组件子组件。顶层组件的概念。

View设置好，就必须有数据了。

整体的View划分好后，通过setState，state，给一些值进行定义。自父组件往子组件传值直接用props

子组件向父组件传参数就比较麻烦了。当然我们可以通过函数传参解决这个问题。

http://blog.csdn.net/qq_26878975/article/details/62052234

DataFlow（单项数据流动）

React是一个视图库，但是web没有数据，那就没什么用，首先在顶层组件获取到数据，通过Ajax或者Fetch来进行获取数据。 然后通过props传给每一层的子组件。然后一层层的传递下去。最后每个子组件都得到自己渲染所需要的数据，从而完成UI的渲染。（通过函数参数进行子向父传参）

React的生命周期

在渲染过程中，React会频繁的创建或者销毁组件。React为每个组件提供了生命周期钩子函数去响应不同的时刻，创建，存在和销毁。

创建时刻

Consructor（props）{

super（）；  //调用弗雷构造器

//设置实例的属性以及组建的特性

}

componentwillMount  首次渲染前被调用。 没有什么用。  

render    创建一个虚拟Dom，表示组建的输出。

只能通过props，state访问数据。  可以返回null，false或者react任意组件，必须都是修饰Dom，在其中不能改变组件的状态或者修改Dom的输出，只能有一个组合组件。

componentDidMount

在render方法成功调用并且真实的Dom已经被渲染之后。这就是可以访问原始Dom的生命周期的钩子函数（react运行在服务端时，该方法不会被调用）

在组件已经渲染好，并且用户预期交互，用户改变组件里面的数据有新的state流入组件树。

componentwillreceiveprops

react是单向流可以改变父辈子类同时都改变，用componentwillreceiveprops方法会被调用，我们也能更改props对象及更新state的机会。

shouldComponentupdate（优化的时候可以考虑）首次渲染期间或者调用forceUpdate方法后，这个方法不会被调用。

精确优化，在确认某个组件或者它任何子件不需要渲染新的props或者state，该方法返回false。

componentWillUpdate

组件会在接受到新的props和state进行渲染前调用该方法。

销毁期

react使用完一个组件，这个组件就必须从Dom中卸载随后被销毁。此时仅有的一个钩子函数做出响应，完成所有的清理和销毁工作。

componentwillunmount

函数在组建消亡前被调用，做一些清理工作，在componentDidmount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或者添加的事件监听器。

JSX与react

jsx写起来可读性更高，也更容易调试。React的一个特点是创建一个个独立的组件。同时JSX以干净简洁的方式，保证了组件中的标签和业务逻辑相分离，以此来实现一个清晰直观的方式来描述组件树。

jsx和HTML的区别

属性：HTML用内联的方式给每个节点设置属性。

条件判断，jsx可以使用三目运算符，设置变量在属性中引用，把逻辑放到函数在引用，使用&&运算符

非dom属性： key dom的渲染，是通过节点来的。   ref：数据一般是单向流，这个父组件对子组件的的一个引用

样式：内联样式，React内联模式都是驼峰写法

var style = {

}

React。renderComponent（<div style={styles}>）;

如果不用jsx。     定义组件类 2.定义一个组件类产生实例的工厂。 3.。使用工厂来创建ReactElement实例