前言
最近在公司做的一箇中後臺運營後臺專案，前端選用的框架是React，雖然早已聽過react的鼎鼎大名，並且瞭解學習並寫過demo，不過已是快兩年前的事了，早已忘記了，現在重新拾起React，重新開啟探索之旅。其實專案已經上線了，目前在迭代中，才有時間系統的整理React相關的知識。想起開發過程，真的是相當煎熬啊，邊寫程式碼邊google，常常熬夜到兩三點才下班，才能按時間節點開發出負責的功能。
react特點
react是一個重點在view層的UI框架，可以跟其他框架搭配開發，比如FLux、Redux等資料管理框架；其二，其用到很多ES6的語法，必然要和構建工具（如webpack）配合使用。其三，react使用jsx語法，表面看起來好像在js中夾雜著html，其實非也，jsx只是react提供的語法糖，下面會具體介紹；其四，react重點在元件化思想，任何UI介面，都應看成是元件的組合，從而達到元件複用。
因為我以前用的是Vue，兩相對比，react使用擁有更多的靈活度，也沒有雙向繫結的功能，所以對於可互動元素（表單元素），通常需要繫結事件來達到雙向繫結的效果，當然也不是必須，這可以衍生出受控元素和非受控元素兩個概念，這個後面也會介紹到。
jsx語法
一個簡單的hello world程式碼如下：
const name = "allen"
ReactDOM.render(<p>hello world {name}</p>, document.getElementById('root'))
複製程式碼第一個引數就是jsx語法，jsx基本的語法規則：
1. 以<>包裹，則按類html標記語言（元素）解析
2. 以{}包裹，則按js解析
3. 元素分為 原生html元素 和 自定義元件元素，jsx依靠首字母是否大寫識別，大寫則為自定義元件元素
4. 元素的屬性不同與html，比如繫結事件用onClick，類名用className，style內部屬性不能用下滑線，若borderLeft
複製程式碼jsx不是模板引擎，是react.createElement()的語法糖，完全可以不用jsx，但是用jsx來描述複雜的UI非常方便和理解。使用jsx，必須要先引入react，否則報錯，這是因為jsx最終需要被轉譯成依賴於React的表示式。
可能會問，這種js中夾雜類html，可能還有css，是否違背了程式碼分離的原則，這就要降到react的核心思想--編寫可維護的元件。
元件
如何編寫可維護的元件，相信有過react開發經驗的人，都或多或少遇到一個或多個頁面上經常會有相同功能的UI，凡是要寫兩遍的程式碼都應該抽成一個元件，因為很有可能還會有第三次...，可能剛開始還沒問題，當後期迭代或者移交他人維護的時候，會非常的麻煩，我就犯過這樣的錯誤，因為一開始不會用，又被排期壓著，先上線再說吧，後來換成另外一個大佬來迭代，怎麼一個改動，需分別到到三個地方改，被狠狠地批鬥了。
元件可以分為不同的型別，比如按定義方式，分為函式元件和類元件；按是否有自身狀態，分為展示元件（stateless）和容器元件；按受控狀態，分為受控元件和非受控元件；按使用方式，分為一般元件和高階元件（HOC）。
當然這些分類可能有重合交叉，比如一個展示元件，很有可能就是一個函式元件。
其實做中後臺開發，業界早有廣受好評的AntDesign Pro元件庫，基本上滿足了常用的需求。
虛擬dom
React另一個特點就是虛擬dom，並採用高效的diff演算法，每次只改動變化了的dom。大家知道，操作dom是昂貴的。正是因為虛擬dom，使得其效能非常好。