React中的render props，让组件复用（共享）变得简单，你还不赶紧掌握它？

Render Props – React

我这里也举一个非常简单的使用render prop的例子，帮助大家更容易去理解。

首先，新建一个显示“Hello World”的组件ShowHello.js：

import React from ‘react’;

class ShowHello extends React.Component {

constructor(props) {

super(props);

this.state = {

greet:“Hello World”

}

}

render(){

return (

{this.state.greet}

)

}

}

export default ShowHello

现在我们有一个组件Page，想要获取组件ShowHello的greet此时的状态（即“Hello World”），我们常规的做法可以是：在ShowHello组件内部的渲染方法渲染 Page组件：

Page.js

import React from ‘react’;

class Page extends React.Component {

constructor(props) {

super(props);

this.state = {

greet: this.props.greet //获取父组件（ShowHello）的prop

}

}

render(){

return (

{this.state.greet}

//渲染

)

}

}

export default Page

ShowHello.js

import React from ‘react’;

import Page from ‘./Page’;

class ShowHello extends React.Component {

constructor(props) {

super(props);

this.state = {

greet:“Hello World”

}

}

render(){

return (

//将greet作为prop传给子组件Page

)

}

}

export default ShowHello

这种方法适用于我们的特定用例，但我们还没有达到以可复用的方式真正封装状态或行为的目标。现在，每当我们想要状态用于不同的用例时，我们必须创建一个新的组件（本质上是另一个ShowHello组件，通过将prop传给另一个子组件），它专门为该用例呈现一些东西。

这也是 render prop 的来历：我们可以提供一个带有函数 prop 的ShowHello组件，它能够动态决定什么需要渲染，而不是将Page组件硬编码到ShowHello组件里，并有效地改变它的渲染结果。

import React from ‘react’;

class ShowHello extends React.Component {

constructor(props) {

super(props);

this.state = {

greet:“Hello World”

}

}

render(){

return (

{/* */} //将prop方式换成render prop的方式

{this.props.render(this.state.greet)} //不同的组件共享同一个状态，且不需要创建

//一个新的ShowHello组件

)

}

}

export default ShowHello

import React from ‘react’;

import ShowHello from ‘./ShowHello’;

import Page from ‘./Page’;

class Home extends React.Component {

render(){

return (

<ShowHello render={greet => ( //通过render prop的方式决定哪个组件渲染使用此状态

)}/>

)

}

}

export default Home

现在，我们提供了一个 render 方法，让ShowHello组件能够动态决定什么需要渲染，而不是克隆ShowHello组件然后硬编码来解决特定的用例。如果存在其他组件使用该状态，那么只需要将render中的Page组件改成其他组件即可。

更具体地说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

这项技术使我们共享状态或行为非常容易。要获得这个状态或行为，只要渲染一个带有render prop的组件就能够告诉它当前要渲染什么。

render prop并不是react的API，而是一种与高阶组件（HOC）类似的设计模式，ShowHello组件中传递的prop也不一定要是render，也可以是其他标识，如child（或其他自己想要的标识）。

import React from ‘react’;

import ShowHello from ‘./ShowHello’;

import Page from ‘./Page’;

class Home extends React.Component {

render(){

return (

<ShowHello child={greet => ( //prop可以为自己想要的标识，须传入一个函数

)}/>

)

}

}

export default Home

ShowHello内部的prop也相应变化