定义
- 是指一种在React组件之间使用一个值为函数的prop共享代码的简单技术
- 具有Render Props的组件接收一个函数,该函数返回一个react元素并调用它而不是实现自己的渲染逻辑。
- 更具体地说,render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
理解
函数作为子组件,通过渲染props来实现逻辑组件复用 1、定义子组件
// RenderPropComponent
render () {
return (
<div>
this.props.render(this.state) // 看作是子组件
</div>
)
}
2、使用函数作为props
<RenderPropComponent render={(state) => {
<div> content </div>
}/>
使用Props而非render
render props
是一种设计模式,而不是一定要命名为render的props才是render props
。任何被用于告知组件需要渲染什么内容的函数prop在技术上都可以被称为render props
目的与不足
在不重复代码的情况下共享组件的功能,达到封装、复用的目的。
通过嵌套组件实现,在真实的业务中,会出现嵌套多层,以及梳理props不清晰的问题。
文档地址:react.docschina.org/docs/render…
注意事项
如果你在 render 方法里创建函数,那么使用 render prop 会抵消使用 React.PureComponent
带来的优势。因为浅比较 props 的时候总会得到 false,并且在这种情况下每一个 render
对于 render prop 将会生成一个新的值。