?

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

?

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

?

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

代碼：

?

轉載于:https://www.cnblogs.com/wuhairui/p/10367620.html

總結

以上是生活随笔為你收集整理的react复习总结（1）--react组件开发基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。