React架构设计理论

下图整理了React架构设计理论的相关知识点，给大家罗列了设计需要注意的一些点，点击下图打开看看吧。

React架构

• React思想
  • 组件编写顺序
    • 1.组件划分原则
      • 解耦
      • 复用
      • 适度
    • 2.编写静态组件
    • 3.分析State
      • 哪些是State
        • 1. 对组件进行两个灵魂质问
        • 2. 对State集合进行检查和去重
      • State保存的位置
        • 单一状态
        • 状态上移
    • 4. 添加交互行为
  • mock方式
    • server
    • public
• Redux思想
  • 使用redux是在解决什么问题
    • 问题原因：数据状态包括API数据，本地数据和UI状态等随着项目扩大变的管理复杂
    • 解决问题的目的：防止管理状态失控
    • 解决问题的手段：使用redux将视图层和状态管理层从逻辑上解耦
  • State
    • 集中管理，全局唯一
    • 不可变性
    • 定义原则与React State定义原则相同
  • Action
    • 普通Acion
      • ActionCreators
      • ActionTypes
    • 异步Action
      • 异步action的创建
        • 请求开始action
        • 请求成功action
        • 请求失败action
      • 拓展reducer
        • 请求数据相关的state数据结构的变化
        • 请求数据相关的reducer内容扩充
      • 集成redux-thunk
        • 问题原因：净化react组件的代码，想将数据请求放在action当中做
        • 解决问题的目的：实现异步Action
        • 解决问题的手段：使用redux-thunk实现异步Action，抽离react中的数据请求代码
  • Reducer
    • combineReducers
  • Store
  • redux-devtools
    • 浏览器插件
    • 项目依赖库
• React-Redux思想
  • 使用react-redux是在解决什么问题
    • 问题原因：reactUI层和redux状态层的相关代码冗杂在react组件中
    • 解决问题的目的：既能链接reactUI层和redux状态层，又不让两者代码糅合
    • 解决问题的手段：使用react-redux将视图层和状态管理层从代码上解耦
  • 功能
    • Provider组件
    • connect高阶HOC组件
    • map api
  • 容器性组件和展示性组件
    • 关注点
    • 对redux感知
    • 读数据
    • 写数据
    • 如何创建
  • 流程图总结
    • https://www.taopoppy.cn/react_redux_jiagou_react_redux.png
• React-Router
  • 服务端路由和客户端路由的区别
    • 服务端路由：访问http://a就返回a.html，访问http://b就返回b.html，是服务器根据不同的路由返回不同的页面
    • 客户端路由：无论访问什么路径，返回的页面信息都是相同的，是通过js通过判断路径的不同来渲染不同的组件而已，所以叫做客户端路由
  • BrowserRouter和HashRouter区别
    • 之前说react-router-dom是将react-route和web-api做绑定，这些web-api具体指的就是HTML5 history API，利用这些pushState、replaceState等方法实现在客户端实现路由的操作
    • 哈希路由是使用url的hash部分作为路由信息，是通过使用页面不同的哈希和不同的组件之间做映射来完成的，哈希的出现主要为了兼容老版本浏览器，因为老版本的浏览器不支持history的API，所以通过哈希的变化来实现路由的变化。但是这样的情况在现在已经很少了，而且哈希的本身含义就是页面的定位，其逻辑也不符合路由的需求
  • 路由渲染组件的三种方式
    • component
    • render
    • children
  • 全新思维
    • 一切皆组件
    • 动态路由离散式声明法
• 架构设计基础
  • React+Redux项目结构组织方式
    • type（按照类型）
      • 定义
        • 类型指的是该文件在项目当中充当的角色类型
      • 特点
        • 优点
          • 目录结构清晰却明确，功能文件比较紧凑
        • 缺点
          • 新添功能需要在不同的文件中做修改
          • 不利于多人合作下的代码表写和提交合并
    • function（按照功能模块）
      • 定义
        • 功能指的是按照功能或者页面将相关的文件写在同一个文件夹
      • 特点
        • 优点
          • 有利于新功能的开发和拓展
        • 缺点
          • 容易造成store当中存在大量重复性的数据
          • 同一状态在不同的模块中会有不一致的风险
    • Ducks（鸭子类型）
      • 定义
        • 将应用的状态作为模块的划分依据
      • 特点
        • 目录结构清晰紧凑，添加新功能只需添加新模块文件即可
        • 组件需要任何状态只需要引入对应的state模块文件即可
  • 三种设计Redux-State的依据
    • API为依据
      • 定义
        • 以后端API返回数据结构作为State的数据结构
      • 缺点
        • 大量数组类型的结构会造成重复数据的存在
    • UI为依据
      • 定义
        • 不同的UI显示都对应一份State
      • 缺点
        • State数量过多，容易出现错误的State和重复的State
    • 数据库基本原则为依据
      • 整个应用的状态按照领域分成若干子State，子State之间不能保存重复的数据
      • State以键值对的结构存储数据，以记录的key/Id作为记录的索引，记录中的其他字段都依赖于索引
      • State中不能保存可以通过已有数据计算而来的数据，即State中的字段不互相依赖
• 架构设计进阶
  • selector函数
    • 使用selector是在解决什么问题
      • 问题原因：redux和容器性组件存在部分耦合，redux中的state结构变化会影响后者
      • 解决问题的目的：实现react容器性组件和redux状态层的终极解耦
      • 解决问题的手段：selectors是作为不同层级之间的接口不仅彻底解耦了层级，还使得不同层级通过接口进行安全交互和通讯得以实现
    • selector带来的好处
      • selector限制了层级的内部变化影响范围最多到接口
      • selector防止不同层级互相知道内部结构的风险
      • selector可以负责计算和过滤的工作
  • redux中间件（Middleware）
    • middleware的写法
    • middleware的本质
  • redux增强器（Enhancer）
    • Enhancer的写法
    • Enhancer和Middleware的关系
      • 实际上middleware是store enhancer的一种，中间件虽然比较低阶，但是它约束了我们的行为，而增强器enhancer虽然更加灵活，但是破坏redux底层结构的风险更大，所以如果你对redux整体的结构和逻辑都不是太熟悉，尽量就别用
• 架构设计高级
  • reducer如何返回新的state对象
    • Object.assign
    • ES6扩展语法
    • Immutable
      • Immutable的常规使用
      • Immutable的优化
      • Immutable的选择考虑
        • 对项目的整体侵入性很强，我们需要改的地方很多，如果你的项目不是很大，且store当中的数据层级不是很多，结构不复杂，不推荐使用的，我们一定要根据需求去搭建架构，去决定是否使用某些工具
  • Reselect
    • 使用Reselect是解决什么问题
      • store当中的state发生了变化，每个容器型组件的mapStateToProps都要重新执行，产生的结果就是上述的这些selectors函数也要重复执行，也就导致了重复计算，使用Reselect创建的selectors函数，只要使用到的state没有发生变化，这个selectors函数就不会去重新计算，比如getVisibleTodos函数使用到了state.filter和state.todos，修改state.text并不会影响state.filter和state.todos，所以getVisibleTodos函数也就不会重复执行
    • Reselect的常规使用
    • Reselect的选择考虑