Redis

关注公众号 jb51net

关闭
首页 > 数据库 > Redis > React 组件生命周期函数

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

作者:巨蟹座不吃鱼​​​​​​​

这篇文章主要介绍了React 组件的常用生命周期函数汇总,组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等

1. 概述

2. 生命周期的三个阶段

2.1. 创建时(挂载阶段)

钩子函数触发时机作用
constructor创建组件时,最先执行1.初始化state 2.为事件处理程序绑定 this
render每次组件渲染都会触发渲染 UI (注意:不能调用setState())
componentDidMount组件挂载(完成 DOM 渲染)后1.发送网络请求 2.DOM 操作
// 导入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 />, document.getElementById('root'))

2.2. 更新时(更新阶段)

钩子函数触发时机作用
render每次组件渲染都会触发渲染 UI (与挂载阶段是同一个render)
componentDidUpdate组件更新(完成 DOM 渲染)后1.发送网络请求 2.DOM 操作 注意:如果要 setState() 必须放在一个if条件中
// 导入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} />
        <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 />, document.getElementById('root'))

2.3. 卸载时(卸载阶段)

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

钩子函数触发时机作用
componentWillUnmount组件卸载(从页面中消失)执行清理工作(比如:清理定时器等)
// 导入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} />
        }
        <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 />, document.getElementById('root'))

到此这篇关于React 组件的常用生命周期函数汇总的文章就介绍到这了,更多相关React 组件生命周期函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文