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 src="/cat.jpg" 
        style={{ position: 'absolute', left: x, top: y }} 
      />
    }
  <Mouse>
複製代碼

結語

若是太長沒看的話，只有一句是我最想分享的：當你寫項目時碰到須要重用的是功能不是UI時，試着用render props封裝一個組件吧。固然 HOC 也是解決方法，不過關於 HOC vs render props 的討論，下篇再寫。