react为什么调用setState而不是直接改变state

最新推荐文章于 2024-04-16 04:41:50 发布
最新推荐文章于 2024-04-16 04:41:50 发布
阅读量339 收藏 1
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72603435/article/details/130452385
版权

1性能问题：.    React提倡不可变性，通过setstate()修改state实际上是创建了一个副本用来代替原来的state，这与直接修改原数据有着本质的区别。

2机制：.    setState本质是通过一个队列机制实现state更新的。 执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state

TechWhiz-晓同
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react学习笔记之state以及setState的使用
11-27
React为了优化性能，会批量处理多个setState()调用，这意味着在调用setState()之后立即访问this.state可能无法获取到最新的值，因为状态更新是异步的。 setState()的第一个参数可以是两种类型：Object或Function。...
React解密：React中setState的运行原理是什么
lee前端技术站
08-26 1169
我们知道react中更新state的时候，会调用setState方法。那么调用setState方法为什么就能更新组件的state呢，其原理又是什么呢？下面我们就来讲讲setState的原理： setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。 setState(stateChange | updater [, callback]) .
为什么调用setState而不是直接改变state
子玉的博客
11-19 161
如果传递一个对象，它会与当前状态进行浅合并。1. **异步更新**：`setState()`方法是异步执行的，React会对多次连续的`setState()`调用进行合并和优化，从而提高性能。4. **触发生命周期方法**：通过`setState()`方法更新状态，会触发组件的生命周期方法，例如`componentDidUpdate()`，从而可以在更新完成后执行其他逻辑操作。在React中，通过调用`setState()`方法来更新组件的状态是推荐的做法，而直接修改`state`属性是不被建议的。
【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？
最新发布
2401_84139610的博客
04-16 487
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！一个人可以走的很快，但一群人才能走的更远！
React中的setState使用细节和原理解析
m0_71485750的博客
10-01 1万+
例如一个数据message有被展示到页面中, 并且传入到子组件中展示, 此时通过setState修改message, 如果是同步的修改完成后, message的值就被改变了;并且修改完成的后续代码有报错的情况, 在这个时候再进行调试的时候, 会出现页面中message的值被修改掉, 而传入到子组件的message并没有修改的情况, 导致于state和props中的数据不一致。而React中的做法也是如此, 在一个时间段中, 会获取多个更新, 再将多个更新放入一个任务队列中, 再对任务队列进行批处理;
React系列： setState以及setState更新机制
haoyanyu_的博客
09-27 2131
在React中，数据是自顶向下单向流动的，即从父组件到子组件。这样组件之间的关系变得简单并且可预测。 state和props是React组件中最重要的改建，如果顶层组件初始化props, 那么React会向下遍历整颗组件树，重新尝试渲染所有的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内部改变。 当组件内部使用内置方法setState时，该组件就会尝试重新渲染，因为我们改变...
【react框架】在类式组件中，setState时尽量不要修改原数据的原因，还有不要直接修改state（知识相关shouldComponentUpdate、PureComponent）
庞囧的博客
06-20 587
这是一个很重要的知识点，如果不加以注意，很有可能会出现bug，别问我为什么知道哈哈。个人觉得这里是react设计的不太好的地方，不过应该也是有原因的，我们只需要记住setState时尽量不要修改原数据就好，下面来看看原因。UI纯粹、数据简单、场景固定不再包含子组件如果一上来就考虑做成PureComponent，日后拓展必然会换掉。
（文章也有问题，请自行跳过）react中的状态机每次setState都是重新创建新的对象，如需取值，应该在render中处理。
liudanyang_21的博客
08-14 258
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回调函数
08-27
首先，setState函数的语法是：`setState(updater[, callback])`，其中`updater`是要改变的state对象，`callback`是state导致的页面重新渲染的回调函数，相当于`componentDidUpdate`生命周期函数。这个回调函数可以在...
深入掌握 react的 setState的工作机制
08-29
这意味着，我们不能直接改变已有组件的外观，而只能通过更改组件的 props 或者更新组件的 state。在 React 项目的代码中，我们操作最多的就是 this.setState 方法。 setState 的调用形式 setState 有两种调用形式...
深入研究React中setState
08-28
"深入研究React中setState" React作为一门前端框架，虽然只是focus在MVVM中的View部分，但还是实现了View和model的绑定。修改数据的同时，可以实现View的刷新。这大大简化了我们的逻辑，只用关心数据流的变化，同时...
react 操作setState，为什么要新创建一个副本，而不直接对原数据进行修改
qq_29055201的博客
05-10 1138
在React中，通过“有变化，就一定返回一个新对象；没变化，原对象不做变化直接返回”的原则，永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化，效率上比deepwatch高得多 ...
setState详解
热门推荐
sysuzhyupeng的博客
03-18 4万+
我们都知道，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UIsetState异步更新React初学者常会写出this.state.value = 1这样的代码，这是完全错误的写法。注意：一定不要直接修改this.state setState
深入理解setstate
weixin_43623808的博客
07-14 784
本文会向你介绍以下内容： 如何使用 setState 不能直接修改 State setState() setState 可能是异步更新 setState 的合并 如何使用 setState 在介绍 setState 之前，我们先来看一个 setState 的案例，了解一下是如何使用的。 我们来展示一个使用案例，当点击一个 改变文本 的按钮时，修改界面前显示的内容： ![](https://img-blog.csdnimg.cn/img_convert/15bb6dff9a2bfc1f1aac45ea35
为什么React不允许直接修改state
qq_45643079的博客
08-09 1844
为什么一定要写摘要？就做个分享而已，还评个啥劣质文章不给推荐？有必要吗？
React-修改状态
weixin_44486539的博客
02-13 1062
在 React 中不能直接修改组件的状态，需要通过 setState() 来进行修改 语法： setState(updater[, callback]) updater 更新器 callback 更新后执行的回调函数 修改状态 比如想要将 state 中的 content 值修改为 ‘香香’ state = { content: '大熊' } 通过直接修改的方式并不能触发视图的更新: ...
React当中，为什么明明调用了setState()，state也发生了变化，就是没有重新渲染，更新界面？
qq_35175413的博客
06-10 2万+
以前没用过react，改别人的代码，发生了这个问题。原来是原代码中有shouldComponentUpdate(nextProps, nextState)这个方法。这个方法会判断发生什么样的state改变才进行重新渲染。return true的时候重新渲染，false则不变。详情可自行搜索。...
为什么调用react setState方法不会立即改变状态？
CHCH998的博客
08-14 645
I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange
我不再使用React.setState的3个原因
smk108的博客
12-24 2691
从几个月前开始，我在新开发的React组件中不再使用setState。我并没有停止使用局部组件状态，只是不再用React来管理这些state，这是很不错的一个选择。 对于React初学者来说，使用setState是比较棘手的。即使是经验丰富的React开发者，在使用React本身的状态管理机制时，也经常会出现一些比较微妙的bug，例如： 忘记setState是异步的导致的bug：控制台的输...
react为什么不推荐更改state的值
05-18
React 不建议直接更改 state 的值，而是通过调用 `setState()` 方法来更新 state。这是因为直接更改 state 的值可能会导致 React 无法正确地更新组件和 DOM，从而引发一系列问题，包括但不限于： 1. 无法触发组件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TechWhiz-晓同

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值