組件化的缺點(diǎn)

我不得不說(shuō)，到目前為止，我在寫基于React的項(xiàng)目時(shí)感受最痛苦的事情是組件狀態(tài)過(guò)多。

狀態(tài)使組件難以測(cè)試

在測(cè)試有狀態(tài)組件時(shí)，我們需要使組件進(jìn)入“正確的狀態(tài)”，以測(cè)試其行為。我們還需要處理狀態(tài)的各種組合（組件可以隨時(shí)更改）和交互（組件無(wú)法控制），并確定要測(cè)試的項(xiàng)以及如何進(jìn)行測(cè)試。

狀態(tài)使組件難以推理

在組件狀態(tài)非常多的時(shí)候，你看代碼的時(shí)候必須在精神上加倍努力，用來(lái)跟蹤發(fā)生的一切問(wèn)題。比如“是否已初始化該狀態(tài)？”，“如果在此更改此狀態(tài)會(huì)發(fā)生什么？”，“還有多少其他地方更改此狀態(tài)”，“此狀態(tài)是否存在關(guān)聯(lián)條件？”之類的問(wèn)題。都是常見(jiàn)的問(wèn)題。跟蹤有狀態(tài)的組件來(lái)弄清楚它們的行為變得非常痛苦。

將業(yè)務(wù)邏輯狀態(tài)放在組件中非常普遍。當(dāng)您的項(xiàng)目大部分狀態(tài)都位于組件中時(shí)，即可輕松訪問(wèn) this.state，開(kāi)始將比如計(jì)算或驗(yàn)證之類的內(nèi)容也寫到組件里面，放入不屬于該組件的內(nèi)容中變得很常見(jiàn)。

當(dāng)一個(gè)組件擁有一個(gè)狀態(tài)時(shí)，很容易將其進(jìn)一步傳遞給組件內(nèi)部其他組件，這里的耦合關(guān)系，使項(xiàng)目變得更加難以維護(hù)。

當(dāng)然，有時(shí)特定組件完全擁有特定狀態(tài)是有意義的。在這種情況下，可以繼續(xù)使用this.setState。這是React組件API合理的部分，我不想給人以為它應(yīng)該是在項(xiàng)目中禁止使用。

每次將狀態(tài)添加到組件時(shí)，請(qǐng)務(wù)必意識(shí)到。一旦開(kāi)始把狀態(tài)寫到組件里面，之后是否會(huì)導(dǎo)致?tīng)顟B(tài)在項(xiàng)目中難以維護(hù)。