如何正确传递 immutablejs 对象

Posted 2023-02-22

【中文标题】如何正确传递 immutablejs 对象

【英文标题】：How to properly pass immutablejs object in flux

【发布时间】：2016-04-23 02:54:54

【问题描述】：

我在应用程序中使用 react+flux。我正在尝试使用不可变的 js 来加快渲染过程，因为每次我对状态进行任何小的更改时，react 都会尝试协调所有 DOM（这很慢）。

我遇到的问题是在我的 store.js 中，我可以将我的状态转换为不可变的 Map 对象。但是，一旦这个对象被传递给应用程序，它就不再被识别为 Map 对象，而只是一个普通对象。这意味着我不能使用 Map 对象附带的任何 set 或 get 函数

这是我目前所拥有的：

Store.js

var Immutable = require("immutable");

var Store = function()   
    var jsState =  object1 : "state of object 1", 
                    object2 : "state of object 2"
    this.globalState = Immutable.fromJS(globalState);

    this._getGlobalState = function()
        //console will log: Map  size=2,  _root=ArrayMapNode,  __altered=false,  more...
        //this.globalState.get("object1"); will work
        console.log(this.globalState); 
        return this.globalState;
    

App.js

var Store = require("./Store.js");
var Map = require("immutable").Map

var App = React.createClass(
    getInitialState: function()
        return ();
    ,
    componentWillMount: function()
        this._getStateFromStore(); //will get the immutable state from the store
    ,
    _getStateFromStore: function()
    
        return this.setState(Store._getGlobalState());
    ,
    render: function()
        //this will return Object  size=2,  _root=ArrayMapNode,  __altered=false,  more...
        //this.state.get("object1") will NOT work
        console.log(this.state);
        return <div>This is in App</div>
    
);

我在这里做错了吗？我是否缺少任何文件中的任何模块？非常感谢！

【问题讨论】：

直接创建Immutable.Map 会更快：var jsState = Immutable.Map( object1 : "state of object 1", object2 : "state of object 2") 而不是使用fromJS。此外，您还需要一个componentShouldUpdate 方法来利用不可变的优势。查看PureRenderMixin 是一种简单的方法。

【参考方案1】：

因此，您实际上不能强制 State 对象成为不可变对象。相反，您必须在状态中存储不可变对象。

因此，您需要执行以下操作：

getInitialState: function()
  return (
    data: Immutable.Map()
  );
,

...
_getStateFromStore: function()

  return this.setState(
    data: Store._getGlobalState()
  );
,

Facebook has a good example repo on this subject.