书：https://pan.baidu.com/s/1IVTI-jQveSb4Cdrio6XkBw?pwd=ijyk
React设计模式是在React开发中常用的一系列设计原则和方法的总称，它们旨在提高代码的可维护性、可读性和可扩展性。以下是对React设计模式的总结：
一、组件模式（Component Pattern）
- 描述：组件是React的基本构建块，每个组件可以看作是一个独立的、可复用的UI单元。
- 优点：
- 可复用性：组件可以在不同的地方重复使用，提高开发效率。
- 易于测试和维护：由于组件是独立的，因此可以单独对组件进行测试和维护。
- 可组合性强：可以通过组合不同的组件来构建复杂的UI界面。
二、高阶组件模式（Higher-Order Component Pattern，HOC）
- 描述：高阶组件是一个函数，它接收一个组件作为参数并返回一个新的组件。HOC用于逻辑复用，例如权限控制、状态管理等。
- 优点：
- 提高代码复用性：将可复用的逻辑放在HOC中，避免在多个组件中重复编写相同的代码。
- 逻辑与UI分离：将业务逻辑与UI组件分离，使代码更加清晰和易于维护。
三、渲染属性模式（Render Props Pattern）
- 描述：渲染属性是指通过将一个函数作为组件的属性，将需要共享的状态或行为传递给子组件。子组件可以根据这个函数的返回值来进行渲染。
- 优点：
- 提高灵活性：渲染属性模式允许开发者根据需要自定义渲染逻辑。
- 替代HOC进行逻辑复用：在某些情况下，渲染属性模式可以替代HOC来实现逻辑复用，同时避免HOC可能带来的嵌套问题。
四、容器/展示组件模式（Container/Presentational Pattern）
- 描述：将组件分为容器组件和展示组件。展示组件负责UI渲染，不包含业务逻辑，而容器组件负责处理数据和逻辑，将数据传递给展示组件。
- 优点：
- 分离关注点：将业务逻辑和UI渲染分离，使代码更加清晰和易于维护。
- 提高组件的可复用性和可测试性：展示组件可以独立地进行测试和复用，不受容器组件的影响。
五、单向数据流模式（One-Way Data Flow Pattern）
- 描述：React推崇单向数据流的思想，父组件通过props将数据传递给子组件，子组件不能直接修改父组件传递来的数据，只能通过回调函数的方式将数据变更的请求传递给父组件。
- 优点：
- 数据流向清晰：单向数据流使得数据的流向更加清晰和易于追踪。
- 避免数据污染：由于子组件不能直接修改父组件的数据，因此可以避免数据污染和状态混乱的问题。
六、Redux模式（Redux Pattern）
- 描述：Redux是一个可预测的状态管理库，它使用了一些设计模式，如单一状态树、纯函数、中间件等。React与Redux结合使用可以更好地进行状态管理和组件通信。
- 优点：
- 集中管理状态：Redux将应用的状态集中存储在一个单一的store中，方便管理和追踪。
- 可预测性：由于Redux使用纯函数来更新状态，因此状态的变化是可预测的，这有助于调试和测试。
七、其他设计模式
- 基础组件模式：创建一个具备默认行为且支持定制化的基础UI组件，通过定制化可以覆盖组件的默认行为，为组件提供自定义的整体视觉和交互效果。
- 组合组件模式：通过多个组件的组合来完成特定任务，这些组件通过共享的状态、逻辑进行关联。典型的例子是Select和Select.Option组件。
八、设计原则
- 单一职责原则：每个组件或函数应该只负责一个职责，以提高代码的可读性和可维护性。
- 开闭原则：对扩展开放，对修改关闭。这意味着应该通过添加新代码来扩展功能，而不是修改现有代码。
- 依赖反转原则：依赖于抽象而不是具体的实现。这有助于降低代码之间的耦合度，提高代码的可重用性和可测试性。
- 不要自我重复（DRY原则）：避免重复代码，以减少代码维护的复杂性。
综上所述，React设计模式是一套用于提高React应用代码质量的设计原则和方法。通过合理选择和组合使用这些模式，可以使React应用更加健壮、易于维护和扩展。