/react-sourcecode-base

react16 源码学习

生命周期函数

  • Initalization (初始化 state、props)
  • Mounting (componentWillMount、render、componentDidMount)
  • Updation (监听 props 和 state)
  • Unmounting (componentWillUnmount)

Mounting (挂载)

componentWillMount: 组件即将被挂载到页面上时，执行此函数(只执行一次)

componentWillMount() {
  console.log("componentWillMount")
}

render: 页面被渲染时，执行此函数(组件更新时执行)

render() {
  console.log("render")
}

componentDidMount: 组件被挂载到页面之后时，执行此函数(只执行一次)

componentDidMount() {
  console.log("componentDidMount")
}

Updation (更新)

  1. state

shouldComponentUpdate: 组件被更新之前，执行此函数(需要返回一个 Boolean 类型的值)

重点!!!: 性能优化可以使用此函数

shouldComponentUpdate(nextProps, nextState) {
  console.log("shouldComponentUpdate")
  if(nextProps.xxx !== this.props.xxx) {
    // 当某个属性发生改变时，才会执行更新操作
    return true
  }
  return false // 返回值: 决定是否需要执行 render 函数
}

componentWillUpdate: 当 shouldComponentUpdate 返回值为 true 时，执行此函数

componentWillUpdate() {
  console.log("componentWillUpdate")
}

render: 页面渲染

componentDidUpdate: 组件更新完成之后，执行此函数

componentDidUpdate() {
  console.log("componentDidUpdate")
}
  1. props

componentWillReceiveProps: 当子组件从父组件接收参数，当父组件的render第一次执行时，不会触发该函数；只有子组件已经存在父组件时，下次render执行后，才会执行此函数

componentWillReceiveProps() {
  console.log("componentWillReceiveProps")
}

然后重复 state 步骤。

Unmounting (销毁)

componentWillUnmount: 当组件从父组件中即将被销毁时，执行此函数

componentWillMount() {
  console.log("componentWillMount")
}