使用Immutable.js

时间:2016-12-22 02:00:38

标签: javascript reactjs immutable.js

在React中使用Immutable.js以实现历史记录/“回溯时间”功能时,可以采用哪些模式?为了理解这些问题,我构建了一个简单的React应用程序,它显示一个随机数并提供三个按钮:

  • 生成新的随机数
  • 回到过去
  • 及时前进。

这是GUI:

enter image description here

这是我的代码:

const React = require('react');

import {List} from 'immutable';
import {assert} from 'chai';

const App = React.createClass({
    getInitialState: function() {
        return {
            history: List([Math.random()]),
            currentTime: 0,
            maxTimeReached: 0
        };
    }
    , newRandomNumber() {
        const newHistory = this.state.history.push(Math.random());
        this.setState({history: newHistory
                       , currentTime: this.state.currentTime+1
                       , maxTimeReached: this.state.maxTimeReached+1
                      });
    }
    , backInTime() {
        this.setState({currentTime: this.state.currentTime-1});
    }
    , forwardInTime() {
        this.setState({currentTime: this.state.currentTime+1});
    }
    , componentWillUpdate(_, nextState) {
        // sanity checks
        assert.isTrue(nextState.currentTime>=0);
        assert.isTrue(nextState.currentTime<=nextState.maxTimeReached);
    }
    , render: function() {
        return (
            <div>
                <div>{this.state.history.get(this.state.currentTime)}</div>
                <div>
                    <button onClick={this.newRandomNumber}
                        disabled={this.state.currentTime<this.state.maxTimeReached}>new random
                    </button>
                </div>
                <div>
                    <button onClick={this.backInTime}
                        disabled={this.state.currentTime==0}>&lt;
                    </button>
                    <button onClick={this.forwardInTime}
                        disabled={this.state.currentTime===this.state.maxTimeReached}> &gt;
                    </button>
               </div>
            </div>
        );
    }
});

export default App;

我的问题是:

  1. 在这个简单的例子中,Immutable.js究竟是什么让我们能够回到过去?我认为答案一无所获。应用程序的状态实际上是计数器,并且是一种原始类型,它是开箱即用的。但也许在一个状态更复杂且提供的应用程序中,状态从一个步骤到下一个步骤没有太大变化,那么不可变的结构共享将允许我们使用更少的内容保存应用程序的整个历史记录记忆。我的理解是否正确?
  2. 我们需要一个结构来保存我们的应用程序的历史。这可以是可变本机数组或不可变列表。在上面的例子中,我使用了一个不可变列表但是使用可变本机数组有什么好处吗?我没有看到任何。
  3. 如果我们将组件的历史记录保存在this.props.state中或作为该类的成员属性,
  4. 还要继续#2
  5. 我看到不可变的唯一好处就是能够回到过去是因为结构共享而节省空间所以只有在组件具有大量状态

0 个答案:

没有答案