组件复用之Render Props

React 16+ 版本更新后，新增了许多有意思的功能，我们先来看看redner props这个特性

什么是 Render Props

先看官方是怎么说的：

The term “render prop” refers to a simple technique for sharing code 
between React components using a prop whose value is a function.

大概是：这个技术呢，很简单，就是给组件添加一个值为函数的属性，这个函数可以在组件渲染（render）的时候调用，那这个组件是干啥用的呢？就是为了给原有组件“注入”其它组件的代码。

为啥要有这个东西？

这个技术只是用来解决一些比较特殊的问题的，并不是让你没事就用的，那么我们可能就要问了，什么时候要用呢？
同样套用官方的说法：

a render prop is a function prop that a component uses to know what to render.

大概是：如果你一个组件不知道自己渲染什么东西，或者说一个组件的基础功能是提供”可变数据源“，具体展示UI可以从外部注入，那么就可以用这个技术了。

感觉这样说也不能很好理解，下面来看看具体的例子吧。

时钟例子重构

先用组件实现一个简单的时钟，只显示小时和分钟，如下

clock1.png

代码如下：

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>
  )
}

若需要支持显示年，月，日，时，分，秒等功能，那是不是要重写一个组件呢？
若不想重写组件，就要复用组件，就要用到render props了。
将可变的部分使用prop函数传入，使用此函数渲染不同的效果即可。
可变的部分包括：表带Strap，指针Hand，手表Bezel，屏幕Screen，表盘Face等等

定义可变组件

定义默认表盘，只显示小时，分钟，如下：

const DefaultFace = ({ date }) => (
  <>
    <Value>{date.format('HH')}</Value>
    <Value>{date.format('mm')}</Value>
  </>
)

定义时分秒的表盘，如下：

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>
    </>
  )
}

定义指针动画表盘，如下：

const AnalogFace = ({ date }) => {
  const seconds = (360 / 60) * date.seconds()
  const minutes = (360 / 60) * date.minutes()
  const hours = (360 / 12) * date.format('h')
  return (
    <>
      <Hand type="seconds" value={seconds} />
      <Hand type="minutes" value={minutes} />
      <Hand value={hours} />
    </>
  )
}

注意，这里的Hand和Value是使用styled-components样式组件及css3实现。

复用组件

将可变组件func作为prop传入到组件即可，如下

class App extends Component {
  render() {
    return (
      <div id="app">
        <Watch />
        <Watch face={date => <DayFace date={date} />} />
        <Watch face={date => <AnalogFace date={date} />} />
        <Watch face={date => <DateFace date={date} />} />
        <Watch face={date => <SecondsFace date={date} />} />
      </div>
    );
  }
}

这样就实现了render props，组件会根据传入的func渲染出特定的效果。

clock2.png

参考

https://segmentfault.com/a/1190000018009490?utm_source=tag-newest
https://github.com/beMySun/3-min-to-handle-render-props/blob/master/src/App.js
https://github.com/dt-fe/weekly/blob/master/75.%E7%B2%BE%E8%AF%BB%E3%80%8AEpitath%20%E6%BA%90%E7%A0%81%20-%20renderProps%20%E6%96%B0%E7%94%A8%E6%B3%95%E3%80%8B.md

最后编辑于：2020.01.14 09:18:55