React從插槽、路由、redux的詳細過程

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

清楚React插槽

弄明白React路由

會使用redux及react-redux

1.React插槽

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

1.組件中的HTML內容直接全部插入

2.組件中根據HTML內容的不同，插入的位置不同

示例：

classAppComextendsReact.Component{

constructor(props){

super(props);

this.state={}

render(){

return(

div

h1我是App根組件/h1

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

SlotCom

h3我是插槽內的文字1/h3

h3我是插槽內的文字2/h3

h3我是插槽內的文字3/h3

/SlotCom

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

SlotChangeCom

h2className="header"Header/h2

h2className="main"Main/h2

h2className="footer"Footer/h2

/SlotChangeCom

/div

classSlotComextendsReact.Component{//組件中HTML內容直接全部插入

render(){

console.log(ps)

return(

div

{ps.children}

/div

classSlotChangeComextendsReact.Component{//組件中HTML內容不同,插入位置不同(注意此處的值也可自定義，均可早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路由

根據不同的路徑，顯示不同的組件（內容）；React使用的庫react-router-dom;

2.1安裝庫

npminstallreact-router-dom--save

2.2ReactRouter三大組件

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

2.3路由其他方法

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

2.4重定向組件

如果訪問某個組件時，如果有重定向組件，那么就會修改頁面路徑，使得頁面內容顯示為所定向路徑的內容

RedirectRedirect

2.5Switch組件

讓switch組件內容的route只匹配1個，只要匹配到了，剩余的路由規(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(){//定義單個組件做演示

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)//拿到動態(tài)路由傳遞的參數(shù)

return(

h1我是動態(tài)路由頁/h1

functionGoTwo(){

return(

Redirectto="/two"/Redirect

classRouterComextendsReact.Component{

constructor(props){

super(props)

this.state={

render(){

letthreeObj={

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

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

hash:'#three',//設置Hash值

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

return(

div

Router{/*Router含有basename屬性，表示基礎路徑自動加上basename的值；用其可進行嵌套子路由*/}

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

3.1主要作用

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

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

Store：數(shù)據倉庫，保存數(shù)據的地方。

State:state：是1個對象，數(shù)據倉庫里的所有數(shù)據都放到1個state里。

Action：1個動作，觸發(fā)數(shù)據改變的方法。

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

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

3.2使用步驟

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

示例：

預覽：

代碼：

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

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

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個函數(shù)（初始化數(shù)據），通過獲取動作，改變數(shù)據，生成1個新state。從而改變頁面

switch(action.type){

case"add":

state.num++

break;

case"subtraction":

state.num--;

break;

default:

break;

return{...state}//此處返回相當于對象的copy

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

//定義要操作的方法

functionadd(){

store.dispatch({type:"add"})//通過倉庫的方法dispatch進行修改數(shù)據

//store.dispatch({type:"add",content:{id:1,msg:"helloworld"}})也可在修改數(shù)據時傳入參數(shù)

functionsubtraction(){

store.dispatch({type:"subtraction"})//通過倉庫的方法dispatch進行修改數(shù)據

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

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

store.subscribe(()={

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

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

4.react-redux

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

4.1基本概念

安裝：npminstallreact-redux注意，使用時還要安裝redux

Provider組件：自動的將store里的state和組件進行關聯(lián)。

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

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

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

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

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

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

classComputedComextendsReact.Component{

render(){

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

constvalue=ps.value;

//將修改數(shù)據的方法傳入到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個函數(shù)（初始化數(shù)據），通過獲取動作，改變數(shù)據，生成1個新state。從而改變頁面

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

/*switch(action.type){

case"add":

state.num++

break;

case"sub":

state.num--;

break;

default:

break;

}*/

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

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

return{...state}//#狀態(tài)結構，防止哈希值相同，不進行解析

}else{