Question

我是ImmutableJS的新手。我的应用程序实现了大型Redux Store＆amp;多种反应成分。

如果我错了，请纠正我：

我知道Immutable的好处是保护Flux Store并避免在组件上不必要的vDom渲染变为道具。
要使用ImmutableJS获得更好的渲染性能，必须实现shouldComponentUpdate()。

这个功能的最佳实现是什么？

我已经找到了它的几个实现，都使用了带有一些修改的shallowEqual（）：

Facebook为React实现shallowEqual以及我想象的更多。
Jurassix提供实施an implementation的shallowEqualImmutable。它是Facebook的功能，除了is()函数被ImmutableJS给出的函数替换。第一个平等也不同。
Dan使用different shalllowEqual function执行相同的操作，实现前两个实现的部分内容。

有人知道我应该在我的案例中使用哪种实现方式？或者没有实现特定的shouldComponentUpdate()？我在这一点上略显茫然

非常感谢您的帮助!!

Answer 1

据我所知，Immutable的好处是保护Flux Store并避免在组件上不必要的vDom渲染变为道具。

这与Immutable无关（如果你的意思是库）。例如，您可以将普通对象和数组与Redux一起使用，但由于Redux要求您永远不要改变它们，因此在大多数情况下您可以获得几乎相同的好处。因此，不可变库可以提供更好的API来进行不可更新的更新，但如果不改变普通对象或数组，则不需要进行性能优化。

要使用ImmutableJS获得更好的渲染性能，必须实现shouldComponentUpdate（）。

同样，与ImmutableJS并不真正相关，但是，要从道具的不变性中受益，您需要实现shouldComponentUpdate()。但是，如果您使用Redux，您可能已经使用了React Redux包中的connect()，在大多数情况下，它会为您实现shouldComponentUpdate()。因此，您不需要手动为任何connect() ed组件编写它。

有人知道我应该在我的案例中使用哪种实现方式？或者没有实现具体的shouldComponentUpdate（）？我在这一点上略显茫然

如果您没有性能问题，请不要使用其中任何一个。在大多数情况下，React本身具有相当高的性能，并且connect()之上的shouldComponentUpdate()将添加connect()的良好默认实现。

对于未PureRenderMixin但仍经常更新的组件，我建议您使用react-addons-shallow-compare。它由Immutable.is内部使用，但由于mixins并未在现代React API中使用，因此单独的函数可以更方便。

如果您需要--Assume this is your main sql file..... --Execute some SQL commands.... --Now load the second SQL file and execute it DECLARE @SQL NVARCHAR(MAX); CREATE TABLE #SQL (value nvarchar(max)); BULK INSERT #SQL FROM 'C:\TEMP\select2.sql' WITH ( DATAFILETYPE = 'char', FIELDTERMINATOR = '|', --<Make sure these characters ROWTERMINATOR = '|' --<don't appear in your SQL statements ); SELECT @SQL = Value FROM #SQL EXEC (@SQL); TRUNCATE TABLE #SQL; -- Do some other sql commands in your main query --Now load the third SQL file and execute it BULK INSERT #SQL FROM 'C:\TEMP\select3.sql' WITH ( DATAFILETYPE = 'char', FIELDTERMINATOR = '|', --<Make sure these characters ROWTERMINATOR = '|' --<don't appear in your SQL statements ); SELECT @SQL = Value FROM #SQL EXEC (@SQL); --Do some more sql commands --etc... --Clean up the temp table DROP TABLE #SQL的特殊支持，您确实可以使用shallowEqualImmutable之类的内容。它更好地理解不可变集合，因为它认为相同值的列表是相同的。此时，您最好针对您的应用分析不同的实现，因为具体情况可能因您的使用情况而异。

不要过早优化，在解决之前确保这是一个实际问题。

Answer 2

我还使用了一个大的Redux商店，并发现使用Immutable.js可以使状态的访问变得复杂，例如，nested2.getIn（['a'，'b'，'d']）vs nested2.abd;我真正需要的是确保我不会在我的Reducer中改变状态，并且仍然能够在shouldComponentUpdate（）方法中使用===检查相等性。

我已创建https://github.com/engineforce/ImmutableAssign以满足我的要求。它是一个轻量级不可变助手，它支持不变性并允许您继续使用POJO（Plain Old JavaScript Object），因此我们的React组件可以像往常一样读取状态，例如

return newState.a.b.d === oldState.a.b.d;

示例，

var iassign = require("immutable-assign");

var o1 = { a: { b: { c: [[{ d: 11, e: 12 }], [{ d: 21, e: 22 }]], c2: {} }, b2: {} }, a2: {} };

//
// Calling iassign() to push new item to o1.a.b.c[1]
//
var o2 = iassign(
  o1,
  function (o) { return o.a.b.c[1]; },  // get property to be updated 
  function (c) {                        // update select property
    c.push(101); 
    return c; 
  }
);


// o2.a.b.c[1][1] === 101
// o1 is not modified

// o2 !== o1
// o2.a !== o1.a
// o2.a.b !== o1.a.b
// o2.a.b.c !== o1.a.b.c
// o2.a.b.c[1] !== o1.a.b.c[1]

// o2.a2 === o1.a2
// o2.a.b2 === o1.a.b2
// o2.a.b.c2 === o1.a.b.c2
// o2.a.b.c[0] === o1.a.b.c[0]
// o2.a.b.c[0][0] === o1.a.b.c[0][0]
// o2.a.b.c[1][0] === o1.a.b.c[1][0]

whatComponentUpdate与immutable.js

2 个答案: