一、React中Props與state的區(qū)別
1、數(shù)據(jù)來(lái)源不同
props
是由父組件傳遞給子組件的數(shù)據(jù),可以認(rèn)為是只讀的,子組件不能直接修改props
的值。而state
是組件內(nèi)部自己管理的數(shù)據(jù),可以由組件自己修改。
2、數(shù)據(jù)類型
props
可以傳遞任何JavaScript類型的數(shù)據(jù),包括基本數(shù)據(jù)類型、對(duì)象、數(shù)組等。而state
一般是對(duì)象類型。
3、生命周期
組件的props
可以在組件的生命周期中任意時(shí)刻被更新,因?yàn)樗怯筛附M件傳遞給子組件的。而state
一般在constructor
中初始化,在組件的生命周期中被更新,但不能在生命周期外部直接修改。
4、作用范圍
props
的作用范圍是整個(gè)組件樹(shù),也就是所有子組件都可以使用父組件傳遞過(guò)來(lái)的props
。而state
的作用范圍是組件內(nèi)部,只有當(dāng)前組件可以訪問(wèn)和修改。
5、優(yōu)化性能
由于props
是只讀的,當(dāng)父組件重新渲染時(shí),即使props
值沒(méi)有發(fā)生改變,子組件也會(huì)重新渲染。而通過(guò)使用shouldComponentUpdate
等生命周期函數(shù),可以避免不必要的子組件重復(fù)渲染。