Render Props 是一种组件设计模式，通过 props 传入函数来决定渲染内容，用于逻辑复用且保持调用方渲染控制权；核心是函数式 prop（如 render 或 children），接受数据并返回 JSX。
JavaScript 中的“渲染属性”（Render Props）不是 React 的内置 API，而是一种组件设计模式，核心思想是：**通过 props 传入一个函数，由该函数决定如何渲染内容**。它常用于逻辑复用，比如共享状态、事件处理、数据获取等，同时保持渲染控制权在调用方。
render props 是什么？
所谓 render props，就是组件接收一个名为 render（或任意名字，如 children、itemRenderer）的 prop，这个 prop 是一个函数，组件内部在合适时机调用它，并把需要的数据作为参数传进去，最终把函数返回的 JSX 渲染出来。
它和高阶组件（HOC）、自定义 Hook 的目标一致——复用逻辑，但更灵活、更显式，也更容易调试。
怎么写一个 render props 组件？
以一个简单的计数器为例，它管理 state 和 click 逻辑，但不关心怎么展示：
立即学习“Java免费学习笔记（深入）”；
const Counter = ({ render }) => {
const [count, setCount] = useState(0);
const increment = () => setCount(c => c + 1);
// 把数据和行为作为参数，交给 render 函数决定怎么渲染
return render({ count, increment });
};
使用时：
<Counter
render={({ count, increment }) => (
<div>
<p>当前数量：{count}</p>
<button onClick={increment}>+1</button>
</div>
)}
/>
你也可以用 children 代替 render（React 官方推荐方式之一），效果一样：
// 使用 children 作为 render prop
<Counter>
{({ count, increment }) => (
<div>
<span>✅ {count}</span>
<button onClick={increment}>点我加</button>
</div>
)}
</Counter>
常见用法和注意事项
-
命名灵活：prop 名不必叫
render，叫children、listItem、loadingRenderer都可以，关键是它是个函数且被调用 -
避免内联函数导致重渲染：如果每次 render 都写新函数（如
render={() => ...}），父组件更新时会传新函数，可能让子组件误判为 props 变化。可配合useCallback缓存 -
支持 TypeScript：给 render 函数加上类型，能获得更好的提示和安全检查，例如：
render: (props: { count: number; increment: () => void }) => ReactNode -
不是必须用 render prop：现代 React 更推荐用自定义 Hook（如
useCounter()）替代，更简洁、无额外组件嵌套；render props 适合需要跨层级传递渲染逻辑，或兼容 class 组件的场景
和 children 与普通 props 的区别
普通 props 传的是静态值或回调函数；children 本身可以是任意 React 节点（文本、元素、数组、函数）；当 children 是函数 时，它就构成了 render props 模式。所以本质上，children 是最自然的 render prop 实现方式，无需额外约定 prop 名。
例如：<dataloader>{(data) => <list items="{data}/">}</list></dataloader> —— 这就是典型的 render props 应用，比写一堆配置项清晰得多。
基本上就这些。render props 不复杂，但容易忽略它的本质：不是语法糖，而是一种「把渲染权交出去」的设计哲学。
