Immutable的后浪——Immer.js

1、immutable的后浪immer.js簡(jiǎn)介 react的reconciliation解決了虛擬dom更新的問(wèn)題，但沒(méi)有對(duì)在什么場(chǎng)景下優(yōu)化更新給出解決計(jì)劃，它不像reactive那樣能自動(dòng)跟蹤狀態(tài)變幻，而是把這個(gè)難題通過(guò)shouldcomponentupdate這個(gè)口子留給了開(kāi)發(fā)者。于是開(kāi)發(fā)者需要針對(duì)前后狀態(tài)的變幻舉行對(duì)照，以打算要不要繼續(xù)渲染更新dom。假如狀態(tài)對(duì)象的層次很深很復(fù)雜，那么這個(gè)對(duì)照必定會(huì)很疼痛。 但是話說(shuō)回歸，假如比較得很疼痛，那很有可能狀態(tài)對(duì)象設(shè)計(jì)的有問(wèn)題 于是immutable出生了，容易的可以把immutable看做是一個(gè)黑盒，輸入是對(duì)象a，輸出是一個(gè)對(duì)象a&ls

2、quo;。 用公式表示就是 如果輸入對(duì)象a1和a2徹低一樣（但仍然不是同一個(gè)實(shí)例），那么輸出的a1&39;和a2’能便利地比較出是否相等（提供了api挺直調(diào)用來(lái)比較），同時(shí)也能從a1&39;或a2&39;里拿出a1或a2的原始數(shù)據(jù)（但a1&39;和a2‘仍然是兩個(gè)不同的實(shí)例）。后續(xù)更新的操作也都是要通過(guò)a&39;的api來(lái)舉行了，也就是說(shuō)原始對(duì)象已經(jīng)離你遠(yuǎn)去。 名氣最大的immutable解決計(jì)劃就是當(dāng)年的immutable.js，本文介紹的immer.js屬于immutable界的后浪。immer這個(gè)詞來(lái)自于德語(yǔ)

3、的always，它的作者同時(shí)也是mobx的作者。 先上圖，看樣子仍然是個(gè)黑盒不變。 假如真沒(méi)任何變幻，那也稱不上是后浪了。它基于copy-on-write機(jī)制——在當(dāng)前的狀態(tài)數(shù)據(jù)上復(fù)制出一份暫時(shí)的草稿，然后對(duì)這份草稿涂涂改改，最后生成新的狀態(tài)數(shù)據(jù)。借力于es6的proxy，只需要挺直修改對(duì)象即可，不需要調(diào)用復(fù)雜的api（幾乎只用到一個(gè)produce函數(shù)?。?，跟響應(yīng)式的自動(dòng)跟蹤是一樣的。 官網(wǎng)文檔將其比方成你的小秘（不是小蜜），這個(gè)小秘復(fù)制一份你的信給你涂改，然后按照涂改能幫你打印出一份新的修改后的信件。 import produce from &

4、quot;immer" const basestate = todo: "learn typescript", done: true , todo: "try immer", done: false const nextstate = produce（basestate, draftstate => draftstate.push（todo: "tweet about it"） draftstate1.done = true ） 假如了解響應(yīng)式的話，會(huì)發(fā)覺(jué) 在re

5、act里，setstate就變成了 this.setstate（ produce（draft => draft.user.age += 1 ） ） 在redux里，reducer就變成了 const byid = produce（draft, action） => switch （action.type） case receive_products: ducts.foreach（product => draftproduct.id = product ） ） default分支也可以省略，由于produce辦法默認(rèn)返回原始對(duì)象實(shí)例。 也有個(gè)例外，就是假如要返回undefined還不能挺直干，得要返回nothing import produce, nothing from "immer" const state = hello: "world" produce（state, draft => ） produce（state, draft => undefined） / both return the original state: hello: "world" prod