为什么在React中一定要使用setState来更新数据？

最新推荐文章于 2024-06-22 21:21:09 发布
最新推荐文章于 2024-06-22 21:21:09 发布
阅读量125 收藏
点赞数 1
文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47121832/article/details/139865172
版权

为什么在React中一定要使用setState来更新数据？

因为我们修改了State后，我们希望看到React更具最新的State来重新渲染界面，但是这种方式修改的React并不知道数据发送的改变；

在React中并没有使用像Vue3或者Vue2中的数据劫持来监听数据的变化；

因此我们必须使用setState来告知React，我们的数据发生改变了你需要更新视图了

这时你可以会有一个疑惑，我们并没有引入setState我们为什么能调用它呢？

因为它被写在了Component的原型上面
在这里插入图片描述

我叫汪枫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入研究React中setState
08-28
在上面的代码中，我们可以看到，setState函数将partialState传递给updater对象的enqueueSetState方法，然后在componentDidMount生命周期函数中，我们使用setState函数更新状态，并在setTimeout函数中更新状态。...
react学习笔记之state以及setState的使用
11-27
在react中通过 state 以及 setState() 来控制组件的状态。 state state 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,...
React 中setState更新state何时同步何时异步？
知之为知之，不知为不知
09-01 816
React中constructor是唯一可以初始化state的地方，也可以把它理解成一个钩子函数，该函数最先执行且只执行一次。 更新状态不要直接修改this.state。虽然状态可以改变，但不会触发组件的更新。 应当使用this.setState()，该方法接收两种参数：对象或函数。 对象：即想要修改的state 函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是sta
react获取数据后使用setState后页面没有重新渲染的原因及解决办法
热门推荐
吴小迪的博客
06-30 5万+
笔者之前在项目开发的过程中遇到过这种问题，就是当我触发某事件再次获取数据，使用this.setState去更改数据，可是页面没有变化，但是数据确实是已经改了的，笔者特意在this.setState的回调函数里面输出确认了一下。 后来又仔细的看了看，是因为重新获取回来的数据id有重复的，所以react就认为是有问题的，就不会给重新渲染页面，解决办法就是把你要获取的数据的id重新命名一下，或者说过滤数...
react中使用 setState 修改数据
yinge0508的博客
01-12 1420
import React, { Component } from 'react' export default class Like extends Component { constructor() { super(); this.state = { isLike: false, isLike2: false, } } // 点击事件 handleLikeBtn = () => { // react 里修改数据用setS.
React中setState后发⽣了什么
weixin_44714345的博客
04-24 988
在React中，setState是一个用于更新组件状态（state）的函数。当调用setState后，React将执行以下操作：setState可以接受一个对象作为参数，该对象包含了要更新的状态。如果当前状态与传入的对象有相同的属性，那么这些属性将被更新；如果不存在相同的属性，则添加新的属性到状态中。调度更新：一旦状态被更新，React会调度组件进行重新渲染。这个过程是异步的，意味着setState不会立即导致组件的重新渲染。React可能对多个setState调用进行批处理，以优化性能。
react为什么调用setState而不是直接改变state
精通前端技术，了解后端接口
04-30 327
实际上是创建了一个副本用来代替原来的。，这与直接修改原数据有着本质的区别。合并后放入状态队列，而不会立刻更新。本质是通过一个队列机制实现。，队列机制可以批量更新。
关于react中setState赋值后数据没有及时更新
qinminghao58的博客
11-15 2432
原来的代码是这样的，但是传递出来的之后在父组件内打印发现两个值并没有更新，查阅资料发现需要在setState这个方法内再写一个箭头函数。这次遇到了在一个点击事件中，需要setState赋值后将变量传给父组件。之前使用setState重新赋值后，在render中直接渲染到页面上。这样可以直接在setState重新赋值后就可以立马调用方法.
React 中 setState() 为什么是异步的？
weixin_43869982的博客
01-10 397
1、setState执行过程是复杂的，大致过程为更新state、创建虚拟dom、diff算法对比差异最终渲染新的UI。若为同步执行，每次更新这一过程都会重新执行一次，无疑会造成性能问题。异步更新会将多个异步合并成一次，这样设计较为合理。 2、如果同步更新，render函数并没有重新执行，那么就会造成state和props数据不一致。 ...
React setState 是同步更新还是异步更新？
公众号：前端充电宝
12-31 1580
目录1. setState 基本使用2. setState 同步场景3. 调用 setState 发生了什么（1）setState（2）enqueueSetState（3）enqueueUpdate（4）batchingStrategy4. 总结 1. setState 基本使用 组件除了可以接收外界传递的状态外，还可以拥有自己的状态，并且这个状态也可以通过 setState 来进行更新。setState 用于变更状态，触发组件重新渲染，更新视图 UI。其语法如下： setState(updater, ca
React中setState什么时候是同步的，什么时候是异步的？怎么获取同步后的数据？
sunnyjingqi的博客
03-11 1001
React中setState什么时候是同步的，什么时候是异步的？
在React中，setState更新操作后没有更新state中的数据的问题。为什么setState后，没有更新到state中的值
weixin_46990115的博客
09-17 5430
问题描述：经常会看到这样一个问题，明明已经调用setState的方法了，但是state的值不改变，或者是数据改变了，但是没有重新渲染。找到了几个解决办法，记录一下。思路一、可能是setState(value)中的value值的引用地址与state的一样 就比如最常用遇到的，对象或者数组的更新操作可能失败(最常遇到) 可能是这样的:** […b]这是一个新的数组，然后扩展b数组的元素到新数组，引用地址已经不一样了 所以总结：善用…扩展运算符思路二、可能调用这个set方法的onClick点击事件，被父元素的
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，...React中setState回调函数是非常重要的机制，需要我们在使用时格外小心和注意。
在React 组件中使用Echarts的示例代码
08-28
在 React 组件中使用 Echarts 的示例代码是非常重要的，特别是在需要可视化数据的时候。Echarts 是一个功能强大且灵活的数据可视化库，它提供了多种类型的图表，包括柱状图、折线图、饼状图等。下面将详细介绍在 ...
React的form表单自定义校验规则
chen_ac的博客
06-18 360
React的form表单自定义校验规则
React 中的 ErrorBoundary
hawk2014bj的博客
06-18 680
React 框架中通过 getDerivedStateFromError 方法进行异常处理，项目开发可以自定义一个类组件并实现该方法进行组件异常处理。
React逻辑复用的方式都有哪些
最新发布
CreatorRay的博客
06-22 254
在日常开发中，能够优雅的复用组件和逻辑，是优秀开发者的职责。在react中，复用逻辑的方式有很多，可以适用于不同的业务场景。今天说三个比较有代表性的，Render Props、HOC、Hooks
gradio快速入门 — Reactive Interfaces
专注于Python编程技术的分享与交流，致力于帮助开发者提升编程技能，解决实际问题，探索Python的无限可能。
06-20 249
Gradio自动刷新演示。
（七）React：useEffect的理解和使用
二进制杯莫停的博客
06-22 503
useEffect是一个React Hook函数，用于React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等等说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于只有渲染引起的操作。
react中state没有更新但想更新页面怎么办？
06-13
在React中，通常建议的做法是将状态(state)更新为触发重新渲染的唯一来源，这可以通过使用 setState() 方法来实现。如果你需要在组件中强制更新页面，你可以使用 componentDidUpdate() 生命周期方法，它会在组件更新...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值