react在浏览器中的工做原理

前言:

react提供了的高度抽象,  在大多数状况下, 你能够任意地操做DOM. 但有的时候, 使用已经存在的API或者第三方库可让你的操做变得更方便.

 

使用react的时候, 咱们没有直接写DOM节点, 而是使用的虚拟节点.可是最后咱们看到的又是用一个个的DOM节点渲染出来的页面,.

按照常理来讲, 要将一个虚拟节点转换为一个在网页中能正常显示的节点, 须要必定的时间转化, 这样应该耗时会更长,在这一点上, react如何保证它能高效地渲染页面呢?

这其实就是react设计巧妙的地方, react响应很是快是由于它不直接与DOM进行比较, 对DOM的描述一直存放于内存中. 使用render方法其实就是返回一个对DOM的描述, react能在内存中对这个描述进行比较, 而后以最快的时间从新更新浏览器.

 

为了和浏览器中的内容进行交互,  想要找到一个DOM节点, 你能够给任何位置加上一个ref属性. 我想详细了解ref.

 

组件的生命周期:

1. Mounting, 加载
2. Updating, 更新
3. Unmountion, 卸载

为了细化生命周期的执行过程, react又提供了will, did两种方法, will这个是在生命周期开始以前调用, did是在生命周期已经执行了后调用.

对生命周期细分:

Mounting 加载又细分为:

1. getInitialState(),   这一步会在组件加载以前调用, 它的做用是返回一个state数据.
2. componentWillMount(),  组件被加载以前执行.
3. componentDidMount(),  组件已经被加载后调用.

updating又细分为:

1. componentWillReceiveProps(object nextProps), 这个是在被加载的组件接受到一个新的Props时调用, 这个方法能够用来比较this.props和nextProps的值, 以此来肯定是否要使用this.setState()方法.
2. shouldComponentUpdate(object nextProps, object nextState), 这个方法返回一个boolean值, 用来肯定组件是否要更新. 经过比较this.props和nextProps, this.state和nextState, 若是返回为true, 则从新渲染页面, 若是返回为false, 则不会从新渲染页面.
3. componentWillUpdate(object nextProps, object nextState), 这个方法在组件要更新以前调用.
4. componentDidUpate(object prevProps, object prevState), 方法在组件更新后调用.

Unmounting:

1. componentWillUnmount(), 这个在组件要被卸载前马上会被调用.

 

加载复合组件支持如下方法:

1. component.forceUpate(), 这个方法能够在任何已经加载了的组件的比较深的state在不经过使用this.setState()的状况下发生改变时调用, 

 

react的兼容性:

　　支持绝大多数浏览器, 包括IE9及其以上.

　　对于那些连es5语法都不支持的浏览器, react固然也就不支持啦.

 

 

参考文档: http://reactjs.cn/react/docs/working-with-the-browser.html