React component生命周期详解

阅读前需要具备下面两个知识点

• props
• state

什么是react component

react component可以通过class或者function定义，接受任意参数（称为props），返回react element

通过函数定义的component

function Hello(props){
  return <h1>Hello, {props.name}</h1>
}

通过class定义的component

class Hello extends React.Component {
  render(){
    return <h1>Hello, {this.props.name}</h1>
  }
}

react component的生命周期

react component的生命周期指的是component从创建到销毁经历的不同状态。在每个状态通过生命周期方法执行一些代码

react component的生命周期主要的阶段Mounting → Updating → Unmounting

Mounting(挂载时)

挂载表示创建component并且将其插入到DOM上，下面列出的方法按照从上到下的顺序依次执行（加粗表示常用的方法）

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Updating(更新时)

更新是由于props或者state的变化，造成component需要re-render（重新渲染）

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()