對(duì)于技術(shù)來(lái)說(shuō)是沒(méi)有終點(diǎn)的只有起點(diǎn)，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于 React技術(shù)棧梳理 !下面是下編整理的相關(guān)內(nèi)容希望對(duì)大家的學(xué)習(xí)和了解有所幫助。
一、react是什么
使用一個(gè)框架之前我們應(yīng)該明白它是什么。就像react來(lái)說(shuō)我們知道它是一種js框架，我們可以使用這個(gè)框架來(lái)編寫(xiě) html 頁(yè)面。而且我們?cè)谑褂玫臅r(shí)候可以拋棄 html 而用純 js 來(lái)編寫(xiě)。
二、為什么使用react
下面是小編找尋的使用react的好處：
1、便于代碼復(fù)用
我們?cè)谄匠５拈_(kāi)發(fā)中編寫(xiě)DOM的時(shí)候，如果出現(xiàn)有多個(gè)頁(yè)面擁有相同的模塊，那么我們就需要把相關(guān)模塊在各個(gè) ?html ?文件全部復(fù)制一遍，然而當(dāng)我們使用react的時(shí)候只需要把這些模塊寫(xiě)成組件，通過(guò)調(diào)用就可以了。
2、提高渲染效率
開(kāi)發(fā)中碰到修改和更新信息是比較常發(fā)生的，所以這時(shí)候如果我們重新渲染頁(yè)面，通過(guò)使用 html 來(lái)編寫(xiě)的話則會(huì)花很多的精力和時(shí)間，然而如果我們使用React的話，我們只需要通過(guò)封裝就可以解決這個(gè)問(wèn)題了。
? 3、容易管理 ?
在開(kāi)發(fā)的時(shí)候往往網(wǎng)站會(huì)變得更加復(fù)雜，所以這個(gè)時(shí)候頁(yè)面的管理就變得尤其的重要，我們還是需要花費(fèi)很對(duì)的精力和時(shí)間在代碼和架構(gòu)上面，如果使用react的話就不需要了。
三、react不能幫我們做什么
我們之所以使用react這個(gè)框架的目的就是讓我們可以更好的管理和復(fù)制使用我們的代碼，如果自己要編寫(xiě)react組件的話，那么對(duì)于開(kāi)發(fā)中的基本知識(shí)我們還是要了解的，而且當(dāng)我們?cè)谑褂胷eact 的時(shí)候要遵循下面兩點(diǎn)：
1、我們自己編寫(xiě)的頁(yè)面雖然不使用html 但是需要類(lèi)似jsx語(yǔ)法，因?yàn)閞eact知識(shí)提高我們的復(fù)用性而已。
2、雖然我們都是親手寫(xiě)css樣式，但是我們可以借助一些開(kāi)源的相關(guān)組件。
四、深入了解react究竟做了什么
對(duì)于有前端基礎(chǔ)的小伙伴們來(lái)說(shuō)，絕對(duì)我們看到的web頁(yè)面的效果的因素有兩個(gè)，html和css；只要頁(yè)面發(fā)生了改變，那么這也就以為這我們的html 和css發(fā)生了改變。
1、原生開(kāi)發(fā)如何更新頁(yè)面
對(duì)于這個(gè)的話當(dāng) js 以流浪器作為宿主環(huán)境的時(shí)候，我們的瀏覽器中可以為?js?提供了?DOM?作為?js?操作文檔的唯一接口，當(dāng)我們沒(méi)有使用任何框架時(shí)又要更新頁(yè)面的時(shí)候，我們這時(shí)候就必須要親自調(diào)用DOM提供的API來(lái)更改文檔，這樣就會(huì)迫使我們的效率極其低下；
2、react如何更新頁(yè)面
我們都知道在react中每個(gè)組件都有一個(gè)?state?對(duì)象，這些?state?對(duì)象中它存儲(chǔ)了當(dāng)前組件需要的所有可能發(fā)生變化的數(shù)據(jù)，而且渲染的html頁(yè)面和state中的數(shù)據(jù)是一種 一 一 對(duì)應(yīng)的關(guān)系。只要我們通過(guò)?setState?方法改變了?state?中的數(shù)據(jù)，那么?html?也 就跟著變化了，無(wú)需我們親自動(dòng)手修改?dom?；在使用?react?時(shí)，只要我們根據(jù)state構(gòu)建了組件，接下來(lái)只需要 考慮如何更新?state?即可。
五、react的基本用法
我們都知道在react的組件中分為：變化的和不變的兩種信息，而且在組件編寫(xiě)時(shí)我們還需要花精力去分析，哪些屬性在組件的生命周期中是有可能發(fā)生變化的，哪些是不變的。那么對(duì)于不變的部分我們就可以寫(xiě)死在html中，針對(duì)變化的部分其信息來(lái)源 有兩種 ，如下所示：
1、組件的狀態(tài)
當(dāng)我們?cè)陂_(kāi)發(fā)中有使用到react組件時(shí)則需要為我們的組件編寫(xiě)state屬性，我們編寫(xiě)的目的是用來(lái)存儲(chǔ)了當(dāng)前組件需要的數(shù)據(jù)；因?yàn)楫?dāng)我們需要改變狀態(tài)時(shí)，我們只需要調(diào)用當(dāng)前組件的?this.setState（）?方法即可，瀏覽器會(huì)自動(dòng)重新渲染當(dāng)前組件；下面是我們的例子代碼：
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}2、父組件的狀態(tài)
在我們開(kāi)發(fā)或者在學(xué)習(xí)時(shí)遇到需要同時(shí)獲取多個(gè)子組件數(shù)據(jù)或者兩個(gè)組件之間需要相互通訊的時(shí)候，我們就可以把子組件的 state 數(shù)據(jù)提升至其共同的父組件當(dāng)中保存。這樣子之后父組件就可以通過(guò) props 將狀態(tài)數(shù)據(jù)傳遞到子組件當(dāng)中。下面是有關(guān)的例子代碼：
//父組件
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)}
/>
);
}
//子組件
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() =>this.props.onClick()}>
{this.props.value}
</button>
);
}
}六、redux
1、為什么要使用redux
我們?cè)陂_(kāi)發(fā)中一般對(duì)于小型的項(xiàng)目我們是不使用redux的，因?yàn)槲覀兌贾?redux 是一個(gè)用來(lái)管理前端數(shù)據(jù)的架構(gòu)，只有在應(yīng)用程序非常復(fù)雜，數(shù)據(jù)來(lái)源復(fù)雜，交互頻繁的情況下， 應(yīng)用redux。
2、redux設(shè)計(jì)的三大原則
(1)、單一數(shù)據(jù)
那么什么是單一數(shù)據(jù)呢？一般是指我們所使用有關(guān)于state的程序中，這個(gè)程序中所有的state都存儲(chǔ)在一個(gè)單一的數(shù)據(jù)store內(nèi)部，這就好比是一個(gè)巨大的對(duì)象樹(shù)一樣。
(2)、state只讀
對(duì)于state來(lái)說(shuō)是只有讀取的能力，能改變state的方式就是通過(guò)action來(lái)修改
(3)、使用純函數(shù)執(zhí)行修改
那么我們?cè)陂_(kāi)發(fā)中怎么使用純函數(shù)執(zhí)行修改呢？一般我們是在需要對(duì)state進(jìn)行描述的的時(shí)候編寫(xiě) reducers。然而對(duì)于readucer的話則是一個(gè)純函數(shù)，那么對(duì)于這個(gè)函數(shù)的接口的話，就是我們的state和action這兩個(gè)屬性了，而且在函數(shù)中我們只需要根據(jù)action 返回相對(duì)應(yīng)的state就可以了，而且一定要有返回值才可以。
3、主要Api
下面列舉的一些Api是我們比較熟悉的：
?store=createStare（reducer）?—— 創(chuàng)建store 。
?state=store.getState（）
store.dispatch（action）?—— 觸發(fā)action，這是改變state的唯一接口 。
?store.subscribe（listener）?—— 一旦State發(fā)生變化，就自動(dòng)執(zhí)行這個(gè)函數(shù)，只要把 View 的更新函數(shù)（對(duì)于 React 項(xiàng)目，就是組件的render方法或setState方法）放入listen，就會(huì)實(shí)現(xiàn) View 的自動(dòng)渲染。
4、reducer的拆分
在Redux 中我們是可以找到? combineReducers ?的這個(gè)方法，因?yàn)檫@個(gè)方法是用于對(duì)?Reducer?進(jìn)行拆分的。我們只需要定義各個(gè)子小?Reducer ?函數(shù)，然后用這個(gè)方法，就可以將它們合成一個(gè)大的 ?Reducer?了。
七、react-redux
在react中為了方便，在react中封裝了個(gè)react-redux；然而對(duì)于react-redux來(lái)說(shuō)則是分為兩大類(lèi)將所有組件分別是UI類(lèi)和容器類(lèi)，而且在UI組件中所有的數(shù)據(jù)通過(guò)props來(lái)進(jìn)行獲取；容器組件負(fù)責(zé)數(shù)據(jù)和邏輯。我們可以使用裝飾器模式把純組件轉(zhuǎn)化 為容器組價(jià)，這里主要用到了下面這三個(gè)函數(shù)：
1、 mapStateToProps（state,ownprops）
建立一個(gè)從（外部的）state對(duì)象到（UI 組件的）props對(duì)象的映射關(guān)系。
2、mapStateToProps（dispatch，ownProps）
用來(lái)建立store.dispatch方法到props對(duì)象的映射。
3、connect
React-Redux 提供connect方法，用于從 UI 組件生成容器組件。它需要mapStateToProps和mapStateToProps作為參數(shù)。例子代碼如下所示：
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)（TodoList）<Provider> 組件
在開(kāi)發(fā)中當(dāng)我們發(fā)現(xiàn)組件的嵌套比較深的時(shí)候，我們?nèi)绻ㄟ^(guò)內(nèi)層組件要獲得state就會(huì)非常麻煩，這個(gè)時(shí)候我們就需要借助props屬性的方法一層一層傳遞。Proveder組件解決了這個(gè)問(wèn)題，把Provider組件放在最外層，只要在Proveder上傳入store，這樣所有子組件都可以拿到state了，代碼如下：
render（
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
）八、react-router
在開(kāi)發(fā)中我們需要使用的頁(yè)面不會(huì)是只有一個(gè)的，而且在多頁(yè)面中我們還需要通過(guò)代碼讓用戶(hù)可以實(shí)現(xiàn)在各個(gè)頁(yè)面直接進(jìn)行切換，那么對(duì)于進(jìn)行各個(gè)頁(yè)面切換的時(shí)候就需要 ?react-route ?這個(gè)架構(gòu)了，因?yàn)樵谶@個(gè)架構(gòu)中就有提供了在多個(gè)頁(yè)面和組件之間進(jìn)行切換的機(jī)制。
那么對(duì)于?react-router?架構(gòu)的常用組件有下面這幾個(gè)：
?
<BrowserRouter>
<Link>
?為你的應(yīng)用提供聲明式的、可訪問(wèn)的導(dǎo)航鏈接；屬性 to 。
?<Route> ?
最基本的職責(zé)是在其 path 屬性與某個(gè) ?location ?匹配時(shí)呈現(xiàn)一些 UI；屬性 ?path?， 屬性 ?component ?，?exact?完全匹配。
? <Switch>?
只渲染命中的第一個(gè)路由 ?<Redirect>? 直接渲染路由 ，屬性 to 。
總結(jié)：
對(duì)于react技術(shù)梳理的話內(nèi)容就到這里了，如果你有不一樣的看法可以分享出來(lái)和大家一同學(xué)習(xí)探討，當(dāng)然關(guān)于react更多學(xué)習(xí)和知識(shí)內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。
