react更新state的时候要返回一个全新的引用或者值

最新推荐文章于 2024-05-02 22:31:04 发布
转载 最新推荐文章于 2024-05-02 22:31:04 发布 · 688 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5a7005c56fb9a01ca603156f
文章标签：

#javascript #ViewUI

react创建新的状态对象的关键是，避免直接修改原对象的方法，而是返回一个新对象。也就是说react的state里面的引用类型，更改时必须赋予一个新对象，也就是引用地址必须要变。 为什么React推荐组件的状态是不可变对象呢？一方面是因为不可变对象方便管理和调试。另一方面是出于性能考虑，当对象组件状态都是不可变对象时，我们在组件的shouldComponentUpdate方法中，仅需要比较状态的引用就可以判断状态是否真的改变，从而避免不必要的render调用。当我们使用React提供的PureComponent时，更是要保证组件状态是不可变对象，否则在组件的shouldComponentUpdate方法中，状态比较就可能出现错误，因为PureComponent执行的是浅比较（比较对象的引用）。

参考链接在此：www.jianshu.com/p/c6257cbef…

极智开发 | 讲解 React 组件三大属性之一：state
极智视界
08-02 489
大家好，我是极智视界，本文讲解一下 React 组件三大属性之一：state。
React的基本知识：事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
weixin_57266891的博客
11-24 1033
这篇教学文章涵盖了大量的React基本知识。
react 操作setState，为什么要新创建一个副本，而不直接对原数据进行修改
qq_29055201的博客
05-10 1200
在React中，通过“有变化，就一定返回一个新对象；没变化，原对象不做变化直接返回”的原则，永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化，效率上比deepwatch高得多 ...
【React】修改原引用时警惕返回新引用
不忘初心，坚定道路！
08-05 207
前言 我们知道react是提倡每次更新返回一个新引用的，实际不返回新引用也是可以的，只要自己手动更新即可，我这次写个拖拽树组件时只在原引用上修改，手动更新，结果产生了个bug。 bug现象 这个现象是在组件卸载后重新进入产生的，组件未卸载时一切正常。当组件卸载后再次进入，会导致key重复。产生多个相同树列表项。 解决方案 源码我就不放了，这组件写的还是挺长的，就说关键地方，就是我有个修改父亲的方法，因为拖拽会改变树的层级，所以对应的，需要先脱离自己父亲。就是这个脱离自己父亲方法里原本这么写的：
react类组件的更新
MRNAN的博客
05-19 2237
react 类组件的更新类组件状态的使用 类组件状态的使用 类组件的数据来源有两个地方： - 父组件传过来的属性。 - 自己内部的状态。 属性和状态发生变化后组件都会更新，视图都会渲染。
react：关于用对象给state赋值，又修改对象的坑
qq_45797026的博客
08-01 1369
今天写项目的时候遇到的一个问题是，setState之后页面一直不渲染，在大佬的帮助下解决了问题上图记录一下： 解决方案：安全起见，还是直接把state写在state里，不要留下外面的东西改state的可能性 ...
为什么redux要返回一个新的state引发的血案
weixin_34168700的博客
12-20 2645
Redux的内幕（一） 一个问题引发的血案 重振旗鼓 基础了解 修修边幅 心中有疑惑 未待完续 相关链接 Redux的内幕（一） 一个问题引发的血案 博主在面试的过程中，面试官问 : “看你简历，Vue和React都使用过，你能说一下 Vue和React的区别嘛？”, 然后吧唧吧唧说了一下，于是！血案发生了，当我答道Vuex和Redux的时候，面试官问了一句，为什么Redux总是要返回一...
react之state深入浅出
weixin_73918953的博客
04-27 1004
设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。要在一个事件中多次更新某些 state，你可以使用更新函数。你可以在state中存放任意类型的JavaScript值。到目前为止，你已经尝试过在state中存放数字，字符串和布尔值，这些类型的值在JavaScript中是不可变的，这意味着它们不能被改变或是只读的。你可以通过替换它们的值以触发一次重新渲染。从技术上讲，可以改变对象自身的内容。
【React系列】Redux(三) state如何管理
川峰的博客
01-02 1114
我们来看一下目前我们的reducerreducercounterhomecounterhome如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护。reducer我们先抽取一个对counter处理的reducer再抽取一个对home处理的reducer如果将它们合并起来呢？
React 之 使用 ref 引用值（七）
qq_35876316的博客
05-02 827
ref 是一种脱围机制，用于保留不用于渲染的值。你不会经常需要它们。ref 是一个普通的 JavaScript 对象，具有一个名为 current 的属性，你可以对其进行读取或设置。你可以通过调用 useRef Hook 来让 React 给你一个 ref。与 state 一样，ref 允许你在组件的重新渲染之间保留信息。与 state 不同，设置 ref 的 current 值不会触发重新渲染。不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。
React 改变state必须知道的知识点
EmotionComputer
01-07 1428
react可以通过this.state.xx的方式直接获取state，但是当我们修改state的时候，往往有许多的坑。 1. 不能直接修改state 组件修改state，并不会重新触发render。例如： //错误 this.state.title='attend'; //正确 this.setState({title:'attend'}); 2. state的更新是异步的 调用setSta...
react修改state的坑,今天终于学到了...
MS6324_ZAKU的博客
05-31 957
今天在做了个评论的模块,贴下代码 -太长了直接贴截图 需求是点击删除,删除对应的评论 然后我这边使用的是splice方法直接修改state的commentList数组,结果出现两个坑 第一是splic方法返回的是被删除的值,同时splice() 方法会直接对数组进行修改。 也就是说,我不能直接在变量后面+ splice() ,这样得到的值是被删除的值 而是应该在原本的变量数组使用splice()方法后,再调用这个变量,因为这个变量的值已经改变了 第二十react的state不能直接去修改 直接修改
pureComponent导致的setState数据变化后不更新
hzxOnlineOk的博客
04-16 924
以下是一个racct-native代码示例，展示PureComponent 的检查导致的数据更新后，一直不触发render的现象 首先，我们都知道，PureComponent 其实就是帮我们做了shouldComponentUpdate生命周期里的逻辑-->【浅比较】 其次，PureComponent 重写的SCU（shouldComponentUpdate）其实就是shallow e...
useState使用规则
m0_72865135的博客
08-08 632
以上提到的这些规则，同样也适用于任意的 React Hooks 函数。
React常见的一些坑
咸鱼的星空
03-29 3983
1、setState()是异步的 this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新，因为没有调用render函数。 2、组件的生命周期 componentWillMount，componentDidMo
React组件之间的传值方式
小糖豆
08-04 7963
父子组件传值 一、父组件传给子组件 父组件通过props传递给子组件； //父组件 class CommentList extends Component{ render(){ return( <div> <Comment comment={information}/> </div> ) } } //子组件 class Comment extend
react setState 数组、对象多种方式
热门推荐
hahahhahahahha123456的博客
09-09 1万+
修改object中某项 this.setState({ object: {...object, key: value} }); 删除数组首位 array.splice(0, 1); this.setState({ array }); 删除数组尾部 array.splice(array.length - 1); this.setState({ array }); 删除数...
React 中的useState 和 setState 的执行机制
p1967914901的博客
02-07 4921
React 中的useState 和 setState 的执行机制 useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。 它们是同步的还是异步的？ setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步
【React】深入理解setState
qq_42996469的博客
04-25 906
setState为什么是异步的？ 一般使用setState()时，React并不会保证state会立刻更新，这些操作将延迟批量调用。 这两个词很重要，批量就是延迟的原因。 事实上，我们应该将setState() 视为更新组件的请求而不是立即更新的命令，这一点与Vue不同，不论是Vue2的Object.definedProperty还是Vue3的Proxy，都拦截了对象的setter，所以在数据被改变时会被立刻拦截并命令组件开始更新。 为什么React要设计成这样？为了性能（并不是说Vue性能不好，只是框架思
react怎么通过dispatch方法修改model文件state下几个字段的值
最新发布
03-11
这里需要注意的是，Redux中的state是不可变的，所以必须返回一个新的state对象，而不是直接修改原来的state。可以使用扩展运算符或者Object.assign来创建新的state对象。 用户提到的model文件可能指的是Dva.js中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值