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需要自己开发支持插槽功能。原理：父组件组件中写入的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：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。属性：basename-设置当前路由根路径，router可以在1个组件中写多个。Link：路由跳转的组件，主要配合to实现路由跳转。Route：路由规则匹配组件，显示当前规则对应的组件。

2.3路由其他方法

如果要精确匹配，那么可以在route上设置exact属性。Link组件可以设置to属性来进行页面的跳转，to属性可以直接写路径的字符串，也可以通过1个对象，进行路径的设置。Link的replace属性：点击链接后，将新地址替换成历史访问记录的原地址。

2.4重定向组件

如果访问某个组件时，如果有重定向组件，那么就会修改页面路径，使得页面内容显示为所定向路径的内容

RedirectRedirect

2.5Switch组件

让switch组件内容的route只匹配1个，只要匹配到了，剩余的路由规则将不再匹配

注意：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)//接收传递的参数

return(

h1我是THREE/h1

functionNews(props){

console.log(props.match.params.id)//拿到动态路由传递的参数

return(

h1我是动态路由页/h1

functionGoTwo(){

return(

Redirectto="/two"/Redirect

classRouterComextendsReact.Component{

constructor(props){

super(props)

this.state={

render(){

letthreeObj={

pathname:'/three',//传入的路径

search:'id=1',//get请求参数

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

state:{msg:'helloworld'}//传入组件的数据

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数据管理（状态管理），用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux，那么你就不需要用它！

3.1主要作用

解决组件的数据通信。解决数据和交互较多的应用

Redux只是一种状态管理的解决方案！

Store：数据仓库，保存数据的地方。

State:state：是1个对象，数据仓库里的所有数据都放到1个state里。

Action：1个动作，触发数据改变的方法。

Dispatch：将动作触发成方法。

Reducer：是1个函数，通过获取动作，改变数据，生成1个新state。从而改变页面。

3.2使用步骤

安装redux：npminstallredux创建reducer函数创建仓库修改数据（通过动作修改数据）获取数据修改视图（监听数据的变化，重新渲染内容）

示例：

预览：

代码：

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

classComputerComextendsReact.Component{//创建需要展示数据的组件

render(){

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

return(

div

h1Store里边的数:{state.num}/h1

buttonadd}自加1/button

buttonsubtraction}自减1/button

/div

functionreducer(state={num:0},action){//Reducer:是1个函数（初始化数据），通过获取动作，改变数据，生成1个新state。从而改变页面

switch(action.type){

case"add":

state.num++

break;

case"subtraction":

state.num--;

break;

default:

break;

return{...state}//此处返回相当于对象的copy

conststore=createStore(reducer);//创建仓库（必须传入reducer）

//定义要操作的方法

functionadd(){

store.dispatch({type:"add"})//通过仓库的方法dispatch进行修改数据

//store.dispatch({type:"add",content:{id:1,msg:"helloworld"}})也可在修改数据时传入参数

functionsubtraction(){

store.dispatch({type:"subtraction"})//通过仓库的方法dispatch进行修改数据

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

//通过store.subsctibe()方法（必须传入函数）修改视图（监听数据的变化，重新渲染内容）

store.subscribe(()={

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

注意：所有的数据操作均在reducer中完成，其他函数不可修改数据，只能将动作触发成方法

4.react-redux

react-redux是对redux的进一步完善，它避免了redux每次修改数据都要调用渲染函数的弊端

4.1基本概念

安装：npminstallreact-redux注意，使用时还要安装redux

Provider组件：自动的将store里的state和组件进行关联。

MapStatetoProps：这个函数用于将store的state映射到组件的props里，实现数据共享。（函数名自定义）

mapdispatchToProps：将store中的dispatch映射到组件的props里，实现了方法的共享。（函数名自定义）

Connect方法：将组件和数据（方法）进行连接。

示例（执行结果与redux演示同）：

importReactfrom'react';

importReactDOMfrom'react-dom';

import{createStore}from'redux';

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

classComputedComextendsReact.Component{

render(){

//仓库的数据，通过store的state传给props，直接通过props就可以获取state的数据

constvalue=ps.value;

//将修改数据的方法传入到props中（等同于vuex的mapMutation映射）

constclickAdd=ps.clickAdd;

constclickSub=ps.clickSub;

return(

div

h1Store里面的数:{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接收传递的参数

returnstate

functionreducer(state={num:0},action){//#Reducer:是1个函数（初始化数据），通过获取动作，改变数据，生成1个新state。从而改变页面

//如果方法过多，可以把它写在外面

/*switch(action.type){

case"add":

state.num++

break;

case"sub":

state.num--;

break;

default:

break;

}*/

if(action.type.indexOf('redux')===-1){//判断数据是否初始化，若无初始化，先初始化

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

return{...state}//#状态结构，防止哈希值相同，不进行解析

}else{