javascript - 为什么我应该使用 immutablejs 而不是 object.freeze?

标签 javascript reactjs immutable.js

我在网上研究了 immutablejs 相对于 Object.freeze() 的好处,但没有找到任何令人满意的东西!

我的问题是,当我可以卡住一个普通的旧 JavaScript 对象时,为什么我应该使用这个库并使用非 native 数据结构?

最佳答案

我认为您不了解 immutablejs 提供的功能。它不是一个仅仅使您的对象变得不可变的库,而是一个处理不可变值的库。

无需简单地重复他们的docsmission statement ,我将说明它提供的两件事:

  1. 类型。他们实现了(不可变的)无限范围、堆栈、有序集、列表……

  2. 它们的所有类型都实现为 Persistent Data Structures .

我撒谎了,这里引用了他们的使命声明:

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

我强烈建议您阅读他们链接到的文章和视频,以及更多有关持久数据结构的信息(因为它们是 immutablejs 的主题),但我会用一句话左右进行总结:

假设您正在编写一个游戏,并且有一个坐在 2d 平面上的玩家。例如,这是鲍勃:

var player = {
  name: 'Bob',
  favouriteColor: 'moldy mustard',

  x: 4,
  y: 10
};

自从你喝了 FP koolaid 后,你就想卡住玩家(brrr!希望鲍勃有一件毛衣):

var player = Object.freeze({
    name: 'Bob',
    ...
});

现在进入你的游戏循环。每次勾选时,玩家的位置都会改变。我们不能只更新玩家对象,因为它被卡住了,所以我们将其复制过来:

function movePlayer(player, newX, newY) {
    return Object.freeze(Object.assign({}, player, { x: newX, y: newY }));
}

这很好,但请注意我们做了多少无用的复制:在每个刻度上,我们创建一个新对象,迭代我们的一个对象,然后在它们之上分配一些新值。在每一个刻度上,在你的每一个物体上。这实在是太拗口了。

Immutable 为您解决了这个问题:

var player = Immutable.Map({
    name: 'Bob',
    ...
});

function movePlayer(player, newX, newY) {
    return player.set('x', newX).set('y', newY);
}

通过持久数据结构的 ノ*✧゚ 魔力 ✧゚*ヽ,他们 promise 尽可能执行最少的操作。

还有心态上的差异。当使用“一个普通的旧[卡住] javascript对象”时,一切的默认操作都是假设可变性,并且你必须付出额外的努力才能实现有意义的不变性(也就是说不变性)它承认状态存在)。这就是 freeze 存在的部分原因:当您尝试采取其他措施时,事情就会发生 panic 。对于 Immutablejs,不变性当然是默认假设,并且它之上有一个很好的 API。

这并不是说一切都是粉红色和玫瑰色,上面有樱桃色。当然,一切都有其缺点,你不应该仅仅因为可以就将 Immutable 塞满各处。有时,仅仅卡住一个对象就足够了。哎呀,大多数时候这已经足够了。这是一个有用的库,有自己的定位,只是不要被炒作冲昏了头脑。

关于javascript - 为什么我应该使用 immutablejs 而不是 object.freeze?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36726138/

相关文章:

javascript - 如何创建登录和注册页面而无需连接到后端(ReactJS + Redux)?

javascript - jQuery FullCalendar 未在 Bootstrap 选项卡中呈现

jquery - 在 ReactJS 中将表导出为 xls 表

javascript - Immutable.js 将值映射到数组

javascript - ExpressJS 路由中的正则表达式

javascript - 如何根据 div 宽度将类应用于 div?

javascript - 样式化组件未包装另一个样式化组件

javascript - <Component render={({ state }) => {}}/> 在 React 中做什么?

javascript - Immutable.Set.contains 返回 false

javascript - 我可以使用相同的代码遍历 immutable.List、immutable.Set 或 Javascript Array 或 Set 吗?