如何理解JSX和React組件?

　　如何理解JSX和React組件?JSX 實際上是一個 JavaScript 對象，所以在使用 React 和 JSX 時，必須經過編譯過程。React 核心機制 virtual DOM，可以在內存中創建的虛擬 DOM 元素。React 利用虛擬 DOM 減少對實際 DOM 的操作以提高性能，虛擬 DOM 也可以通過 JavaScript 創建。

　　Reactjs 起源于 Facebook 的內部項目。它是一個用于構建用戶界面的 javascript 庫。相當于MVC架構中的V層框架。與市場上的其他框架不同，React 將每個組件都視為狀態機。組件狀態的變化是通過狀態來維護的。當組件的狀態發生變化時，React 使用虛擬 DOM 技術來增量和高效地更新真實 DOM。

　　1)，JSX的優勢和局限

　　1、 將相關代碼放在一起，便于維護，這是單個組件所必需的。

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

　　3、jsx中的{}只能是表達式，不能是語句，因為jsx可以通過babel轉換成React.createElement的形式渲染，但是React.createElement中的參數只能是表達式公式不能是語句(如for循環、if判斷等)，jsx中render函數的{}中不能使用push()、reverse()等數組方法，因為render應該是純函數，而純函數不應該有副作用。渲染應該是狀態或道具。如果使用 push() 和 reverse() 等數組方法，則直接修改 state 或 props 中的數據，而不是生成新數據。

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

　　在react中，data包括：satae和props，props是從外部組件傳遞過來的數據，satae是組件的內部狀態，一個組件自己的satae可以作為傳遞給其子組件的props的數據源，一個組件如果要改變自己的狀態，只能通過setState來改變自己的狀態。一個組件不能通過修改自己的props直接改變自己的更新狀態，也不能修改自己的porps，因為修改自己的props會很亂。只要 props 能處理事情，盡量不要使用 state。

　　使用parent傳遞過來的props作為child的狀態會導致值引用對象影響的問題，即如果我改變child的狀態，parent props也會隨之改變

　　3)，React 組件的生命周期

　　React 組件的生命周期分為三個過程：

　　mount：從頭開始的過程

　　update：重新渲染，分為狀態改變觸發和props觸發

　　卸載：從有到無

　　掛載過程：getDefaultProps getInitialState componentWillMount render componentDidMount：這個函數只能在瀏覽器端執行，但是在使用React做服務端渲染時，就不能在服務端執行(因為在服務端突出的那個—— side是一個字符串，基本上沒有掛載DOM樹的參數，所以不會執行)，

　　狀態變化引起的更新過程：

　　shouldComponentUpdate 組件WillUpdate 渲染組件DidUpdate

　　父組件想要渲染這個組件變化引起的更新過程：

　　componentWillReceiveProps shouldComponentUpdate componentWillUpdate 渲染 componentDidUpdate

　　如果父組件不需要重新渲染，shouldComponentUpdate會返回false，所以后續的componentWillUpdate、render、componentDidUpdate都不會執行。

　　無論是掛載過程中的render函數之前的聲明周期還是更新過程中，獲取到的state或者props都是之前沒有變化過的數據。只有在render函數之后才是數據改變后的狀態。

　　4)、為什么要嘗試構建無狀態組件

　　無狀態組件是一個純函數。盡量使組件成為純函數形式的無狀態組件。因為可以減少一些bug的出現，所以我們應該集中管理一些有狀態的組件(也就是它們包含狀態)，并且讓它們的子組件是無狀態的組件，這樣便于管理和維護，

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

　　HoC高階組件使用場景，與高階組件共享一個通用功能，無需編寫相同的功能代碼。

　　6)，組件之間的通信

　　父組件以properties的形式向子組件傳遞參數，子組件通過props接受父組件傳遞的參數;

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

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

　　任何組件之間的通信都可以通過設置一個全局變量來傳遞數據。

　　如果這個項目比較復雜，當然也可以使用redux來進行組件間的通信。

　　更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。