侧边栏壁纸
  • 累计撰写 121 篇文章
  • 累计创建 0 个标签
  • 累计收到 51 条评论

目 录CONTENT

文章目录

React 3.md

江子辰
2022-03-08 / 0 评论 / 1 点赞 / 78 阅读 / 1,006 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

React 生命周期

创建阶段

钩子函数

constructor

构造函数,组件被创建时调用一次,有且只调用一次,为默认state赋初始值。

componentWillMount

组件即将被渲染的时候调用,render()函数之前调用,有且只调用一次,在组件渲染之前进行的操作:操作默认state

componentWillMount(){
    console.log("组建即将被渲染");
    console.log(this.state);

    //对默认state进行处理
  }

componentDidMount

组件已经被渲染之后调用,render()函数之后,有且只调用一次

componentDidMount(){
  //render函数执行之后调用
  //发送请求,请求数据
}

render()

组件state发生变化,就会执行。

render(){

}

更新阶段

componentWillReceiveProps

组件将要接受props时调用,多次调用,只要有数据props更新,它就会被调用

componentWillReceiveProps(props){
    console.log("组件即将接受数据");
    console.log(props)

    //更新当前组件的state
    this.setState({
      image:this.props.image
    })
  }

shouldComponentUpdate

在接受数据函数调用之后调用,用于阻止当前组件更新

shouldComponentUpdate(){
  console.log("组建被更新之前阻止");

  //state验证

  //true 不阻止
  return false;
}

componentWillUpdate

如果不阻止更新,在render之前调用

componentWillUpdate(){
    console.log("组件即将被更新");
  }

componentDidUpdate

更新之后,render渲染结束调用

componentDidUpdate(){
    console.-log("组件被渲染完成之后调用");
  }

销毁阶段

componentWillUnmount()

在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作,例如解绑定时器,取消网络请求,清理任何在componentDidMount环节创建的DOM元素。

1
广告 广告

评论区