REACT的生命周期一

React 生命周期钩子函数详解
一、回顾vue中的生命周期
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
activated deactivated
二、react生命周期钩子函数
初始化阶段
constructor 初始化数据—初始化状态
componentWillMount 以前建议进行ajax请求,最后一次修改状态的机会,但是现在基本上都componentDidMount中请求
render 第一次装载(渲染)数据
componentDidMount ajax请求,更新状态,进入运行时阶段,更新视图,还可以实例化一些对象
运行时阶段
componentWillReceiveProps 子组件接收到父组件的数据
shouldComponentUpdate 本组件是不是需要进行去更新视图,默认为true,要不不写,写了必写返回值,false表示不更新视图
componentWillUpdate 组件即将被更新-----无实际意义
render 重新渲染数据
componentDidUpdate 实例化一些对象(特别是如果数据是动态请求的)
销毁
componentWillUnmount 清除一些计时器,定时器等
错误异常处理
componentDidCatch
componentDidCatch — 错误边界作为 React 组件,用以捕获在子组件树中任何地方的 JavaScript 异常,打印这些错误,并展示备用 UI 而非让组件树崩溃。错误边界会捕获渲染期间,在生命周期方法中以及在其整个树的构造函数中的异常。

简单来说 就是使用异常的组件包裹App组件

ErrorBoundary组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值