深入浅出React和Redux学习笔记（四）

  • Z时代
  • 2024-01-10
  • 分类：综合

react

模块化React和Redux应用

创建一个复杂的应用该如何操作？

  1. 模块化应用的要点；

  2. 代码文件的组织方式；

  3. 状态树的设计；

  4. 开发辅助工具；

1.模块化应用要点

React负责视图，Redux管理状态。

开始一个新的应用应该考虑的事情：

  1. 代码文件的组织结构；

  2. 确认模块的边界；

  3. Store的状态树的设计；

2.代码文件的组织方式

2.1按角色组织

按角色组织(Organized by Roles):在MVC中，应用代码分为Controller、Model、View，分别代表三种不同角色，把对应角色的代码放入对应目录中的组织代码方式。

Redux按角色组织代码文件目录：

  1. reducer:所有Redux的reducer;

  2. actions:所有action的构造函数；

  3. components:所有的傻瓜组件；

  4. containers:所有的容器组件；

2.2按功能组织

每个基本功能对应一个功能模块，每个功能模块对应一个目录。

3.模块接口

“在最理想的情况下，我们应该通过增加代码就能增加系统的功能，而不是对现有代码的修改来增加代码”

不同功能模块之间的依赖关系应该简单而清晰，即保持模块的低耦合性；一个模块应该把自己的功能封装的很好，让外界不要太依赖与自己的内部结构，不会因内部结构的变化而导致外部模块的功能，即高内聚性。

4.状态树的设计

状态树的设计的原则：

  1. 一个模块控制一个状态节点；

  2. 避免冗余数据；

  3. 树形结构扁平；

4.1一个节点只属于一个模块

Store上的每个state只能通过reducer来修改，每个模块都有机会导出一个自己的reducer。

reducer之间的状态树上的修改权是互斥的，不可能让两个reducer都可以修改同一个状态树上的节点。

4.2避免冗余数据

冗余数据是一致性的大敌，如果在Store上存储冗余数据，那么维持不同部分数据一致性就是个大问题。

相对于性能问题，数据一致性更加重要。

4.3树形结构扁平

如果树形结构层次很深，往往意味着树形很复杂，一个很复杂的状态树是很难管理的。

从代码的角度看，深层次树形状态结构会让代码很冗长。

5.Todo应用实例

无

6.开发辅助工具

6.1Chrome扩展包

React和Redux开发的三个Chrome扩展包：

  1. React Devtools:检视React组件的树形结构；

  2. Redux Devtools:检视Redux数据流，可以将Store状态跳跃到任何一个历史状态；

  3. React Perf:可以发现React组件的渲染性能问题；

6.2redux-immutable-sate-invariant辅助包

redux-immutable-sate-invariant包:提供一个Redux的中间件，能让Redux在每次派发动作后做一个检查。

中间件：增强Redux和Store实例功能的一种方法。

以上是 深入浅出React和Redux学习笔记（四） 的全部内容， 来源链接： utcz.com/z/381192.html

回到顶部