React Render props

首先打个广告，系列文章：

1. 古老的React mixins
2. HOC（高阶组件）
3. render props
4. React Hooks

下面进入正题：

什么是Render props

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

Render Props 的核心思想是，通过一个函数将class组件的state作为props传递给纯函数组件。这句话理解起来比较拗口。其实无论是上上篇文章中的React mixins还是上篇文章中的React HOC都是在解决代码复用问题，Render Props也不无例外。
我们接着来用上篇文章中的🌰。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired,
  }

  state = { x: 0, y: 0 }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

// APP是一个纯函数无状态组件
const App = () => (
  <div style={{ height: '100%' }}>
    <Mouse render={({ x, y }) => (
      <h1>The mouse position is ({x}, {y})</h1>
    )}/>
  </div>
)

ReactDOM.render(<App/>, document.getElementById('root'))

<Mouse> 组件实际上是调用了父组件的 render 方法来将它的 state 暴露给 <App> 组件。因此，<App> 可以随便按自己的想法使用这个 state，这太美妙了。

核心分析

从demo中很容易看到，新建的Mouse组件的render方法中返回了{this.props.render(this.state)}这个函数，将其state作为参数传入其的props.render方法中，调用时直接取组件所需要的state即可。

这样做的优势是

• 支持ES6，和HOC一样
• 不用担心prop的命名问题，在render函数中只取需要的state
• 相较于HOC，不会产生无用的空组件加深层级
• 最重要的是，这里的构建模型是动态的，所有改变都在render中触发，能更好的利用react的生命周期。