在React中使用不可变状态有什么缺点？ [英] What are disadvantages to using immutable state in React?

问题描述

我用正常方式构建了我的第一个具有有状态存储的React应用程序，现在我正在研究使用像 Este starterkit。

I have built my first React application with stateful stores the "normal" way, and now I am looking into using an immutable global state like used in the Este starterkit.

• 所有商店的状态保存在一个不可变的数据结构中


• 组件没有状态，但基于商店getter函数访问render（）中的数据


• 商店也是无状态但改变了全局应用程序状态使用游标的域名。


• 顶级应用程序组件侦听状态更改，并重新呈现整个组件树。


• 组件是实现为纯意味着他们使用shouldComponentUpdate来有效地计算出它们可以在重新渲染中被跳过。

• The state of all stores is kept together in a single immutable data structure
• Components have no state but access data in their render() based on a store getter function
• Stores are also stateless but mutate the global application state for their domain using a cursor.
• The top level app component listens for state changes, and re-renders the whole component tree.
• Components are implemented as "pure" meaning they use shouldComponentUpdate to efficiently figure out of they can be skipped in the re-rendering.

它通过以下几种方式简化了应用程序结构：

It simplifies the application structure in a few ways:

• 组件不会侦听商店，也不会将商店数据复制到本地状态。他们只是在每次渲染时获取它们的存储状态。


• 全局状态始终是整个应用程序的快照，使调试和添加撤消功能更容易。


• 全局状态似乎简化了同构渲染。

我只读了有关使用的正面信息使用React的不可变数据，建议避免组件中的状态，所以我想知道是否有任何缺点。我认为必须有，否则我不明白为什么不建议将 方式构建React应用程序。

I only read positive things about using immutable data with React, and it is recommended to avoid state in components, so I wonder if there are any disadvantages. I figured there must be because otherwise I don't see why it isn't recommended as the way to structure React apps.

Immutability is对我来说很新，如果我开始在复杂的真实世界应用中使用这种方法，那么我应该注意一些警告吗？

Immutability is new to me, so are there any caveats I should be aware of if I start using this approach in a complex real world app?

我能想到的唯一一件小事是在Este使用它时使用forceUpdate（），因为我读过它是一个同步函数。例如，Morearty似乎将更新推迟到下一个动画帧以便批量处理它们，但我认为这是一个实现细节/优化而不是一些继承的不可变单态方法的缺点。

The only minor thing I can think of is the use of forceUpdate() as Este is using it, as I've read that it is a synchronous function. Morearty for example seems to defer the updates to the next animation frame in order to batch them, but I consider this an implementation detail / optimization and not some inherit downside of the immutable single state approach.

推荐答案

1. 文档。 SO中一些投票最多的问题/咆哮是关于更新嵌套列表项的微不足道的事情，因为文档更倾向于熟悉函数式编程的观众，这使得它对其他人不太平易近人。


2. 将模型层次结构知识与组件分开并非易事。我讨厌在组件中执行 this.state.getIn（[parent，child，index]），因为它增加了模型更改破坏组件代码的可能性。这可以通过可扩展性（更多基于下面的内容）或通过帮助方法来预防，但你肯定会失去普通JS成员的简单性。


3. 我遇到的一个重大挑战是能够序列化和
   反序列化状态。 fromJS方法支持自定义启动
   ，但它们是皮塔饼，需要仔细测试和维护。


4. 记录类型被称为嵌套的弱化严重阻碍。这很令人遗憾，因为它允许更容易（相对而言）可扩展性，但仅鼓励单级层次结构。您无法轻松地从JSON创建嵌套记录。这使得很难将它们与常规的不可变fromJS用法混合，除非你使用上面提到的皮塔复兴。并且我提到了多么悲伤，因为Records将模型属性公开为第一类成员，确保模型完整性和默认值。


5. 然后有可扩展性。尝试在不可变数据模型周围添加帮助程序以抽象组件中的模型层次结构依赖关系，并且您需要进行明显的跨栏竞赛。反序列化成为一场激烈的离婚之战。你需要乱搞复活，如果记录混合他们将会犯规，等等。更简单的可扩展性机制将大大有助于使我的组件代码更清晰。


6. 没有记录的最佳实践。尽管这与＃1正确相关，但我仍然应该提到缺乏良好的文档会阻止人们选择最佳的做事方式。我不确定是否应该选择使用更新程序，或者使用forEach或setIn（等等）来更新不可变结构。这些方法不会相互交叉引用，以便让您知道其他选择。

1. Documentation. Some of the most voted questions/rants in SO are about trivial things like updating nested list items all because the documentation is more oriented towards an audience familiar with functional programming, which makes it less approachable to the rest.
2. Its not trivial to separate the model hierarchy knowledge from your components. I hate to do a this.state.getIn("[parent, child, index]") in a component because it increases the possibility of a model change breaking the component code. This is preventable by extensibility (more on that below) or through helper methods, but you certainly lose the simplicity of plain JS members.
3. A significant challenge I faced was to be able to serialize and de-serialize the state. The fromJS method supports custom revivers but they are a pita and require careful testing and maintenance.
4. The Record type is severely stunted by a debilitation called nesting. This is sad because it allows easier (in relative terms) extensibility, but encourages only a single level hierarchy. You cannot easily create nested records from JSON. This makes it difficult to mix them with regular immutable fromJS usage unless you use the above mentioned pita revivers. And did I mention how sad that is, given Records expose model properties as first class members, ensure model integrity and defaults.
5. And then there is extensibility. Try adding helpers around your immutable data models to abstract model hierarchy dependency in your components and you are up for a noticeable hurdle race. De-serializing becomes a bitter divorce battle. You would need to mess around with revivers, if Records are in the mix they will cry foul and so on. An easier extensibility mechanism would go a long way towards making my components code cleaner.
6. No documented best practices. Although this sits right with #1, I still should mention that the lack of good documentation prevents one to pick the best possible way of doing something. I am not sure if I should pick from using an updater, or forEach or setIn (and so on) to update an immutable structure. The methods don't cross-reference each other enough to let you know what alternatives are around.

这篇关于在React中使用不可变状态有什么缺点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！