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

4,247 阅读5分钟

什么是 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函数,而是通过一个名为renderprops将外部定义的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 src="/cat.jpg" 
        style={{ position: 'absolute', left: x, top: y }} 
      />
    }
  <Mouse>

结语

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