React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题

自动重新 render 的触发条件

组件中的 render 方法内 return 部分使用了共享状态数据
通过 reducer 改变了共享状态数据的值

遇到的问题

import { ADD_PERSON, DELETE_PERSON} from '../constant'
export default function personReducer(preState = {personArr: []}, action) {const {type, data} = actionswitch (type) {case ADD_PERSON: // newPersonArr = preState.personArr;// newPersonArr.push(data)return {personArr: [...preState.personArr, data]}case DELETE_PERSON:let newPersonArr = [];newPersonArr = preState.personArr.filter(item => item.order !== data)return {personArr: newPersonArr}default: return preState}
}

在 case ADD_PERSON: 内，如果通过下面的逻辑来改变共享状态数组

newPersonArr = preState.personArr;
newPersonArr.push(data)

实际上这个数组并没有真正意义上的改变，因为它是一个引用数据类型，真正意义上的改变只能是它保存的内存地址发生改变，所以需要拷贝原数组然后用一个新的内存地址指向它，再来添加新元素到这个新数组中才真正意义上改变了共享状态数据，此时才会触发组件 自动重新 render 的条件 ！！！

React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题相关推荐

怎样开启计算机自动更新功能,电脑微信中的有更新时自动升级微信功能如何设置开启...
电脑微信中的有更新时自动升级微信功能如何设置开启腾讯视频/爱奇艺/优酷/外卖充值4折起今天给大家介绍一下电脑微信中的有更新时自动升级微信功能如何设置开启的具体操作步骤. 1. 打开电脑,找到桌面 ...
Redux简介以及Redux应用程序中的状态更新方式
by Syeda Aimen Batool 通过Syeda Aimen Batool Redux简介以及Redux应用程序中的状态更新方式 (An intro to Redux and how sta ...
如何在Excel中选择单元格时自动高亮显示整行和整列
要在Excel中选择单元格时自动高亮显示整行和整列,请按照以下步骤操作: 打开Excel工作表. 点击"开始"菜单中的"Excel选项". 在Excel选项窗口 ...
成功解决在word文件的表格中当输文字时自动出现加红色和下划线
成功解决在word文件的表格中当输文字时自动出现加红色和下划线目录解决问题解决思路解决方法解决问题成功解决在word文件的表格中当输文字时自动出现加红色和下划线解决思路在输入文字的时候 ...
react大数据量渲染_React 中的状态自动保存（KeepAlive）
什么是状态保存?假设有下述场景:移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击 ...
JS记坑 ----- 在父节点中添加删除子节点
场景:通过javascript为ul标签内动态增删li标签,我通过 liArr = ul.children; 获取了ul的存有所有子元素的类数组,但是在 appendChild().insert()和 ...
flutter json转对象_在 Flutter 使用 Redux 来共享状态和管理单一数据
React 生态里广为人知的 Redux 状态管理,其实在 Flutter 中也能适用,它能很好的处理单一数据和状态共享,在一定程度上对于分割项目之间复杂的业务有一定的积极作用,可阅读可维护也能做的很 ...
在Linq to Sql中管理并发更新时的冲突（3）：使用记录的时间戳进行检测
我们描述了Linq to Sql检测在更新时是否产生了冲突的基本方法:将该记录每个字段原来的值和更新时的值进行对比,如果稍有不同则意味着记录被修改过,因此产生了更新冲突.不过您是否有这样的感觉,这种方 ...
又踩.NET Core的坑：在同步方法中调用异步方法Wait时发生死锁(deadlock)
之前在将 Memcached 客户端 EnyimMemcached 迁移 .NET Core 时被这个"坑"坑的刻骨铭心(详见以下链接),当时以为只是在构造函数中调用异步方法(注: ...

React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题

自动重新 render 的触发条件

遇到的问题

React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题相关推荐

最新文章

热门文章