如何理解JSX和React組件?JSX 實(shí)際上是一個(gè) JavaScript 對(duì)象，所以在使用 React 和 JSX 時(shí)，必須經(jīng)過(guò)編譯過(guò)程。React 核心機(jī)制 virtual DOM，可以在內(nèi)存中創(chuàng)建的虛擬 DOM 元素。React 利用虛擬 DOM 減少對(duì)實(shí)際 DOM 的操作以提高性能，虛擬 DOM 也可以通過(guò) JavaScript 創(chuàng)建。

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

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

　　1、 將相關(guān)代碼放在一起，便于維護(hù)，這是單個(gè)組件所必需的。

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

　　3、jsx中的{}只能是表達(dá)式，不能是語(yǔ)句，因?yàn)閖sx可以通過(guò)babel轉(zhuǎn)換成React.createElement的形式渲染，但是React.createElement中的參數(shù)只能是表達(dá)式公式不能是語(yǔ)句(如for循環(huán)、if判斷等)，jsx中render函數(shù)的{}中不能使用push()、reverse()等數(shù)組方法，因?yàn)閞ender應(yīng)該是純函數(shù)，而純函數(shù)不應(yīng)該有副作用。渲染應(yīng)該是狀態(tài)或道具。如果使用 push() 和 reverse() 等數(shù)組方法，則直接修改 state 或 props 中的數(shù)據(jù)，而不是生成新數(shù)據(jù)。

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

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

　　使用parent傳遞過(guò)來(lái)的props作為child的狀態(tài)會(huì)導(dǎo)致值引用對(duì)象影響的問(wèn)題，即如果我改變child的狀態(tài)，parent props也會(huì)隨之改變

　　3)，React 組件的生命周期

　　React 組件的生命周期分為三個(gè)過(guò)程：

　　mount：從頭開(kāi)始的過(guò)程

　　update：重新渲染，分為狀態(tài)改變觸發(fā)和props觸發(fā)

　　卸載：從有到無(wú)

　　掛載過(guò)程：getDefaultProps getInitialState componentWillMount render componentDidMount：這個(gè)函數(shù)只能在瀏覽器端執(zhí)行，但是在使用React做服務(wù)端渲染時(shí)，就不能在服務(wù)端執(zhí)行(因?yàn)樵诜?wù)端突出的那個(gè)—— side是一個(gè)字符串，基本上沒(méi)有掛載DOM樹(shù)的參數(shù)，所以不會(huì)執(zhí)行)，

　　狀態(tài)變化引起的更新過(guò)程：

　　shouldComponentUpdate 組件WillUpdate 渲染組件DidUpdate

　　父組件想要渲染這個(gè)組件變化引起的更新過(guò)程：

　　componentWillReceiveProps shouldComponentUpdate componentWillUpdate 渲染 componentDidUpdate

　　如果父組件不需要重新渲染，shouldComponentUpdate會(huì)返回false，所以后續(xù)的componentWillUpdate、render、componentDidUpdate都不會(huì)執(zhí)行。

　　無(wú)論是掛載過(guò)程中的render函數(shù)之前的聲明周期還是更新過(guò)程中，獲取到的state或者props都是之前沒(méi)有變化過(guò)的數(shù)據(jù)。只有在render函數(shù)之后才是數(shù)據(jù)改變后的狀態(tài)。

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

　　無(wú)狀態(tài)組件是一個(gè)純函數(shù)。盡量使組件成為純函數(shù)形式的無(wú)狀態(tài)組件。因?yàn)榭梢詼p少一些bug的出現(xiàn)，所以我們應(yīng)該集中管理一些有狀態(tài)的組件(也就是它們包含狀態(tài))，并且讓它們的子組件是無(wú)狀態(tài)的組件，這樣便于管理和維護(hù)，

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

　　HoC高階組件使用場(chǎng)景，與高階組件共享一個(gè)通用功能，無(wú)需編寫(xiě)相同的功能代碼。

　　6)，組件之間的通信

　　父組件以properties的形式向子組件傳遞參數(shù)，子組件通過(guò)props接受父組件傳遞的參數(shù);

　　如果子組件要與父組件通信，子組件需要調(diào)用父組件傳遞的方法;

　　兄弟組件之間的通信可以使用父組件作為中介來(lái)傳遞數(shù)據(jù)(父組件中寫(xiě)了兩個(gè)函數(shù)，這兩個(gè)函數(shù)分別傳遞給兩個(gè)子組件，然后相互引用)

　　任何組件之間的通信都可以通過(guò)設(shè)置一個(gè)全局變量來(lái)傳遞數(shù)據(jù)。

　　如果這個(gè)項(xiàng)目比較復(fù)雜，當(dāng)然也可以使用redux來(lái)進(jìn)行組件間的通信。

　　更多關(guān)于“web前端培訓(xùn)”的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。