观察者模式解决组件间通信问题
使用观察者解决组件间通信，分成两步
- 在一个组件中，订阅消息
- 在另一个组件中，发布消息
发布消息之后，订阅的消息回调函数会执行，在函数中，我们修改状态，这样就可以实现组件间通信了。这就是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标签
举例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
// 引入路由 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) |
