?

這次是年后第一次發(fā)文章，也有很長一段時間沒有寫文章了。準(zhǔn)備繼續(xù)寫。總結(jié)是必須的。

?

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

?

最近在看的知識點是react相關(guān)，現(xiàn)在工作用到的是es5原生模式的react組件開發(fā)，主要也只開發(fā)業(yè)務(wù)組件，對技術(shù)的門檻不高，純屬于適應(yīng)需求即可。項目采取的是多頁面開發(fā)，非單頁，沒有使用到react-router和redux。如果想跳槽沒有這2個以及更多的插件的使用和開發(fā)經(jīng)驗，很難成功。所以也是必學(xué)的。

?

我們先來說一下es5的組件開發(fā)模式：

使用React.createClass創(chuàng)建組件，組件擁有狀態(tài)和生命周期，this自動綁定了組件的實例。

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

初始化state使用getInitialState。

this自動綁定當(dāng)前組件實例。

?

es6方式創(chuàng)建組件：

初始化state使用構(gòu)造函數(shù)constructor。

this需要手動綁定組件實例。或者使用箭頭函數(shù)，或者使用bind(this)

?

普通無狀態(tài)組件：

直接使用function，無狀態(tài)和生命周期。適用于靜態(tài)，可傳props。

?

改變輸入框內(nèi)容：

展示：

輸入框內(nèi)容可改變。

代碼：

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

?

setState傳遞方式不同，結(jié)果不同：

效果：

點擊時，上一個只執(zhí)行了最后一個，下一個2個都執(zhí)行了。說明，使用函數(shù)的方式傳入的state是最新的進行調(diào)用。

代碼：

?

轉(zhuǎn)載于:https://www.cnblogs.com/wuhairui/p/10367620.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。