你必須知道的React的知識點：單向資料流，高效能虛擬DOM，元件間的資料互動，事件與資料的雙向繫結，生命週期鉤子，fetch：資料請求等
1、React除錯工具：React Developer Tools
2、React開發工具：Atom
3、React UI庫：Material-UI / Ant Deaign
4、React適用場景：資料不斷變化的大型應用程式
5、前端UI構建方式：資料模型、UI介面
6、單向資料流：資料模型驅動UI介面（從資料到檢視的資料流動）
7、高效能虛擬DOM：
-
虛擬DOM是在瀏覽器端用JS實現了一套DOM API
-
每當資料變化時，React會重新構建整個DOM樹，並將當前的樹和上一次的DOM樹進行對比，得到DOM結構的區別。然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新
-
而且，React能夠批處理虛擬DOM的重新整理，在上一個事件迴圈內兩次資料變化會被合併
-
雖然每次都要構造完整的虛擬DOM樹，但因為它是記憶體資料，效能極高，對實際DOM的操作，僅僅是Diff部分
8、元件：將UI拆成不同的元件，每個元件獨立封裝，每個元件只關心自己的邏輯，彼此獨立。元件應具備特徵：可組合、可複用、可維護、可測試
9、元件間的資料互動：
-
state：自身屬性的初始化賦值
-
-
作用域：只會管理當前的這個Class作用域，不會汙染其他模組
-
this.state.xxx更改了state裡的資料，但是不會改變檢視
-
this.setState({xxx: changeXxx})會立即引起頁面的重繪，Diff運算後只更改資料變化的地方。
-
-
props：外來屬性的管理
-
-
建構函式construtor裡的super：呼叫基類所有的初始化方法
-
用於初始化子元件資料
-
React 認為，props屬性應該是隻讀的，一旦賦值過去就不要再變化了
-
在開始和結束標籤之間放入一個字串，則props.children就是那個字串。（傳遞給自定義元件的子代可以是任何元素，只要該元件在React渲染前將其轉換成React能夠理解的東西）
-
-
construtor定義的屬性：this.xxx
-
-
該屬性改變不會引發檢視的改變，並且屬於當前類Class的作用域
-
可定義的值：只在本元件內使用且不需要改變檢視的值
-
-
在當前元件裡，但是在類Class外面定義的變數：const xxx = ''
-
-
該屬性改變不會引發檢視改變，並且屬於當前元件的作用域
-
10、事件與資料的雙向繫結：子元件向父元件傳遞資料
-
普通函式需要手動繫結this，不然函式裡的this指向會有問題：onClick={this.changeEvent.bind(this)}（或者使用箭頭函式）
-
子元件呼叫父元件的函式：實現子元件向父元件傳遞引數
在子頁面中通過 呼叫父頁面傳遞過來的事件 props 進行元件間的引數傳遞
子元件：ChildComponent
<input onChange={this.props.handleChildChange} />
父元件：
handleChildChange (event) {
this.setState({
age: event.target.value
})
}
<ChildComponent {…this.props} handleChildChange={this.handleChildChange.bind(this)}/>
11、component 對外來屬性進行驗證和約束：
-
defaultProps：設定屬性的預設值，避免prop未傳值時報錯
-
propType：對屬性進行驗證和約束
-
-
當為prop提供無效值時，控制檯將顯示警告。
-
出於效能原因，僅在開發模式下檢查propTypes。
-
propType型別檢查發生在defaultProps解析之後，因此檢查型別也將應用於defaultProps
-
注意：React.PropTypes自React v15.5起已棄用，請使用prop-types庫代替
-
import React, { Component } from ‘react'
import PropTypes from 'prop-types’
class ChildClass extends Component {
static propTypes = {
data: PropTypes.object.isRequired // data為物件且必傳
}
static defaultProps = {
data: {}
}
}12、生命週期鉤子
-
getDefaultProps()
-
getInitialState()
-
componentWillMount()
-
render()：first time
-
componentDidMount()
-
componentWillReceiveProps(nextProps)
-
shouldComponentUpdate(nextProps, nexrState)
-
componentWillUpdate(nextProps, nexrState)
-
render()：after first time，會執行componentDidUpdate、componentWillUnmount
-
componentDidUpdate()
-
componentWillUnmount()
-
栗子(生命週期執行順序)：父元件componentWillMount() => 子元件componentWillMount() => 子元件componentDidMount() => 父元件componentDidMount()
13、fetch：資料請求【詳情看ES6：node-fetch筆記】
-
get 請求：( method: ‘GET’ )
-
-
引數傳遞：把引數拼接在URL上
-
-
post 請求：( method: ‘POST’ )
-
-
POST 請求的引數一定不能放URL中，為防止資訊洩漏
-
引數傳遞：body：JSON.stringify(obj)
-
‘Content-Type’: ‘application/json'
-
返回的 Promise 物件 res.text() // 返回字串
-
sedGet = async (url = '', params) => { // GET 請求
let urlParams = ‘'
if (params) {
let paramsArray = []
Object.keys(params).forEach(key => params[key] && paramsArray.push(key + ‘=‘ + params[key]));
if (urlParams.search(/\?/) === -1) {
urlParams += ‘?’ + paramsArray.json(‘’&);
} else {
urlParams += ‘&’ + parsmsArray.join(‘&’);
}
}
let res = await fetch(`${HTTP + url + urlParams}`,
{
credentials: ‘include'
});
let response = await res.json();
return response
}
handleSubmit = async () => { // 或者用不用async語法糖，用this.sedGet.then()也可以，因為返回的是一個 promise 物件。若兩者都不用，直接呼叫報錯。
// 呼叫 sedGet 函式並傳參
let response = await this.sedGet(url, params)
// 對 response 資料進行邏輯處理
}
14、Router
15、Mixins：獨立元件間共享Mixins
16、ref：操作節點
17、Css模組化：PostCss
18、JSX內建表示式
React 文件：https://doc.react-china.org/docs