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

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

最近在看的知識點是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是最新的進行調用。

代碼：