React全都是圍繞著組件的， 所以React基礎(chǔ)也就是：寫(xiě)組件的jsx、組件的生命周期以及組件的屬性和狀態(tài)。jsx，只要是用過(guò)html模板的分分鐘就能寫(xiě)了； 所謂生命周期就是組件在創(chuàng)建、銷毀、更新階段的那幾個(gè)回調(diào)函數(shù)，讓你有機(jī)會(huì)再這幾個(gè)關(guān)鍵點(diǎn)上對(duì)組件和環(huán)境做點(diǎn)手腳； 屬性就像html標(biāo)簽里的屬性一樣決定了這個(gè)組件是什么樣的；而狀態(tài)，像是屬性很像也和屬性很不同，它是可變的， 是控制組件的唯一入口，這個(gè)以后可得細(xì)說(shuō)。那個(gè)redux，其實(shí)就是在鼓搗狀態(tài)。

想想如果是別人已經(jīng)搭好的環(huán)境，我們一上來(lái)就只管往里添加代碼，那肯定上手容易很多，于是就有這樣的開(kāi)源項(xiàng)目，把最讓人頭疼的環(huán)境都給你準(zhǔn)備好了。 我選用了generator-react-webpack-redux， 看名字就知道我要用的幾個(gè)東西它大部分都包含了，除了webpack、react、redux，它還包含了ES6編譯器babel， 還支持less、sass、stylus等常見(jiàn)樣式語(yǔ)言編譯器，還配置好了熱加載，讓你代碼一保存就能在瀏覽器上看到效果。

首先安裝那個(gè)貼心的代碼環(huán)境。前提是自己電腦上已經(jīng)裝過(guò)了node。來(lái)打開(kāi)終端（命令行）。

npm install -g yo npm install -g generator-react-webpack-redux

然后新建個(gè)項(xiàng)目目錄，并切換到這個(gè)目錄下，對(duì)這個(gè)目錄進(jìn)行項(xiàng)目初始化：

mkdir my-project && cd my-project yo react-webpack-redux

然后根據(jù)提示，輸入項(xiàng)目名稱、選擇想用的樣式語(yǔ)言，接著等待依賴的內(nèi)容下載安裝完就行了。 咱的項(xiàng)目環(huán)境就搭建好了，然后讓它跑起來(lái)看看效果吧：

npm start

這時(shí)瀏覽器會(huì)自動(dòng)打開(kāi)，載入咱的項(xiàng)目頁(yè)面，一個(gè)很Q的名叫“yo”小人出現(xiàn)，呦，這就搞定了。

再來(lái)看看項(xiàng)目的目錄結(jié)構(gòu)。別的沒(méi)啥好說(shuō)的，看名字就知道是啥了，主要看src目錄里的東西。

咱們最常打交道的目錄是actions、components、containers和reducers。 先簡(jiǎn)單說(shuō)一下，components和containers里面放的都是React組件，不同的是component是純純的組件， container是會(huì)跟外界（也就是狀態(tài)）互動(dòng)的組件，它把外界的躁動(dòng)全都擋住，讓里面純純的組件安心做自己專業(yè)的事情。 actions目錄下放咱們的行為文件，行為就是指要發(fā)生點(diǎn)啥。 reducers里面的東西功能就是對(duì)行為進(jìn)行響應(yīng)，根據(jù)行為的類別和提供的數(shù)據(jù)對(duì)狀態(tài)進(jìn)行變更。

再看看src里面其它幾個(gè)目錄：store負(fù)責(zé)管理狀態(tài)，也就是提供派發(fā)行為的方法，讓reducer去監(jiān)聽(tīng)，然后改變狀態(tài)。 實(shí)際上在開(kāi)發(fā)中我們基本不需要?jiǎng)舆@里的代碼。styles和images就不用說(shuō)了。

然后再裝個(gè)chrome插件吧，ExtensionReact Developer Tools，可以通過(guò)React組件的視圖看整個(gè)網(wǎng)頁(yè)，包含屬性和狀態(tài)信息。

?

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的react redux 相关技术的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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