React生命周期（17版本前）

React生命周期（17版本前）

主要分为三个阶段：初始阶段，更新阶段，和卸载阶段

初始阶段

主要涉及constructor、componentWillMount、render和componentDidMount钩子

下面是一个简单的例子，展示初始阶段的声明周期钩子函数的调用情况。

class Count extends React.Component{
  constructor(props){
    console.log("Count --- constructor");
    super(props)
    this.state = {count:0}
  }

  componentWillMount(){
    console.log("Count --- componentWillMount");
  }

  componentDidMount(){
    console.log("Count --- componentDidMount");
  }

  add = ()=>{
    let count = this.state.count
    this.setState({count:++count})
  }

  render(){
    console.log("Count --- render");
    
    let {count} = this.state
    return(
      <>
        <h1>当前求和为：{count}</h1>
        <button onClick={this.add}>count++</button>
      </>
    )
  }
}

function App() {
  return (
    <div>
      <Count />
    </div>
  )
}

初始化的时候可以看到调用了上面这些钩子

ps：上述componentWillMount钩子，以及在17版本后废弃使用了，但是还是保留了下来，所以就会有警告！！

更新的时候 路线（1） – setState()

shouldComponentUpdate —true—> componentWillUpdate —> render —> componentDidUpdate

​ |_________________________> ❌

同样用，上述案例，增加新的钩子函数

class Count extends React.Component{
  constructor(props){
    console.log("Count --- constructor");
    super(props)
    this.state = {count:0}
  }

  componentWillMount(){
    console.log("Count --- componentWillMount");
  }

  shouldComponentUpdate(){
    console.log("Count --- shouldComponentUpdate");
    return true
  }

  componentWillUpdate(){
    console.log("Count --- componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("Count --- componentDidUpdate");
  }

  componentDidMount(){
    console.log("Count --- componentDidMount");
  }

  add = ()=>{
    let count = this.state.count
    this.setState({count:++count})
  }

  render(){
    console.log("Count --- render");
    
    let {count} = this.state
    return(
      <>
        <h1>当前求和为：{count}</h1>
        <button onClick={this.add}>count++</button>
      </>
    )
  }
}

function App() {
  return (
    <div>
      <Count />
    </div>
  )
}

打开浏览器查看，当我点击按钮的时候，声明周期钩子函数执行的情况

⚠️：这里要注意，shouldComponentUpdate是一个阀门，默认不写这个函数的时候就会返回true，当我们写了这个钩子的时候，就一定要给出返回值，true表示可以更新组件，false表示不能更新组件。不写返回值就好报错。后续钩子也不会执行。具体报错信息如下。

更新的时候 路线（2） – forceUpdate()

当我们使用forceUpdate这个函数去强制更新组件的话就走下面的钩子，不会走componentWillUpdate

componentWillUpdate —> render —> componentDidUpdate

下面给出一个例子：

class Count extends React.Component{
  constructor(props){
    console.log("Count --- constructor");
    super(props)
    this.state = {count:0}
  }

  componentWillMount(){
    console.log("Count --- componentWillMount");
  }

  shouldComponentUpdate(){
    console.log("Count --- shouldComponentUpdate");

  }

  componentWillUpdate(){
    console.log("Count --- componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("Count --- componentDidUpdate");
  }

  componentDidMount(){
    console.log("Count --- componentDidMount");
  }

  add = ()=>{
    let count = this.state.count
    this.setState({count:++count})
  }

  force = ()=>{
    this.forceUpdate()
  }

  render(){
    console.log("Count --- render");
    
    let {count} = this.state
    return(
      <>
        <h1>当前求和为：{count}</h1>
        <button onClick={this.add}>count++</button>
        <button onClick={this.force}>forceUpdate</button>
      </>
    )
  }
}

function App() {
  return (
    <div>
      <Count />
    </div>
  )
}

打开浏览器，点击froceUpdate按钮，可以看到输出结果和我们预期一至

卸载的时候就会走componentDidUnMount

下面是例子：

//app.jsx
import React from "react"
import root from "./main";

class Count extends React.Component{
  constructor(props){
    console.log("Count --- constructor");
    super(props)
    this.state = {count:0}
  }

  componentWillMount(){
    console.log("Count --- componentWillMount");
  }

  shouldComponentUpdate(){
    console.log("Count --- shouldComponentUpdate");

  }

  componentWillUpdate(){
    console.log("Count --- componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("Count --- componentDidUpdate");
  }

  componentDidMount(){
    console.log("Count --- componentDidMount");
  }

  add = ()=>{
    let count = this.state.count
    this.setState({count:++count})
  }

  force = ()=>{
    this.forceUpdate()
  }

  unMount =()=>{
    root.unmount(document.getElementById("root"))
  }

  render(){
    console.log("Count --- render");
    
    let {count} = this.state
    return(
      <>
        <h1>当前求和为：{count}</h1>
        <button onClick={this.add}>count++</button>
        <button onClick={this.force}>forceUpdate</button>
        <button onClick={this.unMount}>unMount</button>
      </>
    )
  }

  componentWillUnmount(){
    console.log("Count --- componentWillUnmount");
  }
}

function App() {
  return (
    <div>
      <Count />
    </div>
  )
}

export default App

//main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

const root = createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

export default root

在父子组件中，父组件给子组件传递参数的时候，子组件的生命周期

componentWillReceiveProps—>shouldComponentUpdate—true—>componentWillUpdate—>render—>componentDidUpdate |______________> ❌

这里还有一个注意点：

componentWillReceiveProps只有新传入props的时候才会去执行，第一次传props的时候是不会执行的