React学习笔记（四）——React 组件生命周期-EW帮帮网

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意：不能调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后	1. 发送网络请求 2.DOM操作

③ 参考代码

import { Component } from 'react'

export default class App extends Component {
  constructor () {
    super()
    console.log('1. constructor执行')
  }
  componentDidMount () {
    console.log('3. componentDidMount执行')
  }
  render() {
    console.log('2. render执行')
    return <div>App组件</div>
  }
}

总结：

组件挂载阶段，顺序执行 constructor render componentDidMount 三个函数

3. 生命周期-更新阶段

能够说出组件的更新阶段的钩子函数以及执行时机

大致步骤：

知道更新阶段会执行那些函数，执行顺序
知道何时触发更新阶段
知道触发的钩子函数里可以做些什么
参考代码

具体内容：

① 更新阶段会执行那些函数，执行顺序

② 何时触发更新阶段

setState()
forceUpdate() 强制组件更新
组件接收到新的props（实际上，只需要父组件更新，子组件就会重新渲染）

③ 钩子函数里可以做什么

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与挂载阶段是同一个render）
componentDidUpdate	组件更新（完成DOM渲染）后	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

④ 参考代码

import { Component } from 'react'

class Child extends Component {
  render() {
    return <h1>统计豆豆被打的次数：</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }
	
	handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidUpdate() {
    console.log('2. componentDidUpdate执行')
  }

  render() {
    console.log('1. render执行')
    return (
      <div>
        <Child />
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

总结：

组件更新会触发 componentDidUpdate 钩子函数

4. 生命周期-卸载阶段

能够说出组件的销毁阶段的钩子函数以及执行时机

大致步骤：

什么时候触发卸载
卸载阶段执行那些钩子函数，一般做什么事情
参考代码
演示清理工作

具体内容：

① 什么时候触发卸载？

在组件被移除的时候（消失）触发卸载阶段

② 卸载阶段执行那些钩子函数，一般做什么事情

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

③ 参考代码

import { Component } from 'react'

class Child extends Component {
  componentWillUnmount () {
    console.log('componentWillUnmount执行')
  }
  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }
	
	handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        { this.state.count < 5 && <Child count={this.state.count} />}
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

总结：

组件卸载阶段执行 componentWillUnmount, 可以清理全局事件、定时器等。

5. setState扩展-发现问题

发现setState是“异步”的，多次setState会合并。

大致步骤：

理解setState是“异步”的，理解setState会合并更新
React这么处理的好处是什么？

具体内容：

理解setState是“异步”的，理解setState会合并更新
- 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）
- 如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面
- 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新
React这么处理的好处是什么？
- “异步” 更新，或者做延时更新，为了等所有操作结束后去更新
- 合并更新，是将多次setState合并，然后进行更新
- 都是为了提高渲染性能

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState({count: this.state.count+100})
    this.setState({count: this.state.count+1})
    console.log(this.state.count)  // 打印0
  }
  render() {
    console.log('render')
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>体现“异步”和合并</button> 
      </div>
    )
  }
}

总结：

setState函数具有 “异步” 和合并的特点，目的为了提高渲染性能。

6. setState扩展-更多用法

掌握setState的更多用法，让数据串联更新，等待数据页面更新。

大致步骤：

多次使用setState让数据串联使用的写法
调用setState后页面更新后执行逻辑写法

具体内容：

① 多次使用setState让数据串联使用的写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // 页面展示 1
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    // 页面展示 3
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState串联更新数据</button> 
      </div>
    )
  }
}

② 调用setState后页面更新后执行逻辑写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    },()=>{
       console.log('更新后：', this.state.count)  // 打印：1
    })
    console.log('未更新：', this.state.count)  // 打印：0
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState更新后执行逻辑</button> 
      </div>
    )
  }
}

总结：

使用 setState((prevState) => {}) 语法，可以解决多次调用状态依赖问题
使用 setState(updater[, callback]) 语法，在状态更新（页面完成重新渲染）后立即执行某个操作

7. setState扩展-异步

能够说出setState到底是同步的还是异步

大致步骤：

了解为啥会出现“异步”现象

具体内容：

setState本身并不是一个异步方法，其之所以会表现出一种“异步”的形式，是因为react框架本身的一个性能优化机制
React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {
  state = {
    count: 0,
    monney: 10
  }
  render() { 
    return (
      <div>
        <h1>我是app根组件------------{ this.state.count }---------{ this.state.monney}</h1>
        <button onClick={this.addCount}> + 1</button>
      </div>
    )
  }
  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      monney: this.state.monney + 11
    })
    this.setState({
      count: this.state.count + 2
    })
    // 多次调用了 setState 方法， 相当于只执行了一次
    // this.setState({
    //   count: this.state.count + 2,
    //   monney: this.state.monney + 11
    // })
    console.log(this.state.count)
  }
}

ReactDOM.render(<App></App>, document.querySelector('#root'))

总结：

在react类组件中，多次的setState并不会立刻执行，而是合并成一个来执行。

React学习笔记（四）——React 组件生命周期

1. 生命周期-概览

2. 生命周期-挂载阶段

3. 生命周期-更新阶段

4. 生命周期-卸载阶段

5. setState扩展-发现问题

6. setState扩展-更多用法

7. setState扩展-异步

网站公告

今日签到

热门文章

最新发布