React-生命周期

React-生命周期

1.react-生命周期可以分为3大块：
(1).初试化：

• componentWillMount() ===>Vue生命周期中的 beforeMount()
  实例创建完成，且state,props均初始化完成，可以进行访问。
• componentDidMount() ===> Vue生命周期中的mounted()
  实例挂载渲染完成。
  注释：初始化方法组件创建后均只会执行一次

(2).更新：

• componentWillReceiveProps(nextProps)
  当组件接收到新的props时，调用。参数nextProps为接收到的新的props
• shouldComponentUpdate(nextState,nextProps) (优化重要环节)
  当组件接收到新的props,或state时，调用。参数nextState为新的state,参数nextProps为新的props。
  注意：该方法必须要返回一个布尔值，否则报错
  此时可以对新的state或props，旧的state或props进行比较，如果前后值，没有改变，则return false，停止更新。如果前后值发生了改变，那么就return true
  进入更新的下一个生命周期。
• componentWillUpdate(nextState,nextProps)===>Vue生命周期中的beforeUpdate()
  组件将要更新时调用，只有当shouldComponentUpdate返回true才会进入该周期。 并且因为此时，还未完成更新，所以可以在此对新的state或props拦截修改。
• componentDidUpdate()===>Vue生命周期中的updated()
  更新完成，从新渲染完成。

(3).销毁

• componentWillUnmount()===>Vue生命周期中的destroy()
  组件销毁后，立即调用。 （一些事件监听，定时器等在此时进行清除）

2 react实例从创建到销毁详细图解:

组件中可以利用

ReactDOM.unmountComponentAtNode(document.getElementById("app"));
销毁整个组件