本期web前端培訓(xùn)技術(shù)分享：JSX其實(shí)是JavaScript對(duì)象，所以使用 React和JSX的時(shí)候一定要經(jīng)過(guò)編譯的過(guò)程。React核心機(jī)制虛擬DOM，可在內(nèi)存中創(chuàng)建的虛擬DOM元素。React利用虛擬DOM減少對(duì)實(shí)際DOM的操作提升性能，虛擬DOM也可以通過(guò)JavaScript來(lái)創(chuàng)建。

　　web前端培訓(xùn)技術(shù)分享：如何深入理解JSX和React組件?

　　Reactjs 起源于Facebook內(nèi)部項(xiàng)目，是一個(gè)用來(lái)構(gòu)建用戶界面的 javascript 庫(kù)，相當(dāng)于MVC架構(gòu)中的V層框架，與市面上其他框架不同的是，React 把每一個(gè)組件當(dāng)成了一個(gè)狀態(tài)機(jī)，組件內(nèi)部通過(guò)state來(lái)維護(hù)組件狀態(tài)的變化，當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React通過(guò)虛擬DOM技術(shù)來(lái)增量并且高效的更新真實(shí)DOM。

　　1)、JSX的優(yōu)勢(shì)和局限

　　1、把相關(guān)的code放到一起，好維護(hù)，這樣就是一個(gè)單獨(dú)的組件所必須的。

　　2、render函數(shù)是一個(gè)純函數(shù)，沒(méi)有做渲染的事情，它只不過(guò)就是返回了一些指令，然后通過(guò)這些指令由React通過(guò)DOM或者虛擬DOM來(lái)進(jìn)行操作，所以react返回的結(jié)果都是通過(guò) React.createElement產(chǎn)生的結(jié)果

　　3、jsx中的{}中只能是一個(gè)表達(dá)式，不能是一個(gè)語(yǔ)句，因?yàn)閖sx可以通過(guò)babel轉(zhuǎn)換成React.createElement的形式進(jìn)行渲染，但是React.createElement中的參數(shù)只能是一個(gè)表達(dá)式，不能是一個(gè)語(yǔ)句(比如for循環(huán)、if判斷等)，同時(shí)jsx中的render函數(shù)的{}中不能使用push()、reverse()等數(shù)組方法，因?yàn)閞ender應(yīng)該是一個(gè)純函數(shù)，純函數(shù)不應(yīng)該有副作用，渲染的應(yīng)該是state或者props，如果使用了push()、reverse()等數(shù)組方法，那么就會(huì)直接修改state或者props里面的數(shù)據(jù)，而并不是產(chǎn)生新的數(shù)據(jù)

　　2)、什么使用props什么時(shí)候使用state?

　　在react中data包括：satae和props，props是從外部的組件中傳過(guò)來(lái)的數(shù)據(jù)，而satae是組件內(nèi)部狀態(tài)，一個(gè)組件的自己的satae可以作為傳遞給它子組件的props的數(shù)據(jù)來(lái)源，一個(gè)組件想要改變自己的狀態(tài)只能通過(guò)setState來(lái)進(jìn)行改變自己的狀態(tài)，一個(gè)組件不能夠直接通過(guò)修改自己的props來(lái)改變自己的更新?tīng)顟B(tài)，也不能修改自己的porps，因?yàn)樾薷淖约旱膒rops會(huì)很亂的。但凡props能夠搞定的事情，盡量不要使用state。

　　將父級(jí)所傳遞的props，作為子級(jí)的state，是會(huì)產(chǎn)生值引用對(duì)象影響問(wèn)題，也就是我更改子級(jí)state，父級(jí)props被相應(yīng)更改

　　3)、React組件的生命周期

　　React組件的生命周期三種過(guò)程：

　　mount：從無(wú)到有的過(guò)程

　　update: 重新渲染，又分為state change引發(fā)的，和props引發(fā)的

　　unmount：從有到無(wú)

　　mount過(guò)程： getDefaultProps getInitialState componentWillMount render componentDidMount：這個(gè)函數(shù)只能在瀏覽器端執(zhí)行，但是使用react做服務(wù)器端渲染的時(shí)候，不能在服務(wù)器端執(zhí)行(因?yàn)樵诜?wù)器端突出出來(lái)的是一個(gè)字符串，根本上就沒(méi)有一個(gè)DOM-tree被mount的說(shuō)法，所以不會(huì)執(zhí)行)，

　　因state改變引發(fā)的update過(guò)程：

　　shouldComponentUpdate componentWillUpdate render componentDidUpdate

　　因父組件想要render這個(gè)組件改變引發(fā)的update過(guò)程：

　　componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate

　　如果當(dāng)父組件不需要重新渲染，shouldComponentUpdate 會(huì) 返回一個(gè)false，那樣后面的componentWillUpdate、render、componentDidUpdate 就不會(huì)執(zhí)行。

　　無(wú)論是mount過(guò)程還是update過(guò)程中的render函數(shù)之前的聲明周期，獲取的到的state或者是props都是之前未改變的數(shù)據(jù)，只有render函數(shù)之后，才是數(shù)據(jù)改變之后的狀態(tài)，

　　4)、為什么盡量構(gòu)建無(wú)狀態(tài)組件

　　無(wú)狀態(tài)組件就是一個(gè)純函數(shù)，盡量讓組件成為一個(gè)純函數(shù)形式的無(wú)狀態(tài)組件，因?yàn)榭梢詼p少一些bug出現(xiàn)，我們應(yīng)該把一些有狀態(tài)組件(就是里面含有state)集中起來(lái)進(jìn)行管理，讓其子組件是一個(gè)無(wú)狀態(tài)組件，這樣好管理，好維護(hù)，

　　5)、創(chuàng)建高階組件(HoC，Higher-Order Component)

　　HoC 高階組件使用場(chǎng)景把一個(gè)通用的功能，使用高階組件進(jìn)行共用，這樣就不必寫同樣的功能代碼了。

　　6)、組件之間通訊

　　父組件通過(guò)屬性的形式向子組件傳遞參數(shù)，子組件通過(guò)props接受父組件傳遞過(guò)來(lái)的參數(shù);

　　子組件如果想和父組件通信，子組件要調(diào)用父組件傳遞過(guò)來(lái)的方法;

　　兄弟組件之間的通訊可以借助于父組件作為中介，進(jìn)行傳遞數(shù)據(jù)(父組件中寫兩個(gè)函數(shù)，這兩個(gè)函數(shù)分別傳給兩個(gè)子組件，然后互相之間進(jìn)行相互引用，)

　　任意組件之間的通訊可以通過(guò)設(shè)置一個(gè)全局變量來(lái)作為中介，進(jìn)行傳遞數(shù)據(jù)。

　　如果這個(gè)項(xiàng)目比較大的話，當(dāng)然也可以使用redux進(jìn)行組件之間的通訊。

　　如何深入理解JSX和React組件?以上就是為大家做的詳細(xì)介紹，如果您想了解更多關(guān)于web前端培訓(xùn)的相關(guān)資料及信息，可以咨詢我們的客服小姐姐，他們會(huì)為您做詳細(xì)的解答。