在前一篇文章 [React Js] JSX 與 Babel 簡介 [https://goo.gl/sKd7wg] 中我們有提到關於 JSX 的作用,與使用
Babel 來編譯 JSX 的語法
這篇文章將對 JSX 的語法進行紀錄和說明:
> 建議在閱讀此篇文章之前,要先有些 React 的觀念,並有初步對 JSX 有認識
--------------------------------------------------------------------------------
首先先讓我們再複習一次,什麼是
JSX 主要使用於 簡化 React 的 React.createElement() 的方法,實際範例如下:
React.createElement() 寫法:
React.createComponent('h1',null,'我是標題');
JSX 寫法:
<h1>我是標題</h1>
但是在每個 主流 瀏覽器中,
組件(component) 的 狀態(state),為 React 組件(component) 中可以自己自訂的一個物件。
當 state 這個物件有變化時,React 就會自動 重新 渲染,當前的 React Element
> 簡單來說當 React 偵測 到 state 的這個物件的資料有變化時,就會自動在前端上,重新 繪製 當前的物件,達到 更新
通常在 React 的組件 (Component) 中,有三個重要的操作:
* 建立組件
* 更新組件
* 刪除組件
而這些操作各自的流程,就是 React 的 生命週期,下面會根據不同操作來個別紀錄:
--------------------------------------------------------------------------------
建立組件:
constructor() :
* 執行建立組件的 建構式(constructor)
componentWillMount() :
* 正要把 React Element 放到畫面上,組件 在渲染 之前
render() :
* 將 React Element
在之前的文章,[React Js] React 入門 :建立 組件 ( Component ) [https://goo.gl/f5vKDT]
中有學到了如何建立一個 React 的 組件 (Component) 了,接著我們繼續來看組件中的 屬性 (props) :
--------------------------------------------------------------------------------
其實 組件 ( Component ) 的 屬性 ( props ) 就只是在 React.createElement() 的方法中一個 物件