React Render props

171 阅读1分钟

首先打个广告,系列文章:

  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的生命周期。