学习React系列（一）——React.Component 生命周期

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_34112030

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zale-blogs/p/8463596.html

本文详细介绍了React组件从创建、更新到销毁的整个生命周期，并通过一个示例代码展示了各个生命周期方法的执行顺序。对于理解React应用的工作流程及如何优化组件更新非常有帮助。

挂载中（只执行一次）

以下方法在组件实例正被创建和插入到DOM中时调用

constructor（）一般用于初始化state和方法的this绑定

componentWillMount()

render()

componentDidMount() 一般用于建立订阅，副作用和ajax获取数据

更新中

属性或者状态的改变会触发更新，以下方法将在组件重绘中被调用

componentWillReceiveProps() 用于处理挂载的组件属性变化引起的状态改变，通过比较来判定是否使用setstate方法。

shouldComponentUpdate() 若返回false则不处罚以下方法，默认返回true

componentWillUpdate() 该方法内部不能调用setstate方法

render()

componentDidUpdate()

移除中

该方法在组件正被移除中被调用

componentWillUnmount()

事实胜于雄辩，下面来一段代码，让你了解所有方法的执行顺序，同时里面也包含了不可控组件ref中方法的执行时机

class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
            num:0
        }
        this.changeName = this.changeName.bind(this)
    }
    componentWillMount(){
        console.log('willmount')
    }
    componentDidMount(){
        console.log('didMount')
    }
    componentWillReceiveProps(nextprops){
        console.log('willrecieve')
    }
    shouldComponentUpdate(){
        console.log('shouldupdate')
        return true
    }
    componentWillUpdate(){
        console.log('willupdate')
    }
    componentDidUpdate(){
        console.log('didiupdate')
    }
    componentWillUnmount(){
        console.log('unmount')
    }
    changeName(){
        let num = this.state.num+1
        this.setState({
            num
        })
    }
    render(){
        console.log('render')
        return(
            <div onClick={this.changeName} ref={div=>{console.log(div)}}>
                {this.state.num}
            </div>
        )
    }
}