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

React 组件生命周期函数的用法和示例代码

React 中的生命周期函数可以分为三个阶段:Mounting(挂载),Updating(更新)和 Unmounting(卸载)。每个阶段都有不同的函数,用于执行不同的操作。

  1. Mounting(挂载)

Mounting 阶段是组件实例化并插入到 DOM 中的阶段。在这个阶段中,有以下几个函数:

  • constructor():构造函数,用于初始化组件的 state 和绑定事件处理函数。
constructor(props) {super(props);this.state = { count: 0 };this.handleClick = this.handleClick.bind(this);
}
  • static getDerivedStateFromProps():当组件接收到新的 props 时,会调用此函数,返回一个对象来更新 state,或者返回 null 表示不更新 state。
static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.value !== prevState.value) {return { value: nextProps.value };}return null;
}
  • render():渲染组件到 DOM 中。
render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.handleClick}>Click me</button></div>);
}
  • componentDidMount():组件挂载到 DOM 后调用,通常用于发送网络请求、设置定时器等操作。
componentDidMount() {fetch('https://api.example.com/data').then(response => response.json()).then(data => this.setState({ data }));
}
  1. Updating(更新)

Updating 阶段是组件状态或属性更新时的阶段。在这个阶段中,有以下几个函数:

  • shouldComponentUpdate():当组件接收到新的 props 或 state 时,会调用此函数,返回 true 表示需要更新组件,返回 false 表示不需要更新组件。
shouldComponentUpdate(nextProps, nextState) {if (nextProps.value !== this.props.value || nextState.count !== this.state.count) {return true;}return false;
}
  • static getDerivedStateFromProps():同 Mounting 阶段的 getDerivedStateFromProps() 函数。
  • render():同 Mounting 阶段的 render() 函数。
  • componentDidUpdate():组件更新后调用,通常用于操作 DOM 或发送网络请求。
componentDidUpdate(prevProps, prevState) {if (prevProps.value !== this.props.value) {fetch(`https://api.example.com/data?value=${this.props.value}`).then(response => response.json()).then(data => this.setState({ data }));}
}
  1. Unmounting(卸载)

Unmounting 阶段是组件从 DOM 中移除的阶段。在这个阶段中,有以下几个函数:

  • componentWillUnmount():组件卸载前调用,通常用于清理定时器或取消网络请求等操作。
componentWillUnmount() {clearTimeout(this.timer);
}

需要注意的是,在 React 16.8 之后,引入了 Hooks 的概念,可以使用 useEffect 等 Hook 来代替生命周期函数。例如:

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这个例子中,useEffect 函数在组件挂载后和每次更新后都会调用,用于更新文档标题。

http://www.lryc.cn/news/335712.html

相关文章:

  • 【nginx运维】[emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)
  • 浏览器工作原理与实践--虚拟DOM:虚拟DOM和实际的DOM有何不同
  • arm工作模式、arm9通用寄存器、异常向量表中irq的异常向量、cpsr中的哪几位是用来设置工作模式以及r13,r14,15别名是什么?有什么作用?
  • 电脑上音频太多,播放速度又不一致,如何批量调节音频播放速度?
  • pe格式从入门到图形化显示(十)-扩展最后一个节
  • 设计模式之创建型模式---建造者模式
  • 如何从零开始训练一个语言模型
  • Python 设计一个监督自己的软件1
  • 商家转账到零钱权限开通操作攻略
  • 【DAC‘ 2022】Kite: A Family of Heterogeneous Interposer Topologies
  • 数据结构—堆
  • Kubernetes学习笔记8
  • [渗透利器]在线渗透测试工具箱?测评
  • rocketmq和rabbitmq总是分不清?
  • 利用Python ARM网关仓储物流AGV小车控制器
  • Transformer详解和知识点总结
  • 【Ubuntu】update-alternatives 命令详解
  • 数据结构之堆练习题及PriorityQueue深入讲解!
  • MySQL——Linux安装包
  • MySQL学习笔记(数据类型, DDL, DML, DQL, DCL)
  • Asible管理变量与事实——管理变量(1)
  • 【微服务】------微服务架构技术栈
  • 【SCI绘图】【小提琴系列1 python】绘制按分类变量分组的垂直小提琴图
  • docker------docker入门
  • 终极数据传输隐秘通道
  • Qt中的事件与事件处理
  • 中间件漏洞攻防学习总结
  • HarmonyOS开发实例:【分布式数据管理】
  • 蓝桥杯——运动会
  • 如何搭建APP分发平台分发平台搭建教程