【阅读React文档】-- Render Props

90 阅读1分钟

定义

  • 是指一种在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 将会生成一个新的值。