Render Props与Custom Hook模式的核心差异、选型及业界应用情况

一、两种模式的实现代码 #

1. Render Props模式 #

export const flip = () => ({
  flipResults: Math.random(),
});

export const CoinFlipLogic = ({ children }) => {
  const [state, setState] = useState(flip());
  const handleClick = () => setState(flip());

  return children({
    rerun: handleClick,
    isHeads: state.flipResults < 0.5,
  });
};

export const CoinFlip = ({ showLabels, showButton }) => {
  return (
    <CoinFlipLogic>
      {({
        rerun,
        isHeads
      }) => (
        <>
          {showButton && <button onClick={rerun}>Reflip</button>}

          {isHeads ? (
            <div>
              Head
              {showLabels && <span>Heads</span>}
            </div>
          ) : (
            <div>
              Tails
              {showLabels && <span>Tails</span>}
            </div>
          )}
        </>
      )}
    </CoinFlipLogic>
  );
};

2. 自定义Hook模式 #

export const useCoinFlipLogic = () => {
  const [state, setState] = useState(flip());
  const handleClick = () => setState(flip());

  return {
    rerun: handleClick,
    isHeads: state.flipResults < 0.5,
  };
};

export const CoinFlip = ({ showLabels, showButton }) => {
  const { rerun, isHeads } = useCoinFlipLogic();
  return (
    <>
      {showButton && <button onClick={rerun}>Reflip</button>}
      {isHeads ? (
        <div>
          Head
          {showLabels && <span>Heads</span>}
        </div>
      ) : (
        <div>
          Tails
          {showLabels && <span>Tails</span>}
        </div>
      )}
    </>
  );
};

二、核心差异 #

• 载体与形态不同：Render Props是基于组件的复用方案，把逻辑封装成接收children（渲染函数）的组件；自定义Hook是纯函数，直接封装状态逻辑并返回状态和操作方法，属于React Hooks体系的一部分。
• 复用方式不同：Render Props需要在JSX中嵌套逻辑组件，通过函数传递渲染内容，会增加JSX层级；自定义Hook直接在目标组件内部调用，拿到返回值后即可使用，写法更扁平。
• 状态归属不同：Render Props的状态属于逻辑组件（如CoinFlipLogic），目标组件通过渲染函数接收状态；自定义Hook的状态属于调用它的组件，每个组件调用Hook都会生成独立的状态副本，逻辑归属更清晰。
• 语法复杂度不同：Render Props容易出现"嵌套地狱"，多组件嵌套时可读性下降；自定义Hook无此问题，代码结构更贴合函数组件的直觉。

三、选型建议 #

• 优先选自定义Hook：如果需求是复用状态逻辑（比如示例中的硬币翻转状态管理），自定义Hook是最优解。它贴合React Hooks设计理念，代码简洁、可读性强，维护成本低，也是当前React社区的主流选择。
• 考虑Render Props的场景：如果需要复用UI渲染逻辑、兼容无Hooks的旧版本React项目，或者需要让逻辑组件控制渲染时机/条件，Render Props可作为备选。另外，在共享组件实例状态的场景（如全局状态容器），Render Props也能发挥作用。

四、实际开发中的应用广度 #

目前自定义Hook的应用远超过Render Props，原因主要有三点：

1. React官方推出Hooks后，将其定位为函数组件的标准写法，自定义Hook作为状态逻辑复用的核心方案，得到官方和社区的大力推广。
2. 自定义Hook的写法更符合函数式编程思路，与函数组件融合度更高，避免了Render Props的嵌套问题，代码更整洁。
3. 绝大多数现代React第三方库（如react-query、zustand、react-hook-form等）都基于Hook设计，进一步推动了自定义Hook的普及，新项目基本都会优先选择自定义Hook，Render Props更多用于维护旧代码或特定小众场景。

内容的提问来源于stack exchange，提问作者Ben Tsai