まず広告をします.シリーズの文章:

古いReact mixins

HOC(上位コンポーネント)

render props

React Hooks

次は本題に入ります.

Render propsとは

A render prop is a function prop that a component uses to know what to render.
Render Propsの核心思想は,classコンポーネントのstateを1つの関数で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 (
      

        {this.props.render(this.state)}
      
    )
  }
}

// APP 
const App = () => (
  

     (
      
The mouse position is ({x}, {y})
    )}/>
  
)

ReactDOM.render(, document.getElementById('root'))

コンポーネントは、実際には親コンポーネントのrenderメソッドを呼び出して、そのstateをコンポーネントに露出します.だから、このstateを勝手に自分の考えで使えるのは素晴らしいです.

コア分析

新しいMouseコンポーネントのrenderメソッドでは{this.props.render(this.state)}という関数が返され、そのstateをパラメータとしてpropsに伝達することがdemoから容易にわかる.renderメソッドでは,呼び出し時にコンポーネントに必要なstateを直接取り出せばよい.

このようなメリットは

はES 6をサポートし、HOCと同様

propのネーミングの問題を心配する必要はありません.render関数では必要なstate

のみを取ります.

HOCと比較すると、不要な空のコンポーネントに深層レベル

を加えることはない.

で最も重要なのは、ここでの構築モデルが動的であり、すべての変更がrenderでトリガーされ、reactのライフサイクルをよりよく利用することができることです.