React 函数式更新 和 数据拷贝更新对比

devtools/2024/11/14 12:21:20/
// 函数方式更新const handleSubmit = (title) => {setTodoList((currentTodoList) => [{ title, status: new Date().toDateString() },...currentTodoList,]);};
// 使用数组副本更新const handleSubmit = (title) => {let list = [...todoList];list.unshift({ title, status: new Date().toDateString() });setTodoList(list);};

函数式更新

解释: 
1:函数式更新:你传递给 setTodoList 的不是一个新的数组,而是一个 更新函数,它接受 currentTodoList(当前的 todoList)作为参数,并返回一个新的数组
2: 这种方式 确保了正确的状态更新,特别是在有多个 setState 调用时,React 会确保你的更新是基于最新的状态进行的;优点:
1: 可靠性:React 状态更新是异步的,使用函数式更新可以确保你每次都能使用最新的状态值,避免了因 todoList 状态的异步更新而产生的问题
2: 性能:React 会为每个状态更新创建一个新的引用,这样可以确保 React 正确地重新渲染组件。
适用场景:
1: 当你需要依赖当前的状态来计算新状态时,使用这种方式是最安全的。
2: 当你在函数内部访问的是当前的最新状态,并且可能有多个状态更新并发执行时,函数式更新可以避免不必要的错误

第二种写法:使用 数组副本

解释:
1:你首先通过 let list = [...todoList] 创建了 todoList 的副本,然后对副本进行修改,最后通过 setTodoList(list) 更新状态。
2: 浅拷贝:[...todoList] 使用展开运算符创建了 todoList 数组的浅拷贝,因此你修改的是副本,而不是原始的 todoList 数组。优点:
1: 直观:这种方式比较直接,特别适用于简单的更新逻辑,代码简洁。
2: 适用于简单场景:当你确认状态更新没有其他依赖时,这种方式能快速且容易理解。缺点:
1: 异步更新问题:由于 React 的 setState 是异步的,如果你有多个并发的状态更新,todoList 的值可能并不是最新的,这可能导致状态不一致。
2 举例:假如你在 todoList 更新的同时还调用了 setTodoList,更新的 todoList 并不总是最新的。多个 setState 操作可能会混淆状态。适用场景:
适合简单的状态更新,且确认状态更新之间没有竞态条件(例如,多个 setTodoList 调用之间没有依赖关系)时。

区别总结

在这里插入图片描述

最佳实践

1:函数式更新 是 React 推荐的方式,尤其是在依赖于当前状态的更新场景下,它能确保状态更新的正确性和一致性,避免竞态条件。
2: 浅拷贝 方式可以在简单的场景中使用,但如果在复杂的状态管理中使用可能会带来问题,特别是在有多个并发更新的情况下。
所以,通常情况下,推荐使用 函数式更新,尤其是在需要依赖当前状态的复杂场景中。

http://www.ppmy.cn/devtools/133591.html

相关文章

【Linux】的初次相遇,这些必备的基本知识和基本指令你知道吗?

【Linux】的初次相遇,这些必备的基本知识和基本指令你知道吗? 什么是操作系统什么是文件什么是路径01. ls 指令02. pwd命令03. cd 指令04. touch指令05.mkdir指令(重要):06.rmdir指令 && rm 指令(重…

Redis-07 Redis哨兵

操作实现 此处应该6台虚拟机,其中3台是哨兵,但因为内存限制没有那么多 1.将sentinel文件拷贝到/myredis目录下 2.sentinel.conf文件重要参数 新建配置文件sentinel26379.conf sentinel26380.conf sentinel26381.conf bind 0.0.0.0 daemonize yes pr…

2024下半年自学黑客(网络安全)

CSDN大礼包:👉 基于入门网络安全/黑客打造的:👉黑客&网络安全入门&进阶学习资源包 前言 什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&…

UnoCss 安装

UnoCss 安装 前言 UnoCss,作为一个灵活且高效的原子化CSS引擎,为开发者提供了无与伦比的样式定制能力。在Vue与Vite构建的现代化前端项目中,UnoCss以其独特的即时生成和零配置使用的特点,迅速赢得了开发者的青睐。本文将详细介绍…

用 PHP或Python加密字符串,用iOS解密

可以使用对称加密算法(如 AES)来加密和解密字符串。对称加密适合这种跨平台加密解密的需求,因为可以使用相同的密钥和算法在不同的编程语言和系统之间进行加密和解密。 下面展示如何使用 Python 或 PHP 进行加密,然后用 iOS (Swi…

【bat】自动生成指定层级文件夹

🌅 一日之计在于晨,启航新程 ⭐ 本期特辑:自动生成指定层级文件夹 🏆 系列专题:BAT脚本工坊 文章目录 前言批处理脚本介绍脚本执行过程总结 前言 在日常的计算机使用过程中,我们经常需要创建文件夹来组织和…

WPF 应用程序中使用 Prism 框架时,有多种方式可以注册服务和依赖项

Prism 提供了更多的注册方式,适应不同的需求和场景。下面我会全面列出 IContainerRegistry 提供的所有常见注册方式,并附带相应的示例。1. 注册单例(Singleton) 注册单例类型服务,整个应用生命周期内只会创建一个实例&…

Kafka-Eagle的配置——kafka可视化界面

通过百度网盘分享的文件:kafka-eagle-bin-2.0.8.tar.gz 链接:https://pan.baidu.com/s/1H3YONkL97uXbLTPMZHrfdg?pwdsltu 提取码:sltu 一、界面展示 二、软件配置 1、关闭kafka集群 kf.sh stop 2、将该软件上传到/opt/modules下 cd /opt…