React 生命周期概括及详解

React 组件的生命周期概括

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

  • Mounting:已插入真实 DOM(创建时)
  • Updating:正在被重新渲染(更新时)
  • Unmounting:已移出真实 DOM(卸载时)

Mounting(创建时)

  1. constructor() //constructor构造函数
  2. static getDerivedStateFromProps(props, state) //获取派生状态,接受新属性执行
  3. componentWillMount() //组件将要加载,(不建议使用,即将废弃)
  4. render() //创建虚拟dom更新dom树
  5. componentDidMount() //组件挂载完成

Updating(更新时)

  1. componentWillReceiveProps() //组件将接受新的props(不建议使用,即将废弃)
  2. static getDerivedStateFromProps()
  3. shouldComponentUpdate(nextProps, nextState) //组件是否更新
  4. componentWillUpdate() //组件将要更新(不建议使用,即将废弃)
  5. render()
  6. getSnapshotBeforeUpdate() //获取快照
  7. componentDidUpdate() //组件更新完成

Unmounting(卸载时)

  1. componentWillUnmount() //组件将要卸载

React 生命周期方法流程详解

生命周期流程

生命周期方法

1. static defaultProps

设置默认的props

例:

static defaultProps = {
    name:'张三'
}
复制代码
2. constructor()

构造函数,可以继承父级属性及设置state状态

constructor(props){
    super();
    this.state = {age:20};
}
复制代码
3. componentWillMount()

组件将要挂载,组件初始化时调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

4. render()

react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。

render(){
    return(
    <div>
        <p>{this.state.name}</p>
    </div>    
    )
}
复制代码
5.componentDidMount()

组件挂载完毕,组件渲染之后调用,只调用一次。

componentDidMount(){
    console.log('组件挂载完成');
}
复制代码
6. componentWillReceiveProps()

接收到新的属性后才可以执行,第一次不会执行

componentWillReceiveProps(nextProps){
    console.log('新的属性')
}
复制代码
7. shouldComponentUpdate()

控制状态变化后 是否更新视图,返回true更新,返回false不更新,react性能优化非常重要的一环。

shouldComponentUpdate(nextProps,nextState){
    return true;//默认为true
    return nextState.name !==this.state.name; //如果此函数种返回了false 就不会调用render方法了
}
复制代码
8. componentWillUpdate()

组件将要更新,组件初始化时不调用,只有在组件将要更新时才调用

componentWillUpdate(){
    console.log('组件将要更新');
}
复制代码
9. componentDidUpdate()

组件完成更新,组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

componentDidUpdate(){
    console.log('组件更新完成');
}
复制代码
10. componentWillUnmount()

组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

componetWillUnmount(){
    console.log('组件将要卸载');
}
复制代码

总结

以上就是React 生命周期的总流程,想要更详细的了解大家参考React 官网API,欢迎留言交流。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值