web前端培訓技術分享：如何深入理解JSX和React組件?

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

　　web前端培訓技術分享：如何深入理解JSX和React組件?

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

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

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

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

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

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

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

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

　　3)、React組件的生命周期

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

　　mount：從無到有的過程

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

　　unmount：從有到無

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

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

　　shouldComponentUpdate componentWillUpdate render componentDidUpdate

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

　　componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate

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

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

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

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

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

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

　　6)、組件之間通訊

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

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

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

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

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

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