react 操作setState，为什么要新创建一个副本，而不直接对原数据进行修改

最新推荐文章于 2024-08-18 23:34:05 发布
最新推荐文章于 2024-08-18 23:34:05 发布
阅读量1.1k 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29055201/article/details/90053554
版权

在React中，通过“有变化，就一定返回一个新对象；没变化，原对象不做变化直接返回”的原则，永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化，效率上比deepwatch高得多

wangliang_001
关注
专栏目录
react爬坑之PureComponent下setstate不触发render中状态变化的问题与相关知识。
zhangheli123456的博客
12-17 3361
react爬坑之PureComponent下setstate不触发render中状态变化的问题。 在学习react时出现情况: 明明改变了值, 但是就是不触发render。 下面贴代码 import React, { PureComponent } from 'react'; import CommentInput from '@/components/CommentInput'; import...
uimmutable:以不变的力量对组件进行React
04-29
1. **优化性能**：由于不可变数据不允许直接修改，每次修改都会返回一个新的副本，这看似会增加内存开销，但实际上，由于`Immutable.js`的结构优化，新副本在大部分情况下只需要更新部分数据，而不是复制整个结构。...
react-react面试题之对immutable的理解.zip
03-20
react面试题 react_react面试题之对immutable的理解
react为什么调用setState而不是直接改变state
精通前端技术，了解后端接口
04-30 379
实际上是创建了一个副本用来代替原来的。，这与直接修改原数据有着本质的区别。合并后放入状态队列，而不会立刻更新。本质是通过一个队列机制实现。，队列机制可以批量更新。
为什么调用 setState 而不是直接改变 state
最新发布
weixin_56187723的博客
08-18 394
在React中，调用setState方法而不是直接改变state的原因涉及多个方面，包括性能优化、状态管理的可预测性、React的设计理念等。
（文章也有问题，请自行跳过）react中的状态机每次setState都是重新创建新的对象，如需取值，应该在render中处理。
liudanyang_21的博客
08-14 264
demo如下 class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state = { a:11 }; this.a = this.state.a;//在创建该组件的时候就设置 this.a = 状态机.a } loadData(e) {//每次输入改变状态机 const value = e.target.value; this.setState({a:value}); } render
【react框架】在类式组件中，setState时尽量不要修改原数据的原因，还有不要直接修改state（知识相关shouldComponentUpdate、PureComponent）
庞囧的博客
06-20 607
这是一个很重要的知识点，如果不加以注意，很有可能会出现bug，别问我为什么知道哈哈。个人觉得这里是react设计的不太好的地方，不过应该也是有原因的，我们只需要记住setState时尽量不要修改原数据就好，下面来看看原因。UI纯粹、数据简单、场景固定不再包含子组件如果一上来就考虑做成PureComponent，日后拓展必然会换掉。
React的setState机制
创战记
05-07 514
React中最常用，控制状态的API，要属setState但是，有些时候，setState有时会产生意料之外的结果，让人摸不到头脑。这不得不说setState的一些秘密。为什么要有setState首先，this.state.demo = 1，也是可以修改state的，但是，为什么要用setState呢？这和生命周期有关，也就是说，setState会重新触发render渲染，直接赋值则不会。也就是，...
react更新state的时候要返回一个全新的引用或者值
weixin_34080903的博客
01-30 648
react创建新的状态对象的关键是，避免直接修改原对象的方法，而是返回一个新对象。也就是说react的state里面的引用类型，更改时必须赋予一个新对象，也就是引用地址必须要变。 为什么React推荐组件的状态是不可变对象呢？一方面是因为不可变对象方便管理和调试。另一方面是出于性能考虑，当对象组件状态都是不可变对象时，我们在组件的shouldComponentUpdate方法中，仅需要比较状态的引...
06-react-setState.md
03-31
1. **使用不可变数据**：当你更新状态时，应该创建状态的新副本，并在副本上进行修改，而不是直接修改原有的状态对象。这有助于React进行正确的性能优化。 2. **合并vs不合并**：理解`setState`合并状态的机制对于...
一份关于React框架的框架教程！！！！！
06-16
- **创建一个新的React应用程序**： - 使用`create-react-app`脚手架可以快速搭建一个React项目。 - 命令：`npx create-react-app my-app`或`yarn create react-app my-app`。 - **了解React项目的目录结构**： ...
setState详解与React性能优化
weixin_44763882的博客
04-06 492
setState的同步和异步 1.为什么使用setState 开发中我们并不能直接通过修改 state 的值来让界面发生更新： 因为我们修改了 state 之后, 希望 React 根据最新的 Stete 来重新渲染界面, 但是这种方式的修改 React 并不知道数据发生了变化 React 并没有实现类似于 Vue2 中的 Object.defineProperty 或者 Vue3 中的Proxy的方式来监听数据的变化 我们必须通过 setState 来告知 React 数据已经发生了变化 疑惑:
不想改变列表，可以创建副本修改
qq_41969284的博客
04-09 469
def show_magicians(magicians): for magician in magicians: print(magician)def make_great(new_magician,magicians): while magicians: new_magician = magicians.pop() great_magician = 'The Great ' + new_...
【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？
2401_84139610的博客
04-16 548
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！一个人可以走的很快，但一群人才能走的更远！
React中的State保留和重置
qq_63135173的博客
11-09 294
当在React中处理组件的state时，理解如何在UI树中保留和重置state是非常重要的。这有助于确保组件的状态在不同渲染中得到正确管理。
【React全解3】React.useState原理详解，一次性搞懂useState
热门推荐
qq_44906900的博客
12-14 1万+
目录 useState简介 useState的简单使用 手写实现useState 总结 参考 一、useState 简介 返回一个有状态值和一个函数来更新它。在初始渲染期间，返回的状态（状态）与作为第一个参数（initialState）传递的值相同。setState 函数用于更新状态。它接受一个新的状态值，并排队等待重新渲染该组件。 在后续重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。 注意： React 保证 setState 函数身份是稳定的，并且在重新渲染时
React解密：React中setState的运行原理是什么
lee前端技术站
08-26 1193
我们知道react中更新state的时候，会调用setState方法。那么调用setState方法为什么就能更新组件的state呢，其原理又是什么呢？下面我们就来讲讲setState的原理： setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。 setState(stateChange | updater [, callback]) .
【React】深入理解setState
qq_42996469的博客
04-25 840
setState为什么是异步的？ 一般使用setState()时，React并不会保证state会立刻更新，这些操作将延迟批量调用。 这两个词很重要，批量就是延迟的原因。 事实上，我们应该将setState() 视为更新组件的请求而不是立即更新的命令，这一点与Vue不同，不论是Vue2的Object.definedProperty还是Vue3的Proxy，都拦截了对象的setter，所以在数据被改变时会被立刻拦截并命令组件开始更新。 为什么React要设计成这样？为了性能（并不是说Vue性能不好，只是框架思
React 中的useState 和 setState 的执行机制
p1967914901的博客
02-07 4683
React 中的useState 和 setState 的执行机制 useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。 它们是同步的还是异步的？ setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步
react为什么不能直接操作子组件，而要触发子组件的方法来改变子组件
04-22
的状态？ React采用单向数据流（One-Way Data Binding），意味着数据只能从父组件流向子组件，子组件不能直接操作父组件的数据。因此，在React中，我们需要通过属性传递父组件的状态到子组件中，并且在子组件中通过调用父组件传递的方法来改变父组件的状态。这种方式可以保证React数据流的单向性，同时也可以避免数据的混乱和不可控。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值