immutable的初步学习

immutable是什么

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

immutable数据一旦被创建就不能被修改，这就使得程序开发变得更加简易，无需进行防数据修改式的复制，且通过简单的逻辑就能实现高级存储和修改检测技术。
生硬的去翻译的话，官网第一句话大致就是上述含义。
最近在使用react的时候，最常碰到的问题就是对于state中数据的更改变化，在多次尝试之后，我发现，在使用mobx的时候，一不注意就会修改覆盖掉以前的值，如果没有额外对于state中的值进行防护性修改或者复制的话，就很容易为后续的开发埋下一些隐患。最近接触到了immutable，于是做了一些相关的学习。

实践中使用到的部分

1. fromJS()
   该方法，主要用于将普通的js对象变换为immutable对象

const defaultState = fromJS({
    focused: false,
    list: [],
    page: 0,
    totalPage: 1,
    mouseIn: false,
});

2. toJS()
   该方法，主要用于将immutable对象变换为普通的js对象

const {list} = this.props;
console.log('list in JS', list);
const newList = list.toJS();
console.log('list in Immutable', newList);

image.png

3. get()(支持链式调用)
   该方法，主要用于在immutable对象中取得对应的属性，且不影响原值
4. set()(支持链式调用)
   该方法，主要用于在immutable对象中设置对应的属性，在不改动原值的基础上返回新修改的值

// 在set方法的实现细节中，会返回一个新的值，原来的focused不会因此发生变化
state.set('focused', true)

5. getIn()
   如果当我们的数据嵌套多层的时候，则可以使用getIn来缩小数据查找范围。例如

// BAD
focused: state.get('header').get('focused'),
// GOOD
focused: state.getIn(['header', 'focused']),

此外，如果在给定范围中找不到所需要的内容，可以给出一个类似于回退机制的值notSetValue,例如：

image.png

image.png

image.png

很明显，从所给出的值中根本找不到所谓的pag，那么此时如果想从props中取得对应的page,自然会回退到我们给出的notSetValue,我称之为未设值。
这样一来，对于一开始不存在的值，我们可以设置一个默认的值。