三分鐘掌握 React render props

上午review 代碼的時候， 發現一些問題， 關於邏輯複用的一些小技巧。 而後就花點時間整理了下， 作了個例子， 聊一下 render props.

---

what is it ?

簡單點講, render props 就一種在組件間共享邏輯的技巧。 把一些渲染邏輯以prop 的形式傳遞給 Component, 把注意力集中在渲染邏輯上。

What do render props do?

處理組件的渲染邏輯。

When to use ?

當你發現組件中有重複的邏輯或者模式的時候。好比：

• 重複的UI結構
• 共享某個數據源
• 共享某個全局事件（好比scroll, resize, ...）

A live demo

光說不練假把式， 一塊兒看個例子。

想了想， 寫個表吧, 會動的那種（年會毛都沒中，給個手環也好啊..）。

一番操做以後， 咱們花了一個表：

如今咱們又想換個錶帶， 改怎麼作？ 重寫一個嗎？ 顯然不是。

這時候就輪到 render props 登場了。

咱們能夠把一個個部分獨立出來， 把有差別的部分看成prop 傳入就能夠了。

上代碼：

class Watch extends Component {
  state = {
    date: moment(),
  }
  
  static propTypes = {
    face: PropTypes.func,
  }
  
  static defaultProps = {
    face: date => <DefaultFace date={date} />,
  }
  
  componentDidMount = () => (this.TICK = setInterval(this.update, 1000))
  
  componentWillUnmount = () => clearInterval(this.TICK)
  
  update = () => this.setState({ date: moment() })
  
  render = () => (
    <Strap>
      <Bezel>
        <Screen>
          <Face>{this.props.face(this.state.date)}</Face>
        </Screen>
      </Bezel>
    </Strap>
  )
}

不用關注 Strap， Bezel， Screen 這些， 咱們只看關鍵點： Face.

若是咱們啥也不傳， 獲得的將是一個空空如也的錶盤:

這時候能夠給他加個 DefaultFace, 顯示 HH:mm

static defaultProps = {
    face: date => <DefaultFace date={date} />,
  }

很贊。

如今給他換個樣子， 騷黃色：

const SecondsFace = ({ date }) => {
  const hours = date.format('HH')
  const minutes = date.format('mm')
  const seconds = date.format('ss')
  return (
    <>
      <Value>{hours}</Value>
      <Value>{minutes}</Value>
      <Value>{seconds}</Value>
    </>
  )
}
SecondsFace.propTypes = watchfacePropTypes;

心滿意足。

這時候咱們的render 是這樣的：

class App extends Component {
  render() {
    return (
        <Watch />
        <Watch face={date => <SecondsFace date={date} />} />
      </div>
    );
  }
}

如此這般， 能夠把其餘款式的表都寫了：

舒服～

年會又又又又啥也沒中的心情放佛獲得了安撫。

完整代碼在這裏: 代碼 ，喜歡的能夠給個星星。

Live Demo : codeOpen

Tips

• Dos 👍

  • 當有組件能夠共享或者部分渲染邏輯重複的時候

• Dont's 👎

  • 寧肯不用也不要濫用
  • 避免在使用PureComponents 的時候用render Props. 除非你的prop 是靜態定義的。

• Notes ⚠️

  • Render Prop 只是一個技巧，名字啥均可以， 好比 children。
  • 大部分能夠用Render Prop的場景， 也能夠用HOC 實現， 反之亦然。

That's it.

:)

若有紕漏， 歡迎指正，謝謝。

更多參考：

https://reactjs.org/docs/rend...