React状态管理与路由 | 青训营笔记

161 阅读2分钟

React状态管理简介

Flux状态管理

Flux利用数据的单向流动的形式对公共状态进行管理。

  • View:视图层
  • Action:视图发出的消息
  • Dispatcher:派发者,用来接受Action,执行回调函数
  • Store:数据层,存放状态,一旦发生改动,就会更新数据以及emit相关事件等
Flux缺点
  1. UI组件和容器组件的拆分过于复杂
  2. Action和Dispatcher绑定在一起
  3. 不支持多个store
  4. store被频繁的引入和调用
Redux

Redux的三大原则:单一数据源,只有一个store、store中的state是只读的、使用纯函数来执行修改

Redux比较适合用于大型Web项目,尤其是一些交互足够复杂、组件通信频繁的场景,状态可预测和回溯是非常有价值的。还有一种要定义和上报事故异常和重现的场景,Redux也很有意义

Mobx

它通过透明的函数响应式编程使得状态管理变得简单和可扩展。Mobx借助于装饰器的实现,使得代码更加简洁易懂。由于使用了可观察对象,所以Mobx可以做到直接修改状态,而不必像Redux一样编写繁琐的actions和reducers

Recoil

Recoil是React官方内置的状态管理工具,一定程度上解决了Local State和Context的局限性,且能够兼容React的新特性比如Concurrent模式等

路由是什么

路由(Router)是一种负责寻径的网络设备,它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径。

路由是桥梁,帮助需求方找到供给方,并进行交换。

React-router

  • router
    • BrowserRouter(基于History)
    • HashRouter(基于Hash)
React-router-History

History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。