React 组件的常用生命周期函数汇总

本篇文章向大家介绍《React 组件的常用生命周期函数汇总》，主要包括函数、React组件、生命、周期，具有一定的参考价值，需要的朋友可以参考一下。

1. 概述

• 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。
• 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。
• 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。
• 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
• 只有类组件才有生命周期。

2. 生命周期的三个阶段

• 每个阶段的执行时机
• 每个阶段钩子函数的执行顺序
• 每个阶段钩子函数的作用

2.1. 创建时（挂载阶段）

• 执行时机：组件创建时（页面加载时）
• 执行顺序：constructor() -> render() -> componentDidMount()
• 钩子函数的作用：

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  constructor(props) {
    super(props)

    // 1.初始化state
    this.state = {
      count: 0
    }

    // 2.解决事件处理程序this指向问题
    this.handleClick = this.handleClick.bind(this)

    console.warn('生命周期钩子函数：constructor')
  }
  componentDidMount() {
    // 1.发送ajax请求，获取远程数据
    // axios.get('http://api....')

    // 2.进行DOM操作
    const title = document.getElementById('title')
    console.log(title)

    console.warn('生命周期钩子函数：componentDidMount')
  }

  // 事件处理程序
  handleClick() {
    this.setState({
      count: 1
    })
  }

  render() {
    console.warn('生命周期钩子函数：render')

    // 错误演示（不能调用setState()）
    // this.setState({
    //   count: 2
    // })

    return (
      <div>
        <h1 id="title">统计豆豆被打的次数：{this.state.count}</h1>
        <button id="btn" onclick="{this.handleClick}">打豆豆</button>
      </div>
    )
  }
}
ReactDOM.render(<app></app>, document.getElementById('root'))

2.2. 更新时（更新阶段）

• 执行时机：setState()、forceUpdate()、组件接收到新的props。
• 说明：以上任意一种变化，组件就会重新渲染。
• 执行顺序：render() -> componentDidUpdate()

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

// 父组件
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  // 事件处理程序
  handleClick = () => {
    // 执行时机：setState()
    this.setState({
      count: this.state.count + 1
    })

    // 执行时机：强制更新
    // this.forceUpdate()
  }

  render() {
    return (
      <div>
        {/* 执行时机：组件接收到新的props */}
        <showcount count="{this.state.count}"></showcount><button onclick="{this.handleClick}">打豆豆</button>
      </div>
    )
  }
}

// 子组件
class ShowCount extends React.Component {
  render() {
    console.warn('组件ShowCount的生命周期钩子函数：render')
    return (<h1 id="title">统计豆豆被打的次数：{this.props.count}</h1>)
  }

  // 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中
  // 因为：如果直接调用 setState()，也会导致递归更新！！！
  componentDidUpdate(prevProps) {
    // componentDidUpdate的作用：获取DOM
    const title = document.getElementById('title')
    console.log(title)

    // 正确做法：比较更新前后的props是否相同，来决定是否重新渲染组件
    console.log('上一次的props：', prevProps, '，当前的props：', this.props)
    if (prevProps.count !== this.props.count) {
      this.setState({})

      // componentDidUpdate的作用：发送ajax请求数据
      // axios.get('http://api....')
    }

    // 错误演示
    // this.setState({})

    console.warn('组件ShowCount的生命周期钩子函数：componentDidUpdate')
  }
}
ReactDOM.render(<app></app>, document.getElementById('root'))

2.3. 卸载时（卸载阶段）

执行时机：组件从页面中消失

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

// 父组件
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  // 事件处理程序
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        {
          this.state.count > 5 ? <p>豆豆被打死了</p> : <showcount count="{this.state.count}"></showcount>
        }
        <button onclick="{this.handleClick}">打豆豆</button>
      </div>
    )
  }
}

// 子组件
class ShowCount extends React.Component {
  componentDidMount() {
    this.timerId = setInterval(() => {
      console.log('定时器正在执行~')
    }, 500)
  }

  render() {
    return (<h1 id="title">统计豆豆被打的次数：{this.props.count}</h1>)
  }

  componentWillUnmount() {
    console.warn('组件ShowCount的生命周期钩子函数：componentWillUnmount')

    // 清理定时器
    clearInterval(this.timerId)
  }

}
ReactDOM.render(<app></app>, document.getElementById('root'))

以上就是《React 组件的常用生命周期函数汇总》的详细内容，更多关于redis的资料请关注golang学习网公众号！