Render Props 渲染属性
最后更新：2026-10-28
Render Props 渲染属性
render props 指「把要渲染的 JSX 当函数 prop 传给组件」：组件负责逻辑与状态，调用方用函数参数拿到数据决定渲染什么。它把逻辑复用和 UI 定制彻底解耦，是 Hook 出现前最主流的复用方案。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function DataProvider({ render }) {
const data = /* 逻辑产生的数据 */
return render(data) // 调用渲染函数并传回数据
}
// 使用：<DataProvider render={data => <List items={data} />} />返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
同一个 Counter 逻辑被渲染成两种完全不同的 UI，两个计数器各自独立累加、互不影响。💡 要点
ℹ️ 说明 children 也可以是函数（<Counter>{count => …}</Counter>），本质与 render prop 相同。
💡 提示 逻辑用自定义 Hook 抽取（如 useCounter）通常比 render props 更简洁，两者可以共存。
⚠️ 注意 render props 组件多层嵌套会产生「金字塔」缩进，Hook 推出后多数场景已被替代。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q render props 和 children 函数是一回事吗？
A 机制相同：都是「把函数当 prop 传给组件、由组件调用并传入数据」。children 函数只是写法上更紧凑。
Q 有了 Hook 还需要 render props 吗？
A 多数逻辑复用场景 Hook 更好；但「同一逻辑渲染多种 UI」且需要完全接管视图时，render props 依然合适。
Q render 函数每次渲染都会重建吗？
A 会，它是内联箭头函数。render props 组件内部只调用它而不做 memo 浅比较，所以通常不构成性能问题。
