react setState 和 this.state区别 以及需要注意

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

setState 方式会 重新渲染组件

this.state的方式会改变值，但不会重新渲染组件（这就是为什么你改变了值，但是页面没有响应你）

在使用时。可以先使用this.state.的方式来赋值。在最后一次赋值使用setState的方式。这样组件之渲染一次达到赋值的效果。

在render（）中。也就是在页面初始化阶段一定不能用state。否则会造成不断的重新渲染组件。导致崩掉。

AmbroseLe
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react——this.stState()详解
牟童的博客
08-17 870
开发中我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变 化； React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 我们必须通过setState来告知React数据已经发生了变化； 疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？ 原因很简单，...
react学习笔记之state以及setState的使用
11-27
在react中通过 state 以及 setState() 来控制组件的状态。 state state 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,...
前端框架react----state、setState、样式、this指向
我睡觉的时候不困
08-19 264
目录 一、state 二、this的指向问题 三、setState 四、设置样式 一、state 之所以说普通函数创建的组件是无状态组件，而通过 class 创建的组件是有状态组件，就是因为在 class 中 state 的存在。 state叫状态，举个例子： 人---状态---影响---行为 组件---状态----驱动----页面 注意： 1、在constructor中初始化state。 2、为了提高页面 的渲染效率，不要将不需要在页面中展示的数据添加到state中，直接添加给
useState和setState的用法和区别
最新发布
weixin_63681863的博客
05-16 321
都是用来更新组件状态的，但它们在语法和使用的上下文上有所不同。时，可以直接在函数组件中声明并初始化一个状态变量，也可以使用数组结构来获取状态变量和更新函数。都用于在组件中管理状态，但它们适用于不同类型的组件，并且在使用上有一些区别。是React Hooks的一部分，它允许你在函数组件中添加状态。是在函数组件中使用的一种更简洁、更灵活的方式来管理组件状态，而。的一部分，并且可以合并多个状态更新，以避免不必要的渲染。是类组件中的方法，用于更新组件的状态。是传统的类组件中的一种方式来更新状态。
[react] 在React中组件的state和setState有什么区别？
歌谣的博客
11-21 211
[react] 在React中组件的state和setState有什么区别？ state：初始化状态 setState:对状态进行更新 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
react中的this.state与this.setState的区别
weixin_44759289的博客
03-27 1938
在react中，this.state与this.setState是由明显区别的，this.state是用来初始化state的，而this.setState是用来修改state的值的。 下面让我们用一个案例来说明 constructor(){ super() this.state={ inputValue:'' } } han...
this.setState更新
chenwenqqqq的博客
06-29 279
setState更新
当前只读状态:是_React 如何管理组件状态及使用 setState 更新状态
weixin_39561168的博客
11-20 357
通过让组件管理自己的状态，任何时候该状态发生变化了，React 将知道并自动对页面做出必要的更新。这是使用 React 构建 UI 组件的关键优势之一：如果要重新渲染页面，我们只需考虑更新状态。每次有更新时，我们不需要知道到底是页面的哪个部分发生变化了，也不需要判断如何有效的重新渲染页面，React 会对比之前的输出和新的输出，判断哪些改变了，并为我们做出决策，这个流程称为一致性比较。Props ...
浅谈使用React.setState需要注意的三点
08-28
浅谈使用React.setState需要...在使用 setState 时需要注意三个问题：setState 是异步的，绝对不要直接改变 this.state，需要注意 setState 的调用顺序。只有这样，才能正确地使用 setState，避免一些不必要的 bug。
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，...React中setState回调函数是非常重要的机制，需要我们在使用时格外小心和注意。
React props和state属性的具体使用方法
08-27
React props 和 state 属性的具体使用方法 在 React 中，props 和 state 是两个非常重要的概念，它们都是 React 组件的核心组成部分。本篇文章将详细介绍 React props 和 state 属性的具体使用方法，并通过实例代码...
useState和setState区别
aaaaaabaaaaab的博客
08-10 3370
1.参数不同 setState(updater,[,callback]) + updater:(object/function) -用于更新数据。 + callback：function-用于获取更新后的state的值。 useState(initState) + const [state,setState] =useState(initState) + state 代表状态， + setState() + initState是初始状态值。 setState与useState区别:
setState和useState使用比较
shuishuixiaoping的专栏
09-30 2859
useState和setState区别，简单理解 首先最明显的区别：useState是在函数组件中使用，setState在类组件中使用 二者参数对比 setState( updater [,callback] ) updater：object/function - 用于更新数据 callback：function - 用于获取更新后最新的 state 值 useState(initState) const [ state , setState ] = useState(initState) state：va
Taro+react开发（24）--this.state和this.props
歌谣的博客
08-09 273
由于 this.props 和 this.state 都用于描述组件的特性， 可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 ...
react原理分析--this.state修改引起的重新渲染
weixin_30267691的博客
06-27 774
整理向,非原创,目的是整理出浅显易懂的方向性说明. 比如现有 this.state={name:"小明",age:18} 我们说修改组件的状态要用this.setState()来实现.这里有两个问题 1.为什么?我直接用this.state.age=17能不能实现重新渲染? 不能.因为它只是改变了这个组件当前的状态,并没有调用render(). 2.thi...
React状态(state)组件、this指向问题
weixin_50828895的博客
02-22 694
state与this指向一、有状态组件和无状态组件1、概念2、state的基本使用2.1 在构造函数中定义 state2.2 在类中直接定义state2.3 获取状态：this.state3.使用setState()方法修改数据二、this 的指向1、this 的指向2、利用箭头函数解决this指向问题3、利用bind()方法解决this指向问题4、利用class实例方法总结 一、有状态组件和无状态组件 1、概念 函数组件叫做无状态组件；类组件叫做有状态组件 状态 （state），组件中使用的数据都保存在
关于直接修改state里面的值，组件会发生什么样的变化
qq_24805265的博客
08-25 1217
直接修改state里面的属性值, 比如this.state = {a:1}, this.state.a = 2, 这样是不会触发视图更新的，同理当里面包含了一个引用类型的数据也是，直接修改，也是不会触发更新的，比如this.state = {b: [1,2,3,4]}, this.state.b.push(5), 但是，在继承的是component的情况下手动调用this.setstate({})，也是能让试图更新的，前提是componentshouldupdate返回的是true。但是，这样会引发一个后果
this.setState的详细用法
oldwang1999的博客
08-31 4668
1.为什么不要直接对state进行赋值？ 如果直接对this.state复制是不会去更新视图的,this.setState的原理是同一个队列来实现state的更新的,将需要更新的state放入到状态队列中,在一定时间段之后,合并并更新state,然后进行渲染.而直接对this.state赋值是不会有这些操作的,因此不要对state进行直接赋值. 2.this.setState为什么是异步的? this.setState的操作是异步的,是为了提升性能对state的更新进行批量操作,官方文档中的原话:
obj = { key: '4', firstName: 'Jony', lastName: 'asd', phone: 1321416666, address: 'Sydney No. 12 Lake Park', tags: ['ban' ], } add() { // console.log(this.data) this.state.data.push(this.obj); this.setState({ data: this.state.data, }); console.log(this.state) } 我写react类组件的时候遇到一点问题，我添加obj进去，页面没有重新渲染
07-16
在 React 类组件中，当你更新组件状态 (state) 时，React 会自动重新渲染组件。然而，在你的代码中，你使用了 `this.state.data.push(this.obj);` 来添加新的对象到 `data` 数组中，这样的操作并不能触发组件的重新渲染。 在 React 中，应该避免直接修改状态的数组或对象，而是应该创建一个新的副本进行修改。这可以通过使用 `setState` 方法来实现。 在你的例子中，你可以尝试以下修改： ```javascript add() { // 创建新的副本 const newData = [...this.state.data, this.obj]; this.setState({ data: newData, }); } ``` 通过使用展开运算符 `...`，我们创建了一个新的数组 `newData`，其中包含原始数组 `this.state.data` 的所有元素以及新的对象 `this.obj`。然后，通过调用 `setState` 方法来更新组件的状态，此时 React 会重新渲染组件，并将新的数据显示在页面上。 请注意，在上述代码中，我们没有直接修改 `this.state.data`，而是创建了一个新的数组并将其赋值给 `data` 状态。这是因为 React 需要检测状态的变化，只有通过创建新的引用来更新状态时，React 才能正确地检测到状态的变化并触发重新渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值