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數(shù)據(jù)一旦被創(chuàng)建就不能被修改，這就使得程序開發(fā)變得更加簡易，無需進(jìn)行防數(shù)據(jù)修改式的復(fù)制，且通過簡單的邏輯就能實現(xiàn)高級存儲和修改檢測技術(shù)。
生硬的去翻譯的話，官網(wǎng)第一句話大致就是上述含義。
最近在使用react的時候，最常碰到的問題就是對于state中數(shù)據(jù)的更改變化，在多次嘗試之后，我發(fā)現(xiàn)，在使用mobx的時候，一不注意就會修改覆蓋掉以前的值，如果沒有額外對于state中的值進(jìn)行防護(hù)性修改或者復(fù)制的話，就很容易為后續(xù)的開發(fā)埋下一些隱患。最近接觸到了immutable，于是做了一些相關(guān)的學(xué)習(xí)。

實踐中使用到的部分

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()(支持鏈?zhǔn)秸{(diào)用)
   該方法，主要用于在immutable對象中取得對應(yīng)的屬性，且不影響原值
4. set()(支持鏈?zhǔn)秸{(diào)用)
   該方法，主要用于在immutable對象中設(shè)置對應(yīng)的屬性，在不改動原值的基礎(chǔ)上返回新修改的值

// 在set方法的實現(xiàn)細(xì)節(jié)中，會返回一個新的值，原來的focused不會因此發(fā)生變化
state.set('focused', true)

5. getIn()
   如果當(dāng)我們的數(shù)據(jù)嵌套多層的時候，則可以使用getIn來縮小數(shù)據(jù)查找范圍。例如

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

此外，如果在給定范圍中找不到所需要的內(nèi)容，可以給出一個類似于回退機(jī)制的值notSetValue,例如：

image.png

image.png

image.png

很明顯，從所給出的值中根本找不到所謂的pag，那么此時如果想從props中取得對應(yīng)的page,自然會回退到我們給出的notSetValue,我稱之為未設(shè)值。
這樣一來，對于一開始不存在的值，我們可以設(shè)置一個默認(rèn)的值。