2.2.3 prop和state的對(duì)比

總結(jié)一下prop和state的區(qū)別：

□ prop用于定義外部接口，state用于記錄內(nèi)部狀態(tài)；

□ prop的賦值在外部世界使用組件時(shí)，state的賦值在組件內(nèi)部；

□ 組件不應(yīng)該改變prop的值，而state存在的目的就是讓組件來改變的。

組件的state，就相當(dāng)于組件的記憶，其存在意義就是被修改，每一次通過this. setState函數(shù)修改state就改變了組件的狀態(tài)，然后通過渲染過程把這種變化體現(xiàn)出來。

但是，組件是絕不應(yīng)該去修改傳入的props值的，我們設(shè)想一下，假如父組件包含多個(gè)子組件，然后把一個(gè)JavaScript對(duì)象作為props值傳給這幾個(gè)子組件，而某個(gè)子組件居然改變了這個(gè)對(duì)象的內(nèi)部值，那么，接下來其他子組件讀取這個(gè)對(duì)象會(huì)得到什么值呢？當(dāng)時(shí)讀取了修改過的值，但是其他子組件是每次渲染都讀取這個(gè)props的值呢？還是只讀一次以后就用那個(gè)最初值呢？一切皆有可能，完全不可預(yù)料。也就是說，一個(gè)子組件去修改props中的值，可能讓程序陷入一團(tuán)混亂之中，這就完全違背了React設(shè)計(jì)的初衷。

還記得第1章中我們看到的那個(gè)公式嗎？

UI=render(data)

React組件扮演的是render函數(shù)的角色，應(yīng)該是一個(gè)沒有副作用的純函數(shù)。修改props的值，是一個(gè)副作用，組件應(yīng)該避免。

嚴(yán)格來說，React并沒有辦法阻止你去修改傳入的props對(duì)象。所以，每個(gè)開發(fā)者就把這當(dāng)做一個(gè)規(guī)矩，在編碼中一定不要踩這兒紅線，不然最后可能遇到不可預(yù)料的bug。