React拾遗：Render Props及其使用场景

什么是 Render Props？

新的context api使用了render props：

<ThemeContext.Consumer>{theme => (<button{...props}style={{backgroundColor: theme.background}}/>)}
</ThemeContext.Consumer>

第一次见到这个语法时，大多会很惊讶，因为日常代码里props.children必然是字符串或者元素。但事实上props.children可以是函数，只要最终生成的render的返回值是dom元素就行。例如：

// chilren props
const Test = props => props.children('hello world')
const App = () => (<Test>{text => <div>{text}</div>}</Test>
)ReactDOM.render((<App />, root)  // 返回<div>hello world</div>

虽然没有实际意义，但这即是一个 render props。当然render props最初的意思是：组件不自己定义render函数，而是通过一个名为render的props将外部定义的render函数传入使用。以上例来说，会是这样：

// render props
const Test = props => props.render('hello world')
const App = () => (<Testrender={text => <div>{text}</div>}/>
)ReactDOM.render((<App />, root)  // 返回<div>hello world</div>

因为现实中render函数很庞大，为了代码整洁多半会使用children而不是自定义的render来接收外部的render函数。所以这一技巧也可以称为children props（相对于render props更加不知所云的名称），但一般统称render props。

为何要使用如此怪异的语法呢？

为了重用性。React的组件化就是为了方便重用。大多数场景我们需要重用的是UI（例如文章列表，侧栏），但也有少数情况需要重用的是功能和状态（例如context）。

如果说React的核心是State => UI, 普通的组件是UI重用，那么render props就是为了State重用而应运而生的。

Render Props 小史

在 Demo 展开前插播一段 render props 的趣史。

最早引人关注是从 Facebook 的 Cheng Lou 写的 React Motion 动画库。

import { Motion, spring } from 'react-motion';<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>{value => <div>{value.x}</div>}
</Motion>

之后这一写法被各位大牛广泛接受，写过很多非常赞的前端教程的 Kent C. Dodds 就非常喜欢 render props, 他所任职的 PayPal 的输入框组件 downshift 也使用了 render props

大家熟知的 react-router 的作者 Michael Jackson 也是 render props 的极力推崇者。他twitter过一句很有争议的话：

Next time you think you need a HOC (higher-order component) in @reactjs, you probably don't.

翻译过来就是：下次你想使用HOC解决问题时，其实大半不需要。在回复中他补充说明到，

I can do anything you're doing with your HOC using a regular component with a render prop. Come fight me.

即是说，所有用 HOC 完成的事，render props 都能搞定。 值得一提的是 react-router 4 里唯一的一个 HOC 是withRouter, 而它是用 render props 实现的，有兴趣的可以去看一下源代码。

HOC 虽然好用，但写一个“真正好用”的HOC却要经过一道道繁琐的工序（React的新api fowardRef 就几乎是为此而生的），是个用着舒服写着烦的存在。所以感觉最近大有“少写 HOC 推崇 render props”的思潮。至于新的 Context api 虽然思路上和react-redux如出一辙，却选择了 render props 的写法，在我看来也是顺理成章。

Render Props 使用场景

实例1: 一个日常的使用场景是弹窗。App的弹窗UI可能千奇百怪，但它们的功能却是类似的：无非有个显示隐藏的状态，和一个控制显隐的方法，以 antd 为例：

import { Modal, Button } from 'antd';class App extends React.Component {state = { visible: false }showModal = () => {this.setState({visible: true,});}handleOk = (e) => {// 做点什么this.setState({visible: false,});}handleCancel = (e) => {this.setState({visible: false,});}render() {return (<div><Button onClick={this.showModal}>Open</Button><Modaltitle="Basic Modal"visible={this.state.visible}onOk={this.handleOk}onCancel={this.handleCancel}><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></Modal></div>);}
}

上面是最简单的Modal使用实例，但大家心中理想的使用方式是如下的：

  <div><Button>Open</Button><Modaltitle="Basic Modal"onOk={this.handleOk //做点什么}><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></Modal></div>

我只想写业务逻辑的 onOK，其他部分不都是弹窗的实现细节吗，为啥不能封装起来？

答案是可以的。下面就使用 render props 来写一个Pop组件，封装所有逻辑。希望的最终使用方式是：

<Pop>{({ Button, Modal }) => (<div><Button>Open</Button><Modal title="Simple" onOK={() => alert("everything is OK")}><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></Modal></div>)}</Pop>

大家可以先尝试自己写一下。我写的如下：

import { Modal, Button } from 'antd';class Pop extends React.Component {state = { on: false };toggle = () => this.setState({ on: !this.state.on });// 将antd 组件包裹上状态和方法MyButton = props => <Button {...props} onClick={this.toggle} />;MyModal = ({ onOK, ...rest }) => (<Modal{...rest}visible={this.state.on}onOk={() => {onOK && onOK();this.toggle();}}onCancel={this.toggle}/>);render() {return this.props.children({on: this.state.on,toggle: this.toggle,Button: this.MyButton,Modal: this.MyModal});}
}

完整的Demo

简单的说，render props 将如何render组件的事代理给了使用它的组件，但同时以参数的形式提供了需要重用的状态和方法给外部。实现UI的自定义和功能的重用。不过这个例子有点激进，不仅提供了状态和方法，还提供了带状态的组件作为参数。如果大家有不同意见，请务必留言，互相学习。

实例2: 一般的render props只封装 “state”。React官方文档上 Dan Abromov 给出了一个很好的例子：鼠标跟踪的功能。这个功能有很多应用场景，也很好实现：

class Mouse extends React.Component {state = { x: 0, y: 0 }handleMouseMove = e => this.setState({ x: e.clientX, y: e.clientY })render() {return (<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}><p>鼠标位于 ({this.state.x}, {this.state.y})</p></div>)}
}

但如何封装和重用这个功能呢？比如要写一个猫的图案跟着鼠标走。大家可以先试试。答案如下：

// 封装
class Mouse extends React.Component {state = { x: 0, y: 0 }handleMouseMove = (e) => this.setState({ x: e.clientX, y: e.clientY })render() {return (<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>{this.props.children(this.state)}</div>)}
}
// 重用
const Cat = () => <Mouse>{({x,y}) => <img src="/cat.jpg" style={{ position: 'absolute', left: x, top: y }} />}<Mouse>

结语

如果太长没看的话，只有一句是我最想分享的：当你写项目时碰到需要重用的是功能不是UI时，试着用render props封装一个组件吧。当然 HOC 也是解决方法，不过关于 HOC vs render props 的讨论，下篇再写。

原文发布时间为：2018年06月25日

原文作者：FateRiddle
本文来源：掘金如需转载请联系原作者