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