Redux 不就是美化了全局状态吗?

2024-04-20

所以我一周前开始学习 React,我不可避免地遇到了状态问题以及组件应该如何与应用程序的其余部分进行通信。我四处搜寻了一下,Redux 似乎是这个月的热门。我通读了所有文档,我认为这实际上是一个相当革命性的想法。以下是我的想法:

人们普遍认为状态是非常邪恶的,并且是编程中错误的一大来源。 Redux 没有将其全部分散在您的应用程序中,而是说为什么不将其全部集中在全局状态树中,您必须发出操作才能进行更改?听起来不错。所有程序都需要状态,因此让我们将其放在一个不纯的空间中,并且只从那里修改它,这样错误就很容易追踪。然后我们还可以以声明方式将各个状态块绑定到 React 组件并让它们自动重绘,一切都很漂亮。

然而,我对整个设计有两个问题。其一,为什么状态树需要不可变?假设我不关心时间旅行调试、热重载,并且已经在我的应用程序中实现了撤消/重做。必须这样做似乎很麻烦:

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

而不是这个:

case COMPLETE_TODO:
  state[action.index].completed = true;

更不用说我正在制作一个在线白板只是为了学习,每个状态更改可能就像在命令列表中添加画笔描边一样简单。一段时间后(数百笔画笔划),复制整个阵列可能会开始变得极其昂贵且耗时。

我可以接受独立于通过操作改变的 UI 的全局状态树,但它真的需要是不可变的吗?像这样的简单实现有什么问题(非常粗略的草稿。1分钟内写完)?

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

它仍然是一个通过发出的操作进行变异的全局状态树,但极其简单且高效。


Redux 不就是美化了全局状态吗?

当然如此。但这同样适用于您曾经使用过的每个数据库。最好将 Redux 视为内存数据库 - 您的组件可以反应性地依赖它。

不变性可以非常有效地检查是否有任何子树已被更改,因为它简化了身份检查。

是的,你的实现是高效的,但是每次以某种方式操作树时,整个虚拟 dom 都必须重新渲染。

如果您使用 React,它最终会针对实际 dom 进行比较并执行最少的批量优化操作,但完整的自顶向下重新渲染仍然效率低下。

对于不可变树,无状态组件只需检查它所依赖的子树是否与先前的值相比在身份上有所不同,如果是这样,则可以完全避免渲染。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Redux 不就是美化了全局状态吗? 的相关文章

  • 需要禁用引导时间选择器的输入

    我正在使用 Bootstrap 时间选择器 我已经成功实施了 但我需要的是用户只能在 30 分钟间隙内插入 例如 10 00 10 30 11 00 等 为此我尝试过的是minuteStep如下图所示 效果完美 fantasyleague
  • 通过 AJAX 发送 XML

    我在 jQuery 中创建了一个 xml 文档 如下所示 var xmlDocument
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • Sequelize 4.3.2 n:m(多对多)关联:未处理的拒绝 SequelizeEagerLoadingError

    我有 3 个模型 用户 项目 UserProject module exports function sequelize DataTypes var User sequelize define User title DataTypes ST
  • JQuery 可排序嵌套可排序 div

    这个问题与这个有关Nest jQuery UI 可排序 https stackoverflow com questions 19129476 nest jquery ui sortables 但我无法解决我的问题 问题是 我有一个包含项目的
  • 无法读取setInterval(Hooks)中的最新状态变量[重复]

    这个问题在这里已经有答案了 我想这是因为 JS 的工作原理 但我想你不会在类中遇到这个问题 在此代码中 let open setOpen React useState false let counter setCounter React u
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • 使用 Guava 联合两个 ImmutableEnumSets

    我想联合两个ImmutableEnumSets来自番石榴 这是我的尝试 public final class OurColors public enum Colors RED GREEN BLUE YELLOW PINK BLACK pub
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 使用默认值反应路由参数

    我正在使用 React 功能组件和 React Router v5 我正在使用 useParam 函数来获取参数 当参数不可用或未定义时 如何设置参数的默认值 我的路由器代码
  • 需要根据用户选择有条件地渲染具有 X 行数的部分

    我有一个反应组件 其中包含一个下拉列表 其中的选项包括none 1 5 and 13 根据用户选择的数字 我需要渲染一个部分 其中包括许多行 每个行都有字段名称和下拉列表 如果用户不选择任何一个 我需要整个附加配置部分消失 新部分中的每个下
  • 如何将命名空间与 TypeScript 外部模块一起使用?

    我有一些代码 基本类型 ts export namespace Living Things export class Animal move export class Plant photosynthesize dog ts import
  • 在 Javascript 中创建数组

    我对 javascript 不太熟悉 并且在用 javascript 制作 2d 或者也许我可能需要 3d 数组时遇到了一些麻烦 我目前需要收集 2 条信息 一个 ID 和一个值 因此我创建了以下内容 var myArray var id
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM
  • 如何为React hooks(useState等)做流类型注解?

    我们应该如何将 Flow 类型注释与 React hooks 一起使用 例如useState 我尝试寻找一些如何实施它们的示例 但找不到任何东西 我试过这个 const allResultsVisible setAllResultsVisi

随机推荐