React中react-redux和路由详解

目录

• 观察者模式解决组件间通信问题
• react-redux
• connect方法
• Provider组件
• 路由
• 使用路由
• 默认路由
• 路由重定向
• 获取路由参数
• 路由导航

观察者模式解决组件间通信问题

使用观察者解决组件间通信，分成两步

• 在一个组件中，订阅消息
• 在另一个组件中，发布消息

发布消息之后，订阅的消息回调函数会执行，在函数中，我们修改状态，这样就可以实现组件间通信了。这就是reflux框架的实现。

react-redux

redux早期被设计成可以在各个框架中使用，因此在不同的框架中使用的时候，要引入相应的插件

在react中使用要引入react-redux，因此我们要安装这个模块

npm install react-redex

react-redux提供了一个方法和一个组件:

connect方法

为组件的属性拓展store中的信息（state，dispatch）的方法

connect方法有两个参数，都是函数

第一个参数表示如何为组件的属性拓展store中的state数据

参数是state

返回值是对象，就是为属性拓展的数据

第二个参数表示如何为组件的属性拓展store中的dispatch方法

参数就是dispatch

返回值是对象，就是为属性拓展的方法

connect方法的返回值是一个新方法，就是为组件拓展的方法。

参数是组件

返回值是新组件，这个新的组件就拥有了state数据和dispatch方法了

Provider组件

用来为应用程序提供store对象的组件

store属性，就是绑定添加的store

Provider组件中我们可以渲染应用程序组件

在应用程序中，这些被connect方法处理的组件就会接收store中的数据了

注意：只有通过connect的处理方法处理之后的组件具有state和dispatch，其他的组件没有这些信息

想让其它组件具有store中的state和dispatch，有两种途径：

• 第一种，具有state数据和dispatch方法的组件中，向子组件传递（最常用）
• 第二种，再用处理方法，处理其他的组件。

路由

从14版本开始，react路由为了实现react多端适配的理想，将react路由拆分成不同类型的。

例如在web端要使用web端路由，在native端要使用nativate路由等等

我们开发web端，要安装react-router-dom路由

npm install react-router-dom

使用路由

使用路由分成三步：

第一步 定义路由渲染容器元素（渲染位置）

• 可以通过Swtich组件定义
• 可以通过Route组件定义每一条路由规则
• path 定义路由规则
• component定义路由渲染的组件
• name 定义路由的名称

第二步 定义路由的渲染方式（规则）

常用的有两种:

• BrowserRouter：基于path，实现的路由规则，需要服务器端的配合
• HashRouter：基于hash，实现的路由规则，不需要服务器端配合
  • 我们通过路由渲染模式组件，渲染应用程序
  • 将应用程序组件，定义在该组件内

第三步 用render方法，渲染第二步得到的结果

默认路由

在react路由中，让path匹配*，即可定义默认路由

由于​​*​​匹配的非常广，因此我们常常把它配置在最后面

路由重定向

我们通过Redirect组件定义重定向路由

from定义匹配的规则

to定义重定向的规则

获取路由参数

在react中，我们​​使用路由的组件​​，会自动拓展一些属性

history表示对全局的history历史对象的模拟

location表示对全局的location对象的模块，但是只是处理路由这一部分

match表示路由数据对象（解析后的数据，因此工作中常用）

其他没有通过路由渲染的组件是不具备这些信息，想具有这些信息，我们可以通过组件间通信的技术，依次传递这些数据信息

路由导航

我们通过Link组件定义路由导航

通过to属性定义导航地址，即使是hash路由也不要加#

默认渲染成a标签

举例：

// 引入路由
import { Switch, Route, HashRouter, Redirect, Link } from 'react-router-dom';
// 应用程序
class App extends Component {
render() {
console.log('app', this)
return (
<div>
<h1>app</h1>
{/*导航*/}
<Link to="/home">首页</Link>
<Link to="/list/17">列表页</Link>
<Link to="/detail/17">详情页</Link>
{/*第一步 定义路由渲染位置*/}
<Switch>
{/*Route定义规则*/}
<Route path="/home" component={Home}></Route>
<Route path="/list/:page" component={List}></Route>
<Route path="/detail/:id" component={Detail}></Route>
{/*输入ickt进入detail/ickt详情页*/}
<Redirect from="/ickt" to="/detail/ickt"></Redirect>
{/*默认路由*/}
<Route path="*" component={Home}></Route>
</Switch>
</div>
)
}
}
// 首页
class Home extends Component {
render() {
console.log('home', this)
return (
<div>
<h1>home</h1>
</div>
)
}
}
// 列表页
class List extends Component {
render() {
console.log('list', this)
return (
<div>
<h1>list</h1>
</div>
)
}
}
// 详情页
class Detail extends Component {
render() {
console.log('detail', this)
// 解构数据
let { history, match } = this.props;
return (
<div>
<h1>detail</h1>
<Demo history={history} match={match}></Demo>
</div>
)
}
}
// 详情页
class Demo extends Component {
render() {
console.log('demo', this)
return (
<div>
<h2>demo</h2>
</div>
)
}
}
// 第二步 确定渲染方式
let routes = (
<HashRouter>
<App></App>
</HashRouter>
)
// 第三步 渲染第二步结果
render(routes, app)

到此这篇关于React中react-redux和路由详解的文章就介绍到这了,更多相关React react-redux 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！