react数据管理之setState与Props

react数据管理之setState与Props

setState调用原理

setState 是 React 中用于更新组件状态(state)的方法。它的调用原理可以分为以下几个步骤:

  1. 状态的改变:当调用 setState 时,React 会将新的状态对象与当前状态对象进行合并(合并过程是浅合并)。React 不会直接修改当前状态对象,而是创建一个新的状态对象,以确保不直接修改状态,从而遵循 React 的不可变性原则。

  2. 触发重新渲染:一旦状态更新完成,React 会调用组件的 render 方法来重新渲染组件。在重新渲染过程中,React 会生成一个新的虚拟 DOM 树(Virtual DOM)。

  3. 虚拟 DOM 比较:React 会将新生成的虚拟 DOM 树与之前的虚拟 DOM 树进行比较,找出两者之间的差异(所谓的变更集合)。

  4. 局部更新:React 将变更集合中的差异应用到实际的 DOM 中,以更新用户界面。这是一个高效的过程,因为 React 仅更新了需要更新的部分,而不是重新渲染整个页面。

  5. 生命周期方法调用:在更新完成后,React 会调用适当的生命周期方法,如 componentDidUpdate,以便开发者可以执行一些操作,例如获取最新的 DOM 元素引用或执行副作用操作。

需要注意的是,由于 setState 是异步的,React 可能会将多次的 setState 调用合并成一次更新,以提高性能。这意味着在一个函数内多次调用 setState 可能不会导致多次重新渲染,而是在函数执行结束后一次性更新状态和重新渲染。

例如,以下代码中的多次 setState 调用会被合并成一次更新:

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

这个特性有时会导致不直观的行为,因此可以使用函数式的 setState 形式来确保状态更新是基于先前的状态的,而不受合并的影响:

this.setState((prevState) => ({ count: prevState.count + 1 }));

setState第二个参数

this.setState(newState, callback);

  • newState 是一个对象或函数,用于描述要更新的状态。这可以是一个新的状态值或一个函数,该函数接受前一个状态作为参数,返回新的状态。

  • callback 是一个可选的回调函数,它会在状态更新完成后被调用。

例如:

import React, { Component } from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0,};}handleIncrement = () => {this.setState({ count: this.state.count + 1 }, () => {// 回调函数,会在状态更新后被调用console.log('Count updated:', this.state.count);});}render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.handleIncrement}>Increment</button></div>);}
}

在上述示例中,当点击按钮并调用 handleIncrement 方法时,this.setState 用于增加 count 的值。回调函数通过 console.log 输出更新后的 count 值,这是在状态更新后被调用的。

回调函数的主要用途包括:

  • 执行需要在状态更新后立即执行的代码。

  • 执行副作用操作,如发起网络请求或操作 DOM。

  • 在状态更新后通知其他组件或触发其他操作。

props和state区别

props(属性)和 state(状态)是 React 中用于管理组件数据的两个不同概念,它们有以下主要区别:

  1. 来源
  • props:是由父组件传递给子组件的数据。父组件通过属性(props)将数据传递给子组件,子组件不可以直接修改这些数据,它们是只读的。

  • state:是组件内部维护的数据,用于描述组件的特定状态。组件可以自己管理和修改自己的状态。

  1. 可变性
  • props:是不可变的(immutable),子组件不能直接修改从父组件接收的 props。Props 用于从外部传递信息给组件,组件应该将 props 视为只读数据。

  • state:是可变的(mutable),组件可以通过调用 setState 方法来更新自己的状态。

  1. 管理
  • props:由父组件管理和传递,子组件只能访问和使用 props。

  • state:由组件自己管理和维护,组件可以在需要时修改自己的状态。

  1. 作用
  • props:用于传递数据给子组件,以控制子组件的行为和显示。

  • state:用于管理组件内部的状态,以响应用户交互、数据请求、或其他事件。

  1. 传递
  • props:通过组件的属性(props)传递给子组件。父组件可以通过属性来控制子组件的行为。

  • state:在组件内部声明和管理,可以通过 setState 方法来更新。

  1. 默认值
  • props:可以为 props 设置默认值,以防止未传递某个属性时出现错误。

  • state:可以在组件的构造函数中设置初始状态(state)的默认值。

  1. 更新
  • props:当父组件的 props 发生变化时,会触发子组件的重新渲染,子组件会接收新的 props。

  • state:当组件的状态(state)发生变化时,会触发组件的重新渲染,从而更新界面。

props改变后如何更新组件

class组件

  1. 父组件传递新的 props:父组件可以通过修改传递给子组件的 props 数据来引发子组件的更新。这可以通过在父组件中修改 props 值或通过父组件的状态变化来实现。

  2. 子组件的 componentWillReceiveProps(已废弃,不推荐使用)、getDerivedStateFromPropscomponentDidUpdate 方法:当子组件接收到新的 props 后,React 将触发这些生命周期方法之一,具体取决于 React 版本和组件实现。

  • 在 React 16.3 及更早版本中,可以使用 componentWillReceiveProps 生命周期方法来处理新的 props

  • 在 React 16.3 及以后的版本中,推荐使用 getDerivedStateFromProps 静态方法或 componentDidUpdate 来处理新的 props

  1. 在生命周期方法中更新组件状态或执行其他操作:在上述生命周期方法中,可以访问新的 props 和组件当前的状态(this.propsthis.state)以及之前的 propsstate。可以根据新的 props 数据来更新组件的状态,从而触发重新渲染。

例如,使用 getDerivedStateFromProps来处理新的 props:

class MyComponent extends React.Component {static getDerivedStateFromProps(nextProps, prevState) {// 检查新的 props,并根据需要更新状态if (nextProps.someProp !== prevState.someProp) {return {someState: nextProps.someProp,};}return null; // 不更新状态}render() {// 渲染组件return <div>{this.state.someState}</div>;}
}

或者componentDidUpdate:

import React, { Component } from 'react';class MyComponent extends Component {state = {count: 0,};componentDidUpdate(prevProps, prevState) {if (this.props.someProp !== prevProps.someProp) {console.log('Props changed:', prevProps.someProp, '->', this.props.someProp);}}render() {return <div>{this.props.someProp}</div>;}
}export default MyComponent;

React 16.3 及以后的版本,componentWillReceiveProps 生命周期方法已经被标记为已废弃,不再推荐使用。相反,推荐使用 getDerivedStateFromPropscomponentDidUpdate 来处理 props 的变化。

函数组件

在函数组件中,可以使用 React 的钩子函数来判断组件何时更新,特别是 useEffect 钩子。下面是如何在函数组件中判断组件何时更新:

  1. 使用 useEffect 钩子:使用useEffect 钩子可以函数组件中执行副作用操作,并且可以根据依赖项来判断何时触发这些副作用。可以将 props 或其他状态值作为依赖项,当这些依赖项发生变化时,useEffect 中的代码将被执行。
import React, { useEffect } from 'react';function MyComponent(props) {// 使用 useEffect 钩子来判断何时更新useEffect(() => {// 这里的代码在组件每次渲染后都会执行// 可以在这里根据新的 props 进行操作console.log('Props updated:', props.someProp);}, [props.someProp]); // 仅在 props.someProp 发生变化时执行return <div>{props.someProp}</div>;
}

在上面的示例中,我们将 props.someProp 作为 useEffect 的依赖项,因此当 props.someProp 发生变化时,useEffect 中的代码将被执行,从而可以判断组件何时更新。

  1. 使用 React.memo(可选):如果希望函数组件在特定 props 变化时才进行更新,并且不关心其他的 props,可以使用 React.memo 来包装函数组件。这将创建一个经过优化的组件,只有在指定的 props 发生变化时才会触发重新渲染。
import React from 'react';function MyComponent(props) {return <div>{props.someProp}</div>;
}// 使用 React.memo 包装组件,只有 someProp 变化时才重新渲染
export default React.memo(MyComponent);

本文使用 文章同步助手 同步

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/104312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT 网络编程 服务端 客户端 QTcpServer

服务端的创建 //创建服务端QTcpServer对象 server new QTcpServer(this);//设置服务端&#xff0c;端口&#xff0c;这里绑定的是主机的所有网卡&#xff0c; server->listen(QHostAddress::Any, 8080);//绑定连接信号与槽 connect(this->server, &QTcpServer::new…

[C++随想录] 继承

继承 继承的引言基类和子类的赋值转换继承中的作用域派生类中的默认成员函数继承与友元继承与静态成员多继承的结构棱形继承的结构棱形虚拟继承的结构继承与组合 继承的引言 概念 继承(inheritance)机制是面向对象程序设计使代码可以 复用的最重要的手段&#xff0c;它允许程序…

Design patterns--观察者模式

设计模式之观察者模式 代码示例 #ifndef OBSERVER_H #define OBSERVER_H#include <map>class Observer { public:Observer();virtual void update(std::map<int, double>) 0; }; #endif // OBSERVER_H#include "observer.h"Observer::Observer() {}#if…

玩转Linux Shell Terminal Tmux

一、Shell编程☘️ 1. Shell指令快捷操作 1. echo # 系统指令 $ echo $(pwd) # 对于系统自带的pwd&#xff0c;此处不能写echo $pwd# 自定义变量 $ foo$(pwd) $ echo $foo # 不同于pwd&#xff0c;对于自定义的foo&#xff0c;不能用$(foo)2. !! # 假设你先执行了以下原本…

python基于django的留学生服务管理平台

留学服务管理平台的用户是系统最根本使用者&#xff0c;按需要分析系统包括三类用户&#xff1a;学生、教师、管理员。这三类用户对系统的需求简要如下。技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vueCSSJavaScriptjQueryelementui 开发语言&#xff1a;Python 框架…

深度学习基础知识 给模型的不同层 设置不同学习率

深度学习基础知识 给模型的不同层 设置不同学习率 1、使用预训练模型时&#xff0c;可能需要将2、学习率设置方式&#xff1a; 1、使用预训练模型时&#xff0c;可能需要将 &#xff08;1&#xff09;预训练好的 backbone 的 参数学习率设置为较小值&#xff0c; &#xff08;2…

自己搭建的若依DEMO地址

自己搭建的若依demo地址 链接: link

深入了解Spring Boot Actuator

文章目录 引言什么是ActuatorActuator的底层技术和原理端点自动配置端点请求处理端点数据提供端点数据暴露 如何使用Actuator添加依赖访问端点自定义端点 实例演示结论 引言 Spring Boot Actuator是一个非常强大且广泛使用的模块&#xff0c;它为Spring Boot应用程序提供了一套…

需永远在线的游戏公司,如何在线替换开源存储?

小帅是一个酷爱游戏的玩家&#xff0c;他玩一款游戏已经很久了&#xff0c;始终乐在其中。 这款游戏风靡全球&#xff0c;在中国手游出海榜单中&#xff0c;长期位居榜首。 他不知道的是&#xff0c;就在他玩游戏的过程中&#xff0c;这款游戏的出品公司&#xff0c;其实已经…

​人机交互中的反馈与前馈

人机交互中的反馈和前馈&#xff0c;是指在用户与机器进行交互的过程中&#xff0c;人机二者对输入的信息做出回应的方式。 反馈&#xff1a;反馈是从机器到人的信息传递过程&#xff0c;主要用于告知用户他们的操作或请求的结果。当用户执行某个操作时&#xff0c;机器通过适当…

云原生之使用Docker部署ServerBee服务器监控工具

云原生之使用Docker部署ServerBee服务器监控工具 一、ServerBee介绍1.1 ServerBee简介1.2 ServerBee特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载serverbee镜像五、…

oracle、mysql、postgresql数据库的几种表关联方法

简介 在数据开发过程中&#xff0c;常常需要判断几个表直接的数据包含关系&#xff0c;便需要使用到一些特定的关键词进行处理。在数据库中常见的几种关联关系&#xff0c;本文以oracle、mysql、postgresql三种做演示 创建测试数据 oracle -- 创建表 p1 CREATE TABLE p1 (tx…

Java 序列化2

Java 序列化 目录 Java 序列化 序列化对象 反序列化对象 Java 提供了一种对象序列化的机制&#xff0c;该机制中&#xff0c;一个对象可以被表示为一个字节序列&#xff0c;该字节序列包括该对象的数据、有关对象的类型的信息和存储在对象中数据的类型。 将序列化对象写入文…

当你在 Tubi 是一位 Tech Lead

在过去&#xff0c;我们邀请了 Tubi 技术团队的许多资深工程师&#xff0c;听他们分享了作为资深工程师的一些故事。今天&#xff0c;我们将镜头转向那些在 Tubi 担任 Tech Lead 的工程师&#xff0c;他们选择了在独立开发之外&#xff0c;承担一定的技术管理工作&#xff1a; …

rust宏

宏看起来和函数很像&#xff0c;只不过名称末尾有一个感叹号 ! 。 宏并不产生函数调用&#xff0c;而是展开成源码&#xff0c;并和程序的其余部分一起被编译。 Rust宏和C不同&#xff0c;Rust的宏会展开为抽象语法树&#xff08;AST&#xff0c;abstract syntax tree&#xff…

SAP PP cs62 提示 输入更改号 - BOM 有历史需求

以上是业务操作人员的 账户 但是IT aLL 这边是warning 不是error 遂去查OSS suim 找 C_STUE_NOH权限对象 赋予权限后 解决了

Hadoop高可用集群(HA)一键启动脚本

高可用集群启动时&#xff0c;需要分别在每个节点上都执行zkServer.sh start启动zookeeper&#xff0c;这个过程比较麻烦&#xff0c;并且当我们节点增多时&#xff0c;这个过程无疑不增加了我们的工作量&#xff0c;因此我们可以写一个一键启动所有节点zookeeper的脚本 脚本实…

Excel 数学

SUM(C1:J1) SUM加總/加法公式&#xff1d;SUM(要加總的範圍)(加總快捷鍵 Alt ) SUM(Sheet1:Sheet4!A1) 跨頁加總公式SUM (分頁:分頁!各分頁要加總的儲存格)SUMIF(D1:D16,"大名",F1:F16) …

XXL-Job分布式任务调度框架-单机模式和分片模式执行任务4

一 调度模式分类 1.1 调度模式 1.单个任务&#xff1a;一个任务实例便可完成 a)单机单任务&#xff1a;单机模式下任何路由模式都只有一个实例执行 b)集群单任务&#xff1a;由路由策略(广播模式除外)选择其中一个实例完成 2.集群部署&#xff1a;每个实例都同时执行一部分…

【c++源码】老飞飞源码完整v15源码(包含数据库前端后端源文件)

老飞飞源码完整v15源码&#xff08;包含数据库前端后端源文件&#xff09;整套程序未加密&#xff0c;资源开放。对于研究游戏流程开发非常有帮助&#xff0c;程序仅供参考学习游戏开发流程。以及框架内容。 测试环境搭建 Visual Studio 2013 SQL Server 2008r Windows 10 和 1…