React生命周期和虚拟DOM

一.虚拟DOM

  1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器

  2.React实现了一整套事件系统,所有的事件对象符合W3C规范,并且事件冒泡跨浏览器支持。你能够使用HTML5事件,但是在老浏览器并不支持。

二.Refs and findDOMNode()

  1.与浏览器交互,你将会需要一个DOM节点的引用,您能够将ref属性添加到任何一个元素,通过这种方式,你能够引用组件支持的实例,如果你要调用组件上的一个函数或者访问

底层DOM节点,那是非常有用的。在这篇文章中学习更多ref相关知识

三.生命周期

  React中,组件的生命周期有三个阶段,分别为:初始阶段,更新阶段,销毁阶段

    初始阶段:组件被插入DOM中

    更新阶段:如果DOM应该被更新,组件重新渲染

    销毁阶段:组件从DOM中移除

  在这三个阶段,react都提供了一些钩子函数。总的来说,是Will方法和Did方法。Will方法在事情发生之前执行,Did方法在事情发生之后执行

  1.初始化阶段

    (1)getInitialState()。这个函数在组件被装载前调用,对于需要设置状态的组件,应该执行它,并且返回组件的初始状态

    (2)componentWillMount()。这个函数在组件即将被装载时调用,可以在这个函数中修改组件的状态

    (3)componentDidMount()。这个函数在组件被装载后立即调用。调用这个方法的时候,组件已经被渲染在页面中了,所有在这个函数中可以修改DOM节点。

  2.更新阶段

    (1)componentWillReceiveProps(object nextProps)。当一个已经装载的组件接受到新的属性时调用,这个函数可以接受一个对象类型的参数,这个参数表示接受到的新属性,可以

修改这个新的属性

    (2)shouldComponentUpdate(object nextProps, object nextState)。这个方法返回一个布尔值,在这个函数中,开发者可以决定DOM是否更新,如果返回false,表示阻止更新,

这个阶段的后续的钩子函数也不会被调用

    (3)componentWillUpdate(object nextProps, object nextState)。这个方法在更新发生前立即调用,这个函数中不能修改组件的状态

    (4)componentDidUpdate(object prevProps, object prevState)。这个方法在更新发生后立即调用。它接受两个对象类型的参数,这两个参数分别表示更新前的属性和更新前的

状态

  3.销毁阶段

    componentWillUnmount()。组件被卸载前调用。组件的清理操作(如:清除定时器,事件监听等)应该子啊这里进行

 

  

posted @ 2016-09-22 15:51  QxQstar  阅读(1469)  评论(0编辑  收藏  举报