redux toolkit

mutations中修改对应state即可 vuex无需订阅重新渲染，只需要生成新的state

vuex数据流，view调用store，commit提交对应请求到store中对应mutations，store修改，vue检测state修改自动渲染

vuex弱化dispatch和reducer，更简易

共同点

单一数据流可预测变化

都是对MVVM思想服务

中间件如何拿到store和action

redux 中间件本质是一个函数柯里化，

涉及源码

redux toolkit

Redux 最佳实践 Redux Toolki

Redux Toolkit 是 Redux 官方推荐的 Redux 开发工具。注意，RTK只是封装了一层Redux而已。

它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 store、定义 reducer，不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action

type。它还自带了一些最常用的 Redux 插件，例如用于异步逻辑 Redux Thunk，用于编写选择器 selector 的函数 Reselect，你都可以立刻使用。

路由

react-router完全指南

原理

客户端路由实现原理

基于hash 路由，监听hashchange 事件，location.hash=xxxx 改变路由基于H5的 history，通过history，pushState 和 replaceState 修改URL，能应用 history.go() 等 API，允许通

过自定义事件触发实现

react-router实现原理：

基于 history 库实现，可保存浏览器历史记录维护列表，每次回收URL发生变化的回收，通过配置的路径，匹配对应的 Component 并 render

路由切换

组件，通过比较的path属性和当前地址的 pathname 实现，匹配成功则 render，否则渲染null

< Route path = '/about' component = {

About }

/> / / renders < About />

< Route path = '/contact' component = {

Contact }

/> / / renders null

< Route component = {

Always }

/> / / renders < Always />

+，对进行分组，遍历所有的子，渲染匹配的第一个元素

< Switch >

< Route exact path = "/" component = {

Home }

/>

<Route path="/about" component={About} />

<Route path=" / contact " component={Contact} />

</Switch>

，组件创建链接，会在HTML处渲染锚()

< Link to = "/" > Home </ Link >

// <a href='/'>Home</a>

当 < NavLink > 的 to 属性与当前地址匹配时，可将其定义为活跃的

// location = { pathname: '/react' }

</ NavLink >

// <a href='/react' className='hurray'>React</a>

渲染强制导航

重定向

实现路由重定向

请求 /users/:id 被重定向去 '/users/profile/:id'：

属性 from: string：匹配的将要被重定向路径属性 to: string：重定向的 URL 字符串

属性 to: object：重定向的 location 对象属性 push: bool：若为真，重定向将会把新地址加入到访问历史记录里，且无法回退到前面的页面

Link和a

都是链接，都是标签

是 react-router 中实现路由跳转的链接，一般配合使用，跳转只会触发相匹配的对应页面内容更新，不会刷新all page

行为

1. 有onClick 就 onClick
2. click 时阻止a 默认事件
3. 根据to属性，使用histor 或 hash 跳转，跳转只是链接变了，没有all page 刷新，是普通的超链接

禁用后咋实现跳转？

手动赋值给标签 location 属性

let domArr = document.getElementsByTagName('a')

[...domArr].forEach(item => {

item.addEventListener('click', function ()

{

location.href = this.href

} )