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

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

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

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

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

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

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

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

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

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

　　3)、React組件的生命周期

　　React組件的生命周期三種過程：

　　mount：從無到有的過程

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

　　unmount：從有到無

　　mount過程： getDefaultProps getInitialState componentWillMount render componentDidMount：這個函數(shù)只能在瀏覽器端執(zhí)行，但是使用react做服務(wù)器端渲染的時候，不能在服務(wù)器端執(zhí)行(因為在服務(wù)器端突出出來的是一個字符串，根本上就沒有一個DOM-tree被mount的說法，所以不會執(zhí)行)，

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

　　shouldComponentUpdate componentWillUpdate render componentDidUpdate

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

　　componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate

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

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

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

　　無狀態(tài)組件就是一個純函數(shù)，盡量讓組件成為一個純函數(shù)形式的無狀態(tài)組件，因為可以減少一些bug出現(xiàn)，我們應(yīng)該把一些有狀態(tài)組件(就是里面含有state)集中起來進行管理，讓其子組件是一個無狀態(tài)組件，這樣好管理，好維護，

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

　　HoC 高階組件使用場景把一個通用的功能，使用高階組件進行共用，這樣就不必寫同樣的功能代碼了。

　　6)、組件之間通訊

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

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

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

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

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

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