快速學習ReactJS-快速入門
- 2020 年 2 月 14 日
- 筆記
2.4 React快速入門
2.4.1、JSX語法
JSX語法就是，可以在js文件中插入html片段，是React自創的一種語法。JSX語法會被Babel等轉碼工具進行轉碼，得到正常的js程式碼再執行。 使用JSX語法，需要2點注意：
- 所有的html標籤必須是閉合的，如：
hello world
寫成這樣是不可以的：
hello world
- 在JSX語法中，只能有一個根標籤，不能有多個。
在JSX語法中，如果想要在html標籤中插入js腳本，需要通過{}插入js腳本。
2.4.2、組件
在React中，這樣定義一個組件：
查看效果：
2.4.2.1、導入自定義組件
創建Show.js文件，用於測試導入組件：
2.4.2.2、組件參數
組件是可以傳遞參數的，有2種方式傳遞，分別是屬性和標籤包裹的內容傳遞，具體使用如下：
其中，name="zhangsan"就是屬性傳遞，shanghai就是標籤包裹的內容傳遞。那麼，在HelloWord.js組件中如何接收參數呢？ 對應的也是2種方法：
- 屬性：this.props.name 接收；
- 標籤內容：this.props.children 接收； 使用如下：
測試：
2.4.2.3、組件的狀態
每一個組件都有一個狀態，其保存在this.state中，當狀態值發生變化時，React框架會自動調用render()方法，重新 渲染頁面。
其中，要注意兩點： 一： this.state值的設置要在構造參數中完成； 二：要修改this.state的值，需要調用this.setState()完成，不能直接對this.state進行修改； 下面通過一個案例進行演示，這個案例將實現：通過點擊按鈕，不斷的更新this.state，從而反應到頁面中。
初始狀態：
當點擊「添加」按鈕：
過程分析：
2.4.2.4、生命周期
組件的運行過程中，存在不同的階段。React 為這些階段提供了鉤子方法，允許開發者自定義每個階段自動執行的函數。這些方法統稱為生命周期方法（lifecycle methods）
生命周期示例：
測試結果：
