React從插槽、路由、redux的詳細(xì)過程

第React從插槽、路由、redux的詳細(xì)過程目錄1.React插槽2.React路由2.1安裝庫(kù)2.2ReactRouter三大組件2.3路由其他方法2.4重定向組件2.5Switch組件2.6示例3.redux3.1主要作用3.2使用步驟4.react-redux4.1基本概念內(nèi)容

清楚React插槽

弄明白R(shí)eact路由

會(huì)使用redux及react-redux

1.React插槽

組建中寫入內(nèi)容，這些內(nèi)容可以被識(shí)別和控制。React需要自己開發(fā)支持插槽功能。原理：父組件組件中寫入的HTML，可以傳入子組件的props中。

1.組件中的HTML內(nèi)容直接全部插入

2.組件中根據(jù)HTML內(nèi)容的不同，插入的位置不同

示例：

classAppComextendsReact.Component{

constructor(props){

super(props);

this.state={}

render(){

return(

div

h1我是App根組件/h1

h1-----------------/h1

SlotCom

h3我是插槽內(nèi)的文字1/h3

h3我是插槽內(nèi)的文字2/h3

h3我是插槽內(nèi)的文字3/h3

/SlotCom

h1------------------/h1

SlotChangeCom

h2className="header"Header/h2

h2className="main"Main/h2

h2className="footer"Footer/h2

/SlotChangeCom

/div

classSlotComextendsReact.Component{//組件中HTML內(nèi)容直接全部插入

render(){

console.log(ps)

return(

div

{ps.children}

/div

classSlotChangeComextendsReact.Component{//組件中HTML內(nèi)容不同,插入位置不同(注意此處的值也可自定義，均可早props中拿到)

render(){

console.log(ps)

letHeaderCom,MainCom,FooterCom;

ps.children.forEach((item,index)={

if(ps['className']==='header'){

HeaderCom=item

}elseif(ps['className']==='main'){

MainCom=item

}else{

FooterCom=item

return(

div

div

{HeaderCom}

/div

div

{MainCom}

/div

div

{FooterCom}

/div

/div

2.React路由

根據(jù)不同的路徑，顯示不同的組件（內(nèi)容）；React使用的庫(kù)react-router-dom;

2.1安裝庫(kù)

npminstallreact-router-dom--save

2.2ReactRouter三大組件

Router：所有路由組件的根組件（底層組件），包裹路由規(guī)則的最外層容器。屬性：basename-設(shè)置當(dāng)前路由根路徑，router可以在1個(gè)組件中寫多個(gè)。Link：路由跳轉(zhuǎn)的組件，主要配合to實(shí)現(xiàn)路由跳轉(zhuǎn)。Route：路由規(guī)則匹配組件，顯示當(dāng)前規(guī)則對(duì)應(yīng)的組件。

2.3路由其他方法

如果要精確匹配，那么可以在route上設(shè)置exact屬性。Link組件可以設(shè)置to屬性來進(jìn)行頁(yè)面的跳轉(zhuǎn)，to屬性可以直接寫路徑的字符串，也可以通過1個(gè)對(duì)象，進(jìn)行路徑的設(shè)置。Link的replace屬性：點(diǎn)擊鏈接后，將新地址替換成歷史訪問記錄的原地址。

2.4重定向組件

如果訪問某個(gè)組件時(shí)，如果有重定向組件，那么就會(huì)修改頁(yè)面路徑，使得頁(yè)面內(nèi)容顯示為所定向路徑的內(nèi)容

RedirectRedirect

2.5Switch組件

讓switch組件內(nèi)容的route只匹配1個(gè)，只要匹配到了，剩余的路由規(guī)則將不再匹配

注意：Switch組件只能包裹在Route組件外面

2.6示例

1.效果

2.代碼

importReactfrom'react';

import'./index.css';

//import{HashRouterasRouter,Link,Route}from'react-router-dom';//哈希模式

import{BrowserRouterasRouter,Link,Route,Redirect,Switch}from'react-router-dom';//history模式

functionOne(){//定義單個(gè)組件做演示

return(

h1我是ONE/h1

functionTwo(){

return(

h1我是TWO/h1

functionThree(props){

console.log(props)//接收傳遞的參數(shù)

return(

h1我是THREE/h1

functionNews(props){

console.log(props.match.params.id)//拿到動(dòng)態(tài)路由傳遞的參數(shù)

return(

h1我是動(dòng)態(tài)路由頁(yè)/h1

functionGoTwo(){

return(

Redirectto="/two"/Redirect

classRouterComextendsReact.Component{

constructor(props){

super(props)

this.state={

render(){

letthreeObj={

pathname:'/three',//傳入的路徑

search:'id=1',//get請(qǐng)求參數(shù)

hash:'#three',//設(shè)置Hash值

state:{msg:'helloworld'}//傳入組件的數(shù)據(jù)

return(

div

Router{/*Router含有basename屬性，表示基礎(chǔ)路徑自動(dòng)加上basename的值；用其可進(jìn)行嵌套子路由*/}

divclassName="tab"

Linkto="/one"ONE/Link

Linkto="/two"TWO/Link

Linkto={threeObj}replaceTHREE/Link

Linkto="/news/2"NEWS/Link

Linkto="/gotwo"goTwo/Link

/div

Switch

Routepath="/one"exactcomponent={One}/Route

Routepath="/one"exactcomponent={One}/Route

Routepath="/two"exactcomponent={Two}/Route

Routepath="/three"exactcomponent={Three}/Route

Routepath="/news/:id"exactcomponent={News}/Route

Routepath="/gotwo"exactcomponent={GoTwo}/Route

/Switch

/Router

/div

exportdefaultRouterCom

3.redux

解決React數(shù)據(jù)管理（狀態(tài)管理），用于中大型，數(shù)據(jù)比較龐大，組件之間數(shù)據(jù)交互多的情況下使用。如果你不知道是否需要使用Redux，那么你就不需要用它！

3.1主要作用

解決組件的數(shù)據(jù)通信。解決數(shù)據(jù)和交互較多的應(yīng)用

Redux只是一種狀態(tài)管理的解決方案！

Store：數(shù)據(jù)倉(cāng)庫(kù)，保存數(shù)據(jù)的地方。

State:state：是1個(gè)對(duì)象，數(shù)據(jù)倉(cāng)庫(kù)里的所有數(shù)據(jù)都放到1個(gè)state里。

Action：1個(gè)動(dòng)作，觸發(fā)數(shù)據(jù)改變的方法。

Dispatch：將動(dòng)作觸發(fā)成方法。

Reducer：是1個(gè)函數(shù)，通過獲取動(dòng)作，改變數(shù)據(jù)，生成1個(gè)新state。從而改變頁(yè)面。

3.2使用步驟

安裝redux：npminstallredux創(chuàng)建reducer函數(shù)創(chuàng)建倉(cāng)庫(kù)修改數(shù)據(jù)（通過動(dòng)作修改數(shù)據(jù)）獲取數(shù)據(jù)修改視圖（監(jiān)聽數(shù)據(jù)的變化，重新渲染內(nèi)容）

示例：

預(yù)覽：

代碼：

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

classComputerComextendsReact.Component{//創(chuàng)建需要展示數(shù)據(jù)的組件

render(){

letstate=store.getState();//通過getState()方法獲取Store里的值

return(

div

h1Store里邊的數(shù):{state.num}/h1

buttonadd}自加1/button

buttonsubtraction}自減1/button

/div

functionreducer(state={num:0},action){//Reducer:是1個(gè)函數(shù)（初始化數(shù)據(jù)），通過獲取動(dòng)作，改變數(shù)據(jù)，生成1個(gè)新state。從而改變頁(yè)面

switch(action.type){

case"add":

state.num++

break;

case"subtraction":

state.num--;

break;

default:

break;

return{...state}//此處返回相當(dāng)于對(duì)象的copy

conststore=createStore(reducer);//創(chuàng)建倉(cāng)庫(kù)（必須傳入reducer）

//定義要操作的方法

functionadd(){

store.dispatch({type:"add"})//通過倉(cāng)庫(kù)的方法dispatch進(jìn)行修改數(shù)據(jù)

//store.dispatch({type:"add",content:{id:1,msg:"helloworld"}})也可在修改數(shù)據(jù)時(shí)傳入?yún)?shù)

functionsubtraction(){

store.dispatch({type:"subtraction"})//通過倉(cāng)庫(kù)的方法dispatch進(jìn)行修改數(shù)據(jù)

ReactDOM.render(ComputerCom/ComputerCom,document.querySelector("#root"))

//通過store.subsctibe()方法（必須傳入函數(shù)）修改視圖（監(jiān)聽數(shù)據(jù)的變化，重新渲染內(nèi)容）

store.subscribe(()={

ReactDOM.render(ComputerCom/ComputerCom,document.querySelector("#root"))

注意：所有的數(shù)據(jù)操作均在reducer中完成，其他函數(shù)不可修改數(shù)據(jù)，只能將動(dòng)作觸發(fā)成方法

4.react-redux

react-redux是對(duì)redux的進(jìn)一步完善，它避免了redux每次修改數(shù)據(jù)都要調(diào)用渲染函數(shù)的弊端

4.1基本概念

安裝：npminstallreact-redux注意，使用時(shí)還要安裝redux

Provider組件：自動(dòng)的將store里的state和組件進(jìn)行關(guān)聯(lián)。

MapStatetoProps：這個(gè)函數(shù)用于將store的state映射到組件的props里，實(shí)現(xiàn)數(shù)據(jù)共享。（函數(shù)名自定義）

mapdispatchToProps：將store中的dispatch映射到組件的props里，實(shí)現(xiàn)了方法的共享。（函數(shù)名自定義）

Connect方法：將組件和數(shù)據(jù)（方法）進(jìn)行連接。

示例（執(zhí)行結(jié)果與redux演示同）：

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

import{connect,Provider}from'react-redux';

classComputedComextendsReact.Component{

render(){

//倉(cāng)庫(kù)的數(shù)據(jù)，通過store的state傳給props，直接通過props就可以獲取state的數(shù)據(jù)

constvalue=ps.value;

//將修改數(shù)據(jù)的方法傳入到props中（等同于vuex的mapMutation映射）

constclickAdd=ps.clickAdd;

constclickSub=ps.clickSub;

return(

div

h1Store里面的數(shù):{value}/h1

buttonclickAdd}自加1/button

buttonclickSub}自減1/button

/div

letactionObj={

add:function(state,action){

state.num++;

returnstate

sub:function(state,action){

state.num=state.num+action.num;//action.num接收傳遞的參數(shù)

returnstate

functionreducer(state={num:0},action){//#Reducer:是1個(gè)函數(shù)（初始化數(shù)據(jù)），通過獲取動(dòng)作，改變數(shù)據(jù)，生成1個(gè)新state。從而改變頁(yè)面

//如果方法過多，可以把它寫在外面

/*switch(action.type){

case"add":

state.num++

break;

case"sub":

state.num--;

break;

default:

break;

}*/

if(action.type.indexOf('redux')===-1){//判斷數(shù)據(jù)是否初始化，若無初始化，先初始化

state=actionObj[action.type](state,action);

return{...state}//#狀態(tài)結(jié)構(gòu)，防止哈希值相同，不進(jìn)行解析

}else{