NavLink的介绍
他可以实现路由的高亮,NavLink比Link高级一点,他自身有一个属性点击哪个路由就会自动给点击的那个路由添加一个类名为active的属性,如果不喜欢这个样式,也可自行用activeClassName给他添加一个自定义的类名,注意:这里如果使用bootStrop的情况,因为普通的类权重低,所以样式会被bootstarp覆盖,这里加上! important就ok了.
<NavLink activeClassName="atdh" to="/Home">home跳转</NavLink>--
<NavLink activeClassName="atdh" to="/Login">Login跳转</NavLink>
{}
<Route exact path="/Home" component={Home}></Route>
<Route path="/Login" component={Login}></Route>
通过this.props.children可以拿到标签体的内容
Switch是什么?
举个例子:如果现在有两个路由,一个Login路由组件,一个About路由组件,如下方代码,Login路由的路径与About路由的路径都是Login,那么会显示哪一个?可能有人觉得会显示About路由,但是不是,他两个都会匹配到并且渲染出来,这种机制是React中的模糊查询,如果我们只想显示Login组件,可以使用Switch组件包住,他就会去做一个查找,只会匹配到第一个符合的,渲染出来,下面再多相同的都不会去查找
<Switch>
<Route exact path="/Home" component={Home}></Route>
<Route path="/Login" component={Login}></Route>
<Route path="/Login" component={About}></Route>
</Switch>
Redirect是什么?
redirect:重定向
一般都放在Switch组件中,并且必须放在Switch的最后一行
<Switch>
{}
<Route path="/my" component={MyPage} />
<Route path="/news" component={NewsPage} />
<Route path="/novel" component={NovelPage} />
{}
<Redirect to="/novel"></Redirect>
</Switch>
React路由传参(三种方式)
1、params传参(刷新页面后参数不消失，参数会在地址栏显示)
路由页面：<Route path='/demo/:id' component={Demo}></Route>
路由跳转并传递参数：
链接方式：<Link to={'/demo/'+'6'}>XX</Link>
或：<Link to={{pathname:'/demo/'+'6'}}>XX</Link>
js方式：this.props.history.push('/demo/'+'6')
或：this.props.history.push({pathname:'/demo/'+'6'})
获取参数：this.props.match.params.id
1、params传参(多个动态参数)
state={
id:88,
name:'Jack',
}
路由页面：<Route path='/demo/:id/:name' component={Demo}></Route>
路由跳转并传递参数：
链接方式：<Link to={{pathname:`/demo/${this.state.id}/${this.state.name}`}}>XX</Link>
js方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})
获取参数：this.props.match.params
2、query传参(刷新页面后参数消失)
路由页面：<Route path='/demo' component={Demo}></Route>
路由跳转并传递参数：
链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})
获取参数： this.props.location.query.name
3、state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)
注：state 传参的方式只支持Browserrouter路由，不支持hashrouter
路由页面：<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数：
链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link>
js方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})
获取参数： this.props.location.state.name
widthRouter的作用
作用:可以把一般组件转换成路由组件,就可以使一般组件具备路由组件的API
返回值:返回的是一个加工完成之后的新组件.
使用:
1.引入withRouter方法
注意:这是w是小写的他是一个方法,并不是组件,组件的首字母大写
import { withRouter} from 'react-router-dom'
2.用这个方法包住你想要转为路由组件的一般组件
class Home extends React.Component {
render() {
return (
<div>
<h1>我是Home组件</h1>
</div>
)
}
}
const HomeRouter = withRouter(Home)
https://redux.js.org/
Redux
它是什么?
Redux 是 JavaScript 状态容器，提供可预测化的状态管理.可以称他为状态管理器,可以单独使用他,也可以跟react结合使用,并不是react开发的它,他是独立的,也可以在angiula,vue中使用,(vue中有vuex,是vue自己开的一个集中状态管理库,所以在vue中不怎么用redux)
安装:
npm install --save redux
Redux的三大核心:
1.单一数据源
整个应用的state被存储在一颗object tree中,并且这个object tree 只存在于唯一的一个store中,这样就能把保证在任何一个页面拿state的值,都能保证他的值是唯一的
2.state是只读的
这里并不是说state不能修改,而是他只能通过action来触发修改,action是一个普通的对象
3.使用纯函数来执行修改
为了描述 action 如何改变 state tree ，你需要编写 reducers。
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。
4.基本概念和 API
4.1 Store
Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。
4.2 State
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。
3.3 Action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。
可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
4.4 Action Creator
View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
上面代码中，addTodo函数就是一个 Action Creator。
4.5 store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。
结合 Action Creator，这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
4.6 Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
const reducer = function (state, action) {
return new_state;
};
整个应用的初始状态，可以作为 State 的默认值。下面是一个实际的例子。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};
const state = reducer(1, {
type: 'ADD',
payload: 2
});
上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。
实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。
为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。
const actions = [
{ type: 'ADD', payload: 0 },
{ type: 'ADD', payload: 1 },
{ type: 'ADD', payload: 2 }
];
const total = actions.reduce(reducer, 0);
上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数作为参数，就可以直接得到最终的状态3。
4.7 纯函数
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。
不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。
function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
return { ...state, ...newState };
}
function reducer(state, action) {
return [...state, newItem];
}
最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。
3.8 store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);
unsubscribe();
总结：
1.NavLink自带高亮效果
2.Switch只会查找到第一个匹配成功的路由，会中断
3.Redirect重定向路由
4.路由的三种传参方式
5.widthRouter可以将一般组件变成路由组件
6.Redux的基础讲解
感谢大家的观看,你们的赞就是对我最大的动力,谢谢
|