react生命周期

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

<!-- 2. 创建时（挂载阶段） -->
constructor()   render()   componentDidMoun

constructor  创建组件时，最先执行
    1. 初始化state
    2. 为事件处理程序绑定this

render  每次组件渲染都会触发   渲染UI（注意：不能调用setState()）

componentDidMount  组件挂载（完成DOM渲染）后  
  1. 发送网络请求
  2. DOM操作

    class App extends React.Component {
        constructor(props) {
          super(props)
          // 初始化state
          this.state = {
            count: 0
          }
          // 处理this指向问题
          console.warn('生命周期钩子函数： constructor')
        }

        // 1 进行DOM操作
        // 2 发送ajax请求，获取远程数据
        componentDidMount() {
          // axios.get('http://api.....')
          // const title = document.getElementById('title')
          // console.log(title)
          console.warn('生命周期钩子函数： componentDidMount')
        }
    
        render() {
          // 错误演示！！！ 不要在render中调用setState()
          // this.setState({
          //   count: 1
          // })
          console.warn('生命周期钩子函数： render')
        
          return (
            <div>
              <h1 id="title">统计怪兽被打的次数：</h1>
              <button id="btn">打怪兽</button>
            </div>
          )
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))

<!-- 3. 更新时（更新阶段） -->
执行时机：1. setState()  2. forceUpdate()  3. 组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
执行顺序：render()   componentDidUpdate()

render   每次组件渲染都会触发 渲染UI（与 挂在阶段 是同一个render）
componentDidUpdate   组件更新（完成DOM渲染）后
    1 发送网络请求
    2 DOM操作
    注意：如果要setState() 必须放在一个if条件中

    class App extends React.Component {
        constructor(props) {
          super(props)
          // 初始化state
          this.state = {
            count: 0
          }
        }
      
        // 打怪兽
        handleClick = () => {
          // this.setState({
          //   count: this.state.count + 1
          // })
      
          // 演示强制更新：
          this.forceUpdate()
        }
      
        render() {
          console.warn('生命周期钩子函数： render')
          return (
            <div>
              <Counter count={this.state.count} />
              <button onClick={this.handleClick}>打怪兽</button>
            </div>
          )
        }
      }
      
      class Counter extends React.Component {
        render() {
          console.warn('--子组件--生命周期钩子函数： render')
          return <h1>统计怪兽被打的次数：{this.props.count}</h1>
        }
        
        // 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中
        // 因为：如果直接调用 setState() 更新状态，也会导致递归更新！！！
        componentDidUpdate(prevProps) {
          console.warn('--子组件--生命周期钩子函数： componentDidUpdate')
      
          // 正确做法：
          // 做法：比较更新前后的props是否相同，来决定是否重新渲染组件
          console.log('上一次的props：', prevProps, ', 当前的props：', this.props)
          if (prevProps.count !== this.props.count) {
            // this.setState({})
            // 发送ajax请求的代码
          }
      
          // 错误演示！！！
          // this.setState({})
      
          // 获取DOM
          // const title = document.getElementById('title')
          // console.log(title.innerHTML)
        }
      }
    ReactDOM.render(<App />, document.getElementById('root'))

// 4. 卸载时（卸载阶段）
componentWillUnmount  组件卸载（从页面中消失）   执行清理工作（比如：清理定时器等

  class App extends React.Component {
    constructor(props) {
      super(props)
      // 初始化state
      this.state = {
        count: 0
      }
    }
    // 打怪兽
    handleClick = () => {
      this.setState({
        count: this.state.count + 1
      })
    }
    render() {
      return (
        <div>
          {this.state.count > 3 ? (
            <p>怪兽被打死了~</p>
          ) : (
            <Counter count={this.state.count} />
          )}
          <button onClick={this.handleClick}>打怪兽</button>
        </div>
      )
    }
  }

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

    render() {
      return <h1>统计怪兽被打的次数：{this.props.count}</h1>
    }

    componentWillUnmount() {
      console.warn('生命周期钩子函数： componentWillUnmount')
      // 清理定时器
      clearInterval(this.timerId)
    }
  }
  ReactDOM.render(<App />, document.getElementById('root'))