码迷,mamicode.com
首页 > 其他好文 > 详细

react 生命周期

时间:2018-03-20 19:47:39      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:blog   lstat   完成   nod   注意   default   性能优化   操作   函数接口   

生命周期:一个组件在不同的时期会调用不同时期的函数接口(也就是对应的生命周期函数)

react组件的生命周期总共提供了10个API。

装载:

依次执行以下函数:

constructor -- 组件被加载前最先调用,只调用一次

  1、getDefaultProps --作用于组件类,只调用一次,设置默认的 props,对于引用值,会在组件中共享

  2、getIntialState -- 在ES6语法中废弃了这种写法,作用于组件实例,在组件被实例化的时候被调用一次,用于初始化每个实例的 State,此时可以访问 this.props,在ES6中可以在constructor使用this.state={}

  3、函数体第一句必须是:super(props)

componentWillMount -- 在完成首次渲染之前调用,只调用一次,此时可以修改组件的 state

render -- 创建虚拟DOM,需要注意:

  1、只能通过 this.prop 和 this.state 访问数据

  2、可以返回 null 、false 和任何 React 组件

  3、只能出现一个顶级组件(不能返回数组)

  4、不能改变组件的状态

  5、不能修改DOM输出

componentDidMount -- 真实的DOM被渲染出来之后调用,只调用一次,需要注意:

  1、可以通过 this.DOMNode() 访问到真实的DOM元素

  2、可是使用其他类库来操作这个DOM

  3、在服务端中,该方法不会被调用

更新:

组件数据发生变化,也就是 prop 和 state 被改变,会依次执行如下函数:

componentWillReceiveProps -- 组件接收到新的 props 时调用,此时可以更改组件 props 和 state

  1、props 是父组件传递给子组件的,父组件发生 render的时候子组件就会调用

 componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true
            });
        }
    }

shouldComponentUpdate -- 组件是否应当渲染新的 props 和 state

  1、返回 false 表示跳过后续的生命周期

  2、首次渲染调用了 forceupdate 方法后,该方法不会被调用

  3、用来进行性能优化,因为有些变化并不需要重新render的,例如前后两次的 props 和 state 相同,但是不建议使用

shouldComponentUpdate: function(nextProps,nextState){}

componentWillUpdate -- 接收到新的 props 和 state 之后,进行渲染之前调用,此时不允许更新 props 和 state

 

componentDidUpdate -- 完成新的 props 和 state 更新渲染之后调用,此时可以访问到真实的 DOM 

卸载:

销毁组件:componentWillUnmount -- 组件被移除之前调用

  用于清除一些不必要的东西,例如组件中事件的解绑等...

 

react 生命周期

标签:blog   lstat   完成   nod   注意   default   性能优化   操作   函数接口   

原文地址:https://www.cnblogs.com/z-one/p/8600654.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!