Question

我已经读过，如果你要进行深度树比较，那么Immutable.js才有意义。所以我假设我的应用程序状态如下：

const taskList = [
{
    name: 'task 1',
    priority: '1',
    isDone: false

},
{
    name: 'task 2',
    priority: '1',
    isDone: false

},
{
    name: 'task 3',
    priority: '1',
    isDone: false

}
];

它不是很有用，它应该看起来像这样有用：

{ 
    "stuff": {
        "onetype": [
            {"id":1,"name":"John Doe"},
            {"id":2,"name":"Don Joeh"}
        ],
        "othertype": {"id":2,"company":"ACME"}
    }, 
    "otherstuff": {
        "thing": [[1,42],[2,2]]
     }
}

这样我们就可以使用浅层比较：

shouldComponentUpdate(nextProps) {

    return (this.props.name !== nextProps.name || this.props.priority !== nextProps.priority || this.props.isDone !== nextProps.isDone  );
}

而不是遍历树，这是昂贵的。但否则，有没有理由使用Immutable.js？以上工作与taskList就好了。在哪种情况下真的需要这个？

编辑：我一直在使用lodash，我只是听说lodash考虑到了可变性，但我不确定它是如何与Immutable.js做同样的事情而没有不可变的。

toggleTask(task) {
    const found = _.find(this.state.taskList, task => task.name === task);
    found.isDone = !found.isDone;
    this.setState({ taskList: this.state.taskList });
}

Answer 1

如果您渲染的taskList很大且元素经常更新，则使用immutableJS对象将阻止您重新渲染所有列表元素。

例如。可以说，有一个1000个任务的列表，它们在页面上呈现。现在您进行了另一个服务器轮询（或推送），并且您获得了相同的1000个任务，其中一个任务属性isDone已更改。因此，如果您只是用旧的tasksList数组替换旧的tasksList数组，那么所有的react组件都将重新呈现，因为列表中的每个项都是一个新元素，浅层比较失败，这就会触发每个列表项组件的所有生命周期方法。但是如果你的taskList是一个不可变列表，那么你执行一个taskList.mergeDeep（newTaskList），只有List的引用和已更新的一个元素被更改。因此，除了已更改的任务项之外，每个其他列表项都不会超过浅层比较。

何时在React中使用Immutable.js是有意义的？

1 个答案: