react複習總結（1）--react元件開發基礎

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

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

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

部落格園作者：herry菌，原文連結：

https://www.cnblogs.com/wuhairui/p/10367620.html

朋友，看到這裡，關注作者的公衆号吧，不漏掉更新哦