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'))
复制代码

组件其实是调用了父组件的 render 方法来将它的 state 暴露给 组件。所以， 能够随便按本身的想法使用这个 state，这太美妙了。

核心分析

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

这样作的优点是

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