一、概念
Render props 是一种在 React 中实现代码复用的方法。它允许你在一个组件中定义逻辑,并在另一个组件中渲染这个逻辑。这个技术通过一个特殊的 props,称为 “render props”,来实现复用。
使用 render props 的基本方法是,在一个组件中定义逻辑,然后在另一个组件中通过 render props 属性渲染这个逻辑。这个 render props 属性的值是一个函数,该函数的作用是渲染这个逻辑。
这种技术与高阶组件相似,但是它更加灵活,因为它可以在组件内部灵活地控制如何渲染逻辑。同时,它也比高阶组件简单,因为它不需要创建一个新的组件,而只需要通过一个函数渲染组件。
总的来说,render props 是一种灵活、高效且易于理解的代码复用技术,可以在 React 中实现更好的代码复用
二、例子
封装一个延迟三秒后渲染一个用户信息列表的render props组件
import React from "react";
export default class MyComponent extends React.Component {
state = {
data: [],
};
componentDidMount() {
// 初始化后三秒 塞入数据
setTimeout(() => {
this.setState({
data: [
{
name: "张三",
age: 18
},
{
name: "李四",
age: 20
},
{
name: "王五",
age: 22
},
]
})
}, 3000)
}
render() {
/**
* 接收父组件的传过来的render属性并调用
*/
return this.props.render(this.state.data);
}
}
使用render props
export default class App extends React.Component {
render() {
return (
<MyComponent
/**
* render属性是一个方法
* 并且要给这个方法写返回值,
* 返回值的结构就会在子组件里渲染
*/
render={(data) => (
<ul>
{data.map((item) => (
<li key={item.id}>
{item.name} -- {item.age}
</li>
))}
</ul>
)}
/>
);
}
}
三、使用场景
1、实现代码复用:如果多个组件需要实现相似的逻辑,可以使用 render props 实现代码复用。
2、动态渲染内容:通过 render props,可以在不同的场景下动态渲染内容,达到更好的可定制性。
3、访问组件的状态:使用 render props 可以访问组件的状态,从而在不同的场景下呈现不同的内容