React拾遺：Render Props及其使用場景

FateRiddle發表於2018-06-25
React

什麼是 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 的討論，下篇再寫。

相關文章