react複習總結1

這次是年後第一次發文章，也有很長一段時間沒有寫文章了。準備繼續寫。總結是必須的。

最近一直在業餘時間學習和複習前端相關知識點，在一個公司呆久了，使用的技術不更新，未來真的沒有什麼前景，特別是我們這種以技術能力吃飯的人。所以至少要做到每段時間學習一些新東西（指以前自己不瞭解的知識），特別是在一個地方呆久了，習慣了現在的技術棧和工具，想要適應以後的發展就沒那麼容易了。

最近在看的知識點是react相關，現在工作用到的是es5原生模式的react元件開發，主要也只開發業務元件，對技術的門檻不高，純屬於適應需求即可。專案採取的是多頁面開發，非單頁，沒有使用到react-router和redux。如果想跳槽沒有這2個以及更多的外掛的使用和開發經驗，很難成功。所以也是必學的。

我們先來說一下es5的元件開發模式：

使用React.createClass建立元件，元件擁有狀態和生命週期，this自動綁定了元件的例項。

（注：使用該方式需要相對比較低的react版本）

初始化state使用getInitialState。

this自動綁定當前元件例項。

es6方式建立元件：

初始化state使用建構函式constructor。

this需要手動繫結元件例項。或者使用箭頭函式，或者使用bind(this)

普通無狀態元件：

直接使用function，無狀態和生命週期。適用於靜態，可傳props。

改變輸入框內容：

展示：

輸入框內容可改變。

程式碼：

使用onChange事件觸發，獲取最新的e.target.value的值改變state

setState傳遞方式不同，結果不同：

效果：

點選時，上一個只執行了最後一個，下一個2個都執行了。說明，使用函式的方式傳入的state是最新的進行呼叫。

程式碼：