当前位置：首页 > news >正文

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

news 2024/9/25 14:50:14

1. 生命周期-概览

2. 生命周期-挂载阶段

3. 生命周期-更新阶段

4. 生命周期-卸载阶段

5. setState扩展-发现问题

6. setState扩展-更多用法

7. setState扩展-异步

1. 生命周期-概览

了解react类组件生命周期整体情况

大致步骤：

什么是生命周期
React类组件的生命周期整体概览
了解生命周期的意义

具体内容：

① 什么是组件生命周期

一个事物从创建到最后消亡经历的整个过程

② React类组件的生命周期整体概览，组件从创建到消耗的过程

React组件生命周期

③ 了解生命周期的意义

助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因
钩子函数为开发人员在不同阶段操作组件提供了时机

总结：

只有类组件才有生命周期，分为 挂载阶段 更新阶段 卸载阶段

2. 生命周期-挂载阶段

够说出组件的挂载阶段的钩子函数以及执行时机

大致步骤：

知道挂载阶段会执行那些函数，执行顺序
知道每个函数内一般可以做什么事
参考代码

具体内容：

① 知道挂载阶段会执行那些函数，执行顺序

② 知道每个函数内一般可以做什么事

钩子函数	触发时机	作用
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})// 页面展示 1this.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'))

总结：