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

人们普遍认为,国家是相当邪恶的,是编程中的一大漏洞来源.Redux说,与其把它们分散在整个应用程序中,不如把它们全部集中在一个全局状态树中,这样你就必须发出改变的动作?听起来很有趣.所有的程序都需要状态,所以让我们把它放在一个不纯净的空间里,只从里面修改它,这样bug就很容易被追踪到.然后,我们还可以声明性地绑定各个状态块以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视为内存中的数据库——组件可以对其进行react 性依赖.

不变性使判断任何子树是否被更改变得非常有效,因为它简化了身份判断.

是的,您的实现是高效的,但是每次以某种方式操纵树时,都必须重新呈现整个虚拟dom.

如果使用React,它最终将与实际dom进行差异,并执行最小的批处理优化操作,但完全自顶向下的重新渲染仍然效率低下.

对于不可变树,无状态组件只需判断它所依赖的子树是否与以前的值在身份上不同,如果是,则可以完全避免呈现.

Reactjs相关问答推荐

来自Ldap.js的res.on(searchEntry)不会在Next.js生产模式下返回结果

我想将状态设置为true,直到每一张卡片都生成并在多姆中呈现

父组件更新后不重新呈现子组件

react 派生状态未正确更新

Formik验证不适用于物料UI自动完成

使用Reaction-Hook-Form时未激发React.js onBlur事件

Redux Store未触发React组件中的重新呈现

使用下一步中的路由/导航不会立即加载路由

子路径上未定义useMatches句柄

Reaction路由-如何在布局路由内呈现&q;/:id&q;路由

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

PWA:注册事件侦听器不会被触发

无法通过 fetch 获取数据到上下文中

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理?

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

ReactJS 动态禁用按钮

list 组件未按预期运行

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

如何防止 mui x-date-picker 被截断?