一、React 的几个设计模式

  • 高阶组件（HOC）
  • Render Props
  • 剥离有状态组件与无状态组件

本质上为了以尽可能优雅的姿态，实现组件逻辑的复用。

二、高阶组件（HOC）

概念：高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。

  1. const withProps = (WrappedComponent) => {
  2.     const targetComponent = (props) => (
  3.         <div className="wrapper-container">
  4.             <WrappedComponent {...props} />
  5.         </div>
  6.     );
  7.     return targetComponent;
  8. };

高阶组件可以帮助我们从根本上减少重复的编写和修改工作，这不仅是高阶组件这一种模式的利好，更是“逻辑复用”这件事情的意义所在。

三、Render Props

高阶组件的使用姿势是用“函数”包裹“组件”，而 render props 恰恰相反，它强调的是用“组件”包裹“函数”。

  1. import React from 'react'  
  2. const RenderChildren = (props) => {
  3.   return(
  4.      <React.Fragment>
  5.         {props.children(props)}
  6.      </React.Fragment>
  7.   );
  8. };
  • render props 的载体应该是一个React 组件，这一点是与高阶组件不同的（高阶组件本质是函数）；
  • render props 组件正常工作的前提是它的子组件需要以函数形式存在。

render props 和高阶组件一个非常重要的区别，在于对数据的处理上：在高阶组件中，目标组件对于数据的获取没有主动权，数据的分发逻辑全部收敛在高阶组件的内部；而在 render props 中，除了父组件可以对数据进行分发处理之外，子组件也可以选择性地对数据进行接收。

四、单一原则

单一职责原则又叫“单一功能原则”，它指的是一个类或者模块应该有且只有一个改变的原因。

有状态组件和无状态组件：

  • 无状态组件不一定是函数组件，不维护内部状态的类组件也可以被认为是无状态组件。
  • 相比之下，能够在组件内部维护状态、管理数据的组件，就是“有状态组件”。

对一个 React 组件来说，它做的事情说到底无外乎是这两件：

  • 处理数据（包括数据的获取、格式化、分发等）
  • 渲染界面

按照“单一职责”的原则，我们应该将数据处理的逻辑和界面渲染的逻辑剥离到不同的组件中去，这样功能模块的组合将会更加灵活，也会更加有利于逻辑的复用。此外，单一职责还能够帮助我们尽可能地控制变更范围，降低代码的维护成本：当数据相关的逻辑发生变化时，我们只需要去修改有状态组件就可以了，无状态组件将完全不受影响。

五、设计模式解决不了所有的问题

当我们想要去复用一段逻辑时，第一反应肯定不是“高阶函数”或者“render props”，而应该是“自定义 Hook”。