react生命周期

什么是声明周期？ 组件本质上就是状态机，输入确定，输出一定确定。如何理解这一点？react有两个特点，第一个就是去除了所有的手动dom操作，也就是使用jsx。第二个就是组件把状态和结果一一对应起来，从而能够直观的看出来，程序在不同的状态是的输出。属性是由父组件传递给子组件的，状态是子组件内部维护的一些数据，当状态发生变化时候，组件也会进行更新，因此我们可以理解成一个state对应一个render的结果，这样我们就可以知道在不同的state下，组件会render出什么样的结果，从而就知道组件在页面上展示的内容是什么。状态机本质上就是状态和转移的结合，我们刚才说过，不同的状态对应不同的输出，状态和状态之间有时候会发生转换，当状态发生转变的时候，会触发不同的钩子函数，从而让开发者有机会做出相应，因为状态转换是由react来进行维护的。作为开发者没有 办法直接的参与到状态转换中，但是react给我们提供了很多钩子函数，我们可以自己来编写这些钩子函数，这样react在进行状态转换的时候，就可以调用我们的状态函数。 我们也可以用事件的思路来理解状态，开发者不知道什么时候会发生事件，但是我们可以决定在发生事件的时候，执行什么动作，也就是事件的监听器，状态和事件有一些类似，他们的区别是事件和事件之间没有直接的关系，每个事件都是独立发生的，但是状态和状态之间是有关系的，组件可以处于不同的状态中

1.组件的生命周期 组件的生命周期分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM React 为每个状态都提供了两种处理函数， will 函数在进入状态之前调用 ， did 函数在进入状态之后调用 ，三种状态共计五种处理函数。 componentWillMount() ---render之前最后一次修改状态的机会 componentDidMount() ---成功render并渲染完成真实DOM之后触发， 可以修改DOM componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() 此外，React 还提供两种特殊状态的处理函数。 componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用 注意： render只能访问this.props和this.state ，只有一个顶层组件

React的组件在第一次挂在的时候首先获取父组件传递的props，接着获取初始的state值，接着经历挂载阶段的三个生命周期函数，也就是ComponentWillMount，render，ComponentDidMount，这三个函数分别代表组件将会挂载，组件渲染，组件挂载完毕三个阶段，在组件挂载完成后，组件的props和state的任意改变都会导致组建进入更新状态，在组件更新阶段，如果是props改变，则进入ComponentWillReceiveProps函数，接着进入ComponentShouldUpdate进行判断是否需要更新，如果是state改变则直接进入ComponentShouldUpdate判定，这个默认是true，当判定不需要更新的话，组件继续运行，需要更新的话则依次进入ComponentWillMount，render，ComponentDidMount三个函数，当组件卸载时，会首先进入生命周期函数ComponentWillUnmount,之后才进行卸载，如图 React的生命周期函数： 初始化阶段：getDefaultProps获取实例的默认属性，getInitialState获取每个实例的初始化状态，ComponentWillMount：组件将被装载，渲染到页面上，render：组件在这里生成虚拟的DOM节点，ComponentDidMount

生命周期详见 react v16.12 官网 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() render() componentDidMount() componentWillMount() 即将过时，不要使用 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： shouldComponentUpdate() render() componentDidUpdate() componentWillUpdate() 与 componentWillReceiveProps() 即将过时，不要使用。 卸载 当组件从 DOM 中移除时会调用如下方法： componentWillUnmount() 错误处理 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法： componentDidCatch() 来源： https://www.cnblogs.com/everlose/p/12519382.html

/* https://reactjs.org/docs/react-component.html React生命周期函数： 组件加载之前，组件加载完成，以及组件更新数据，组件销毁。 触发的一系列的方法 ，这就是组件的生命周期函数 组件加载的时候触发的函数： constructor 、componentWillMount、 render 、componentDidMount 组件数据更新的时候触发的生命周期函数： shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate 你在父组件里面改变props传值的时候触发的： componentWillReceiveProps 组件销毁的时候触发的： componentWillUnmount 必须记住的生命周期函数： *加载的时候：componentWillMount、 render 、componentDidMount（dom操作） 更新的时候：componentWillUpdate、render、componentDidUpdate *销毁的时候： componentWillUnmount */ import React, { Component } from 'react'; class Lifecycle extends Component {

1、初始化 getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性。 getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。 此时可以访问this.props componentWillMount() 在组件初始化时调用（渲染前），以后更新都不调用，整个生命周期只调用一次 此时可以修改state。 render() componentDidMount() 渲染后调用，只调用一次。 此时可以使用this.getDOMNode()。 2、更新 componentWillReceiveProps(nextProps) 接收新的props时调用，初始化时不调用。 shouldComponentUpdate(nextProps, nextState) 接收新的props或者state时被调用。初始化时或者使用forceUpdate时不调用 需要返回一个布尔值 可以在此对比前后两个props和state是否相同，如果相同则返回false阻止更新 componentWillUpdate(nextProps, nextState) 新一轮更新前调用，在初始化时不会被调用 此时可以修改state： nextState.name = '你想要更改的值’

一、废除的生命周期 　　官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生 bug ，尤其是对于异步渲染的版本 　　由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数 　　componentWillMount 　　componentWillRecieveProps 　　componentWIllUpdate 二、新增的生命周期 　　 　 static getDerivedStateFromProps(nextProps, prevState) {} 　　　　　　 　　用于替换componentWillReceiveProps，可以用来控制 props 更新 state 的过程；它返回一个对象表示新的 state；如果不需要更新，返回 null 即可 　　在每次渲染之前都会调用，不管初始挂载还是后面的更新都会调用，这一点和 componentWillReceiveProps 不同（只有当父组件造成重新渲染时才调用 　　简单的理解就说从props中获取state，这个生命周期的功能实际上就是将 传入的props映射到state上面 　　 getDerivedStateFromProps 是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性

组件的生命周期 可分为三个状态： Mounting：已插入真实DOM Updating：正在被重新渲染 Unmounting：已移出真实DOM 下图展示了不同阶段生命周期函数的执行顺序： 生命周期函数 指在某一个时刻组件会自动执行的函数。 constructor() 在React组件挂载之前，会调用它的构造函数。主要做两件事情： 通过给 this.state 赋值对象来初始化内部 state。 为事件处理函数绑定实例 注意事项： 在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。 不要在里边调用setState componentWillMount() 在渲染前调用,在客户端也在服务端。(组件即将挂载到页面上自动执行) componentDidMount() （组件被挂载之后自动执行）在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 componentWillReceiveProps() 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate(nextProps, nextState) 返回一个布尔值

react生命周期的整个过程和vue的类似 Mounting :已插入真实 DOM,Updating:正在被重新渲染,Unmounting:已移出真实 DOM 具体的回掉函数及运行时机： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

React组件的生命周期分为三个阶段： 1.组件初始化 Mounting 2.组件运行时 Updating 3.组件卸载时 Unmounting 组件初始化 1.constructor() constructor()中完成了React数据的初始化，它该构造方法接受一个props参数，必须在方法中首先调用super(props)才能保证props被传入组件中。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。 2.componentWillMount() 组件渲染之前调用，只会被调用一次。在这个方法里setState不生效，不会触发re-render，而是会进行state合并。实际开发中很少用这个方法，因为都可以放到constructor()中来处理 组件运行时 3.componentDidMount() 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染 4.componentWillReceivePorps(nextProps) 组件初始化时不调用，组件就接收新props时调用，该函数接收一个props，为接收到的参数 5.shouldComponentUpdate(nextProps, nextState) 组件接受新的state或者props时调用