react在浏览器中的工作原理
前言:
react提供了的高度抽象, 在大多数情况下, 你可以任意地操作DOM. 但有的时候, 使用已经存在的API或者第三方库可以让你的操作变得更方便.
使用react的时候, 我们没有直接写DOM节点, 而是使用的虚拟节点.但是最后我们看到的又是用一个个的DOM节点渲染出来的页面,.
按照常理来说, 要将一个虚拟节点转换为一个在网页中能正常显示的节点, 需要一定的时间转化, 这样应该耗时会更长,在这一点上, react如何保证它能高效地渲染页面呢?
这其实就是react设计巧妙的地方, react响应非常快是因为它不直接与DOM进行比较, 对DOM的描述一直存放于内存中. 使用render方法其实就是返回一个对DOM的描述, react能在内存中对这个描述进行比较, 然后以最快的时间重新更新浏览器.
为了和浏览器中的内容进行交互, 想要找到一个DOM节点, 你可以给任何位置加上一个ref属性. 我想详细了解ref.
组件的生命周期:
- Mounting, 加载
- Updating, 更新
- Unmountion, 卸载
为了细化生命周期的执行过程, react又提供了will, did两种方法, will这个是在生命周期开始之前调用, did是在生命周期已经执行了后调用.
对生命周期细分:
Mounting 加载又细分为:
- getInitialState(), 这一步会在组件加载之前调用, 它的作用是返回一个state数据.
- componentWillMount(), 组件被加载之前执行.
- componentDidMount(), 组件已经被加载后调用.
updating又细分为:
- componentWillReceiveProps(object nextProps), 这个是在被加载的组件接受到一个新的Props时调用, 这个方法可以用来比较this.props和nextProps的值, 以此来确定是否要使用this.setState()方法.
- shouldComponentUpdate(object nextProps, object nextState), 这个方法返回一个boolean值, 用来确定组件是否要更新. 通过比较this.props和nextProps, this.state和nextState, 如果返回为true, 则重新渲染页面, 如果返回为false, 则不会重新渲染页面.
- componentWillUpdate(object nextProps, object nextState), 这个方法在组件要更新之前调用.
- componentDidUpate(object prevProps, object prevState), 方法在组件更新后调用.
Unmounting:
- componentWillUnmount(), 这个在组件要被卸载前立刻会被调用.
加载复合组件支持以下方法:
- component.forceUpate(), 这个方法可以在任何已经加载了的组件的比较深的state在不通过使用this.setState()的情况下发生改变时调用,
react的兼容性:
支持绝大多数浏览器, 包括IE9及其以上.
对于那些连es5语法都不支持的浏览器, react当然也就不支持啦.
参考文档: http://reactjs.cn/react/docs/working-with-the-browser.html