学习React（四）

学习React（四）

• • componentWillMount（被放弃使用）
  • render
  • componentDidMount
  • shouldComponentUpdate(nextProps,nextState)
  • componentWillUpdate（被放弃使用）
  • componentDidUpdate
  • componentWillReceiveProps（被放弃使用）
  • componentWillUnmount
  • react运行的生命周期

componentWillMount（被放弃使用）

组件被挂载（渲染）到页面之前，自动执行，此时render函数，还没有执行，无法在这一步操作真实DOM

render

挂载（渲染）页面，把虚拟DOM转换成真实DOM，即定义的变量以及jsx被执行

componentDidMount

组件被挂载（渲染）到页面之后，自动执行，此时render函数，已经执行完成，可以在这一步进行DOM节点的操作

shouldComponentUpdate(nextProps,nextState)

组件被更新之前(即每次改变state，props的值都会执行该函数)，自动执行，它会返回true或者false，返回true就继续执行componentWillUpdate，否则就不执行,
可以通过nextProps.[属性值]与当前this.props.[属性值]比较是否一样，来选择return true还是return false，来执行组件中的render函数

componentWillUpdate（被放弃使用）

执行在shouldComponentUpdate之后，shouldComponentUpdate返回值为true，才执行componentWillUpdate，接着继续执行render函数重新渲染页面，当页面渲染完成后执行componentDidUpdate

componentDidUpdate

组件更新完成之后，自动执行

componentWillReceiveProps（被放弃使用）

该函数要执行的条件：
1.首先它要从父组件接受参数；
2.这个组件要已经在父组件中渲染过一次，才会执行，如果这个组件是第一次存在于父组件中，就不会执行

componentWillUnmount

组件被删除之前，自动执行

react运行的生命周期

1.Initialization（初始化）:初始化页面在构造函数中获取props值，以及state值的设置，页面创建过程中只执行一次

2.Mounting（挂载）:设置好props和state的值之后，开始挂载（渲染）页面，页面创建过程中只执行一次

3.Updation（更新）:当页面中state，props的值开始改变时，执行这里的函数

4.Unmounting（销毁）:页面卸载时，自动执行