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 = () => (     <Test       render={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>         <Modal           title="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>     <Modal       title="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/cat.jpg"          style={{ position: 'absolute', left: x, top: y }}        />     }   <Mouse>

结语

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

作者：FateRiddle
链接：https://juejin.im/post/5b2f99ea6fb9a00e3a5aa511
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。