React Academy · 课时

Render Props 模式

Q: 「Render Props 模式」这节课中我会学到什么？

传入一个返回 JSX 的函数作为属性，在不耦合界面的情况下共享行为。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

传入一个返回 JSX 的函数作为属性，在不耦合界面的情况下共享行为。

Render Props 模式 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将理解渲染属性模式——传入一个返回 JSX 的函数作为属性，并学习何时可以使用它在组件之间共享行为。

什么是渲染属性

渲染属性是一种模式：组件接收一个函数属性，并调用该函数生成渲染输出。使用者控制用户界面，组件提供行为。

<DataProvider render={data => <UserCard user={data} />} />

简单的渲染属性示例

Toggle 组件管理打开和关闭状态，并将当前状态和切换函数传递给渲染属性。由使用者决定如何渲染。

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

使用 children 作为渲染属性

您可以使用函数形式的 `children`，而不是命名的渲染属性。许多库（React Router v5、Formik）都使用这种模式——它有时被称为“函数形式的 children”。

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

鼠标位置跟踪器

这是一个经典的渲染属性示例：MouseTracker 组件跟踪光标位置，并将其传递给渲染属性。任何使用者都可以按照自己的需要显示该位置。

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

渲染属性与自定义钩子

在钩子出现之前，渲染属性是首选模式。现在，自定义钩子可以更简洁地完成同样的工作：钩子返回数据和函数，组件在自己的 JSX 中使用它们。在现代 React 中，钩子更受推荐。

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

渲染属性仍然适用的场景

在以下情况下，渲染属性仍然很有用：(1) 您需要在组件树中的特定位置注入动态渲染内容；(2) 您正在构建一个将逻辑与用户界面分离的无头组件库。

性能警告

内联定义渲染属性会在父组件每次渲染时创建一个新函数，从而阻止 PureComponent 或 React.memo 子组件跳过渲染。请将渲染属性函数提取为稳定的变量或方法。

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

组合渲染属性

嵌套多个渲染属性组件很快就会形成“渲染属性地狱”或“包装器地狱”——回调层层嵌套，难以阅读。这也是引入钩子的原因之一。

库中的渲染属性

React Router v5 使用渲染属性实现 Route。Downshift、Formik 和 React-Table 也使用了相应的变体。理解渲染属性有助于您阅读和调试使用这些库的代码。

快速检查

与传递静态 JSX 相比，渲染属性模式的主要优势是什么？

回顾

渲染属性传递一个返回 JSX 的函数。组件提供行为，使用者提供用户界面。在现代 React 中，应优先使用自定义钩子，但仍需理解渲染属性，以便阅读现有代码和构建无头组件。

接下来

下一课：**高阶组件（HOC）详解**——您将通过包装组件来注入属性、保护路由或添加日志记录。

常见问题解答

「Render Props 模式」课时是免费的吗？

是的 — 「Render Props 模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Render Props 模式」这节课中我会学到什么？

传入一个返回 JSX 的函数作为属性，在不耦合界面的情况下共享行为。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Render Props 模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy