react 父子组件之生命周期函数执行顺序

react生命周期:挂载,更新,错误处理,卸载

  挂载:constructor()、static getDerivedStateFromProps()、render()、componentDidMount()

  更新:static getDerivedStateFromProps()、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()、componentDidUpdate()

  错误处理:static getDerivedStateFromError()、componentDidCatch()

  卸载:componentWillUnmount()

 

 

 

react生命周期函数:

  constructor():组件构造函数,在组件挂载之前调用;仅用于初始化内部state以及为事件处理函数绑定实例;

  static getDerivedStateFromProps():会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用,此方法适用于state 的值在任何时候都取决于 props;

  render():是 class 组件中唯一必须实现的方法;

  componentDidMount:会在组件挂载后(插入 DOM 树中)立即调用;

  shouldComponentUpdate():根据该函数的返回值,来确定组件是否重新渲染;

  getSnapshotBeforeUpdate():在最近一次渲染输出(提交到 DOM 节点,真正的UI变化)之前调用;此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate();

  componentDidUpdate():会在更新(真正UI变化)后会被立即调用,首次渲染不会执行此方法;

  componentWillUnmount():会在组件卸载及销毁之前直接调用;

  static getDerivedStateFromError():此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state;它会在渲染阶段调用,因此不允许出现副作用

  componentDidCatch():此生命周期在后代组件抛出错误后被调用,会在“提交”阶段被调用,因此允许执行副作用。

 

 

父子组件生命周期函数执行顺序:

进入页面:parent-constructor -> parent-getDerivedStateFromProps -> parent-render -> child-constructor -> child-getDerivedStateFromProps -> child-render -> child-componentDidMount -> parent-componentDidMount

更新页面:parent-getDerivedStateFromProps -> parent-shouldComponentUpdate -> parent-render -> child-getDerivedStateFromProps -> child-shouldComponentUpdate -> child-render -> child-getSnapshotBeforeUpdate ->parent-getSnapshotBeforeUpdate -> child-componentDidUpdate -> parent-componentDidUpdate

销毁页面:parent-componentWillUnmount -> child-componentWillUnmount

 

关于react生命周期详情可以查看连接:https://zh-hans.reactjs.org/docs/react-component.html#the-component-lifecycle 

posted @   唯一念  阅读(2718)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示