React生命周期

组件的生命周期分成三个状态:

Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

下面是生命周期的例子,分别用React.Component和React.createClass呈现:

import React from 'react'
class lifecycle extends React.Component{ 
    //初始化组件状态getInitialState
    constructor(props) {
        super(props)
        this.state = {name: props.name}
        this.handleClick = this.handleClick.bind(this)
    }
    //初始渲染组件之前
    componentWillMount() {
        console.log("初始render之前 componentWillMount")
    }
    //初始渲染组件之后(初始render之后),通知组件已经加载完成
    componentDidMount() {
        console.log("初始render之后 componentDidMount")
    }
    //组件收到新的属性(props)
    componentWillReceiveProps(nextProps) {
        console.log("组件收到新的属性 componentWillReceiveProps")
    }
    //当组件接收到新的属性(props)和状态(state)改变的话,都会触发
    shouldComponentUpdate(nextProps, nextState) {
        console.log("组件接收到新的属性(props)和状态(state) shouldComponentUpdate")
        return true
    }
    //如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准备更新组件,并调用 componentWillUpdate()
    componentWillUpdate() {
        console.log("准备更新组件 componentWillUpdate")
    }
    //调用了 render() 更新完成界面之后
    componentDidUpdate() {
        console.log("更新完成界面 componentDidUpdate")
    }
    //组件移除
    componentWillUnmount() {
        console.log("组件移除 componentWillUnmount")
    }
    handleClick() {
        console.log(this.state.name)
    }
    //渲染组件,每次数据更新并且上面的 shouldComponentUpdate(...) 返回为 true,都会调用渲染
    render() { 
        return ( 
            <div onClick={this.handleClick}></div> 
        )
    } 
}
lifecycle.propTypes =  {
    func: React.PropTypes.func,
    any: React.PropTypes.any,
    bool: React.PropTypes.bool,
    func: React.PropTypes.func,
    number: React.PropTypes.number,
    string: React.PropTypes.string,
    name : React.PropTypes.string.isRequired
}
//组件创建之前getDefaultProps
lifecycle.defaultProps = {
    name: 'wheat'
}
export default lifecycle


var lifecycle = React.createClass({
  propTypes: {
    func: React.PropTypes.func,
    any: React.PropTypes.any,
    bool: React.PropTypes.bool,
    func: React.PropTypes.func,
    number: React.PropTypes.number,
    string: React.PropTypes.string,
    name: React.PropTypes.string.isRequired
  },
  //组件创建之前
  getDefaultProps: function() {
    return {
      name: 'wheat'
    };
  },
  //初始化组件状态
  getInitialState : function(){
    console.log("初始化组件状态 getInitialState")
    return {
      name: this.props.name
    }
  },
  //初始渲染组件之前
  componentWillMount : function(){
      console.log("初始render之前 componentWillMount")
  },
  //初始渲染组件之后(初始render之后),通知组件已经加载完成
  componentDidMount : function(){
    console.log("初始render之后 componentDidMount")
  },
  //组件收到新的属性(props)
  componentWillReceiveProps : function(nextProps){
    console.log("组件收到新的属性 componentWillReceiveProps")
  },
  //当组件接收到新的属性(props)和状态(state)改变的话,都会触发
  shouldComponentUpdate : function(nextProps, nextState){
    console.log("组件接收到新的属性(props)和状态(state) shouldComponentUpdate")
    return true
  },
  //如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准备更新组件,并调用 componentWillUpdate()
  componentWillUpdate : function(){
    console.log("准备更新组件 componentWillUpdate")
  },
  //调用了 render() 更新完成界面之后
  componentDidUpdate : function(){
      console.log("更新完成界面 componentDidUpdate")
  },
  //组件移除
  componentWillUnmount : function(){
    console.log("组件移除 componentWillUnmount")
  },
  handleClick: function() {
    console.log(this.state.name)
  },
  //渲染组件,每次数据更新并且上面的 shouldComponentUpdate(...) 返回为 true,都会调用渲染
  render: function() {
    console.log("渲染组件 render")
    return (
        <div onClick={this.handleClick}></div> 
    )
  }
})

参考资料:
react-without-es6
React Native 中组件的生命周期
React 入门实例教程

注:React Native组件的生命周期和React是一样的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上...
    殷灬商阅读 465评论 0 1
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,854评论 1 18
  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,104评论 0 0
  • 概述 生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期...
    made_China阅读 6,670评论 0 6
  • 1 React生命周期流程 调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多...
    Dabao123阅读 329评论 0 1