类式组件的生命周期

生命周期回调函数 <==> 生命周期钩子函数 <==> 生命周期函数 <==> 生命周期钩子

卸载

class Com extends React.Component {
  render(){
    return(
      <>
      <h1>react学不会怎么办</h1>
      <button onClick={this.destroy}>destroy</button>
      </>
    )
  }
  destroy(){
    root.unmount(document.getElementById('root'))
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Com />)

老版React卸载

class Com extends React.Component {
  render(){
    return(
      <>
      <h1>react学不会怎么办</h1>
      <button onClick={this.destroy}>destroy</button>
      </>
    )
  }
  destroy(){
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
}
ReactDOM.render(<Com />, document.getElementById('root'))

生命周期旧图

componentDidMount

在React中，componentDidMount 是一个生命周期方法，用于在组件被渲染到 DOM 后执行一次的操作。 它是组件生命周期中的一个阶段，用于处理与 DOM 交互、网络请求、订阅事件等副作用操作。

componentDidMount 方法是在组件渲染到页面之后调用的。具体来说，它是在组件的 render 方法被调用、组件的虚拟 DOM 被渲染到实际 DOM 后被触发的。

class Com extends React.Component {
  state = { opacity: 1 }
  // 组件挂在页面之后调用
  componentDidMount() { 
    console.log(1); 
    setInterval(() => { 
      let { opacity } = this.state 
      opacity -= 0.1
      if (opacity <= 0) opacity = 1
      // 设置状态 //
      this.setState({ opacity }) 
    }, 200) 
  } 
  render() {
    return (
      <>
        <h1 style={{ opacity: this.state.opacity }}>react学不会怎么办</h1>
        <button onClick={this.destroy}>点我</button>
      </>
    )
  }
  destroy=()=> {
    root.unmount(document.getElementById('root'))
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Com />)

componentWillUnmount

在React中，componentWillUnmount是一个生命周期方法，用于在组件被从DOM中卸载之前执行一次的操作。 它是组件生命周期中的一个阶段，用于处理清理工作、取消订阅事件、清除定时器等操作。

class Com extends React.Component {
  state = { opacity: 1 }
  // 组件挂在页面之后调用
  componentDidMount() {
   this.timer = setInterval(() => {
      let { opacity } = this.state
      opacity -= 0.1
      if (opacity <= 0) opacity = 1
      // 设置状态
      this.setState({ opacity })
    }, 200)
    console.log(this);
  }
  // 组件将要卸载 //
  componentWillUnmount() { 
    clearInterval(this.timer) 
  } 

  render() {
    return (
      <>
        <h1 style={{ opacity: this.state.opacity }}>react学不会怎么办</h1>
        <button className={'btn'} onClick={this.destroy}>点我</button>
      </>
    )
  }
  destroy=()=> {
    root.unmount(document.getElementById('root'))
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Com />)

shouldComponentUpdate

控制组件更新的阀门

每次调用 setState 的时候都会触发该生命周期，该生命周期，默认不写的时候，会自动返回一个 true

shouldComponentUpdate(){
  console.log('setState');
  return true
}

componentWillUpdate

组件将要更新的钩子

当调用this.forceUpdate() 时会触发该生命周期

componentDidUpdate

组件已经更新的钩子

componentWillReceiveProps

组件将要接收到新的 props 的钩子(第一次不算，后面的才算)

父组件调用 render 后，进入子组件的该生命周期

componentWillReceiveProps(nextProps){
  console.log(nextProps);
}

生命周期的几个阶段

初始化阶段

由ReactDOM.render()触发 -- 初次渲染

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() -- 常用

一般在这个钩子中做一些初始化的事，例如：开启定时器，发送网络请求、订阅消息

更新阶段

由组件内部this.setState()或父组件重新render触发

1. shouldComponentUpdate()
2. componentWillUpdate()
3. render()
4. componentDidUpdate()

卸载阶段

由ReactDOM.unmountComponentAtNode()触发 新版：root.unmount()触发

1. componentWillUnmount() -- 常用

一般干一些收尾的事，例如：关闭定时器，取消订阅消息，

生命周期新图

名称变化

除了 componentWillUnmount 之外，其他名字里有will的生命周期方法的名称都会发生变化

• componentWillMount() --> UNSAFE_componentWillMount()
• componentWillReceiveProps() --> UNSAFE_componentWillReceiveProps()
• componentWillUpdate() --> UNSAFE_componentWillUpdate()

getDerivedStateFromProps

用于在新的 props 被传递给组件时更新组件的状态。

它允许你根据新的 props 来更新组件的内部状态。 这个方法是用来代替旧版本的 componentWillReceiveProps 方法，它更安全和可预测。

getDerivedStateFromProps 是一个静态方法（即它不访问组件实例本身），它接收两个参数：props 和 state。 它的主要目的是根据传入的 props 计算并返回一个新的状态对象，或者返回 null 表示不需要更新状态。