react的生命周期笔记

import React from 'react'
// 这个组件讲诉的是组件的生命周期
// 1.组件生命周期的意义：组件的生命周期有助于理解组件的运行方式、完成更复杂
// 的组件功能、分析组件的错误原因等
// 2.组件的生命周期：组件的从被创建到挂载到页面中运行，再到组件不用时卸载的过程
// 3.生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
// 4.只有类组件才有生命周期

// --------------------------二、生命周期的三个阶段-----------------
// 1.创建时（挂载阶段）
//   执行时机：组件创建时（页面加载时）
//   执行顺序：
    // constructor() -->render()-->componentDidMount
// 2.更新时（更新阶段）在更新阶段做操作都会触发render，所以要注意递归盗用
  // 三种情况会触发更新：
  //   1.new props：当组件接收到传入的值时,或者传入值改变的时候
  //   2.setState(): 更改组件状态时
  //   3.forceUpdate(): 强制更新、调用这个方法时，也会重新更新
      // 执行顺序：
      // render()-->componentDidUpdate
// 3.卸载时(卸载阶段)
  // 执行时机：组件从页面中消失
  // 触发时机：组件卸载（组件从页面中消失）
  // 执行清理工作（比如：清理定时器等）
export default class funLive extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    // 作用：1.发送网络请求 2.dom操作
    // 进行DOM操作，只能在这里面才能获取
    let dd = document.getElementById('dd')
  }
  handleClick = () => {
    // 打豆豆函数
    this.setState({
      count: this.state.count + 1
    })
    // 演示强制刷新
    // this.forceUpdate()
  }
  render () {
    // 在这里不能调用setState()方法，调用setState()方法就会更新render，就会变成递归更新，死循环
    return (
      <div>
        {
          this.state.count > 3 ? <p>豆豆被打死了</p> : (<Counter count={this.state.count} id="dd"></Counter>)
        }
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}
class Counter extends React.Component {
  render() {
    return <h1 id="h1">吃饭睡觉打豆豆: {this.props.count}</h1>
  }
  componentDidMount() {
    this.timerId = setInterval(() => {
      console.log('定时器正在运行中')
    }, 500)
  }
  componentDidUpdate(prevProps) {
    // 更新时先走render再走componentDidUpdate()
    // 触发时机是组件更新(完成DOM渲染)完成后
    // 作用：
    //   1.发送网络请求
    //   2.DOM操作
    //   注意：如果setState()必须放在一个if条件中
    let h1 = document.getElementById('h1')
    // 在render中拿不到DOM元素，因为还没渲染完，componentDidUpdate()更新完以后，所以可以拿到DOM
    // 如果setState()必须放在一个if条件中， 因为：如果直接调用setState()更新会导致递归更新
    // ******if里面一般都是比较更新前后的props是否相同，来决定是否重新渲染组件
    // prevProps是上一次的props，当前的直接在函数内this.props就可以拿到
    if (prevProps.count !== this.props.count) {
      this.setState({})
      // 发送网络请求
    }
  }
  componentWillUnmount() {
    console.log('组件消失了触发了卸载组件操作')
    // 清理定时器
    clearInterval(this.timerId)
    // 同一个组件内的this.属性是可用的
  }
}