React 生命周期钩子函数详解

Posted 2021-01-26 willinsist

一、回顾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><App/></ErrorBoundary>

 

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;

  }

}