React学习之 Render props

一、这是个啥？

相信很多人和我一样，在听到这个名词的时候第一想知道的这是个啥，是个啥咱翻一下官方文档：

• 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
• render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
• 如果一个组件不知道自己渲染什么东西，或者说一个组件的基础功能是提供”可变数据源“，具体展示UI可以从外部注入，那么就可以用这个技术了。

看完这三句话并没有很清楚这是个啥。。但学过vue的童鞋肯定已经猜到了这描述很像vue的slot功能。slot就是在写一个组件的时候把不确定渲染的内容用一个slot代替，然后再需要的地方替换这个slot为真正需要渲染的内容，我觉得render props应该也是做这个工作得。带着这个疑问我们写一个官网得例子来验证一下。

二：怎么用？

案例：

实现这样一个功能，实时显示鼠标的滚动位置

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        <p>实时监听鼠标滚动位置</p>
        <p>当前鼠标的位置是x = {this.state.x}, y={this.state.y}</p>
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck></MouseTruck>, document.getElementById("root"));

在这里组件MouseTruck提供了可变数据源state，然后再下面render得时候进行渲染。但是我们不想将render的内容写死，那就可以借助react的render props属性来改写了。有两种方法：

第一种是直接将需要渲染的内容作为组件的children传入。

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        {this.props.children(this.state)}
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck>
  {
    props =>(
      <>
          <h1>实时监听鼠标滚动位置</h1>
          <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
      </>
    )
  }
  
</MouseTruck>, document.getElementById("root"));

把需要灵活渲染的内容改写成一个函数，

{
    props =>(
      <>
          <h1>实时监听鼠标滚动位置</h1>
          <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
      </>
    )
  }

然后在组件里面通过this.props.children去调用这个函数，并且传入相关参数

      <div onMouseMove={this.onMouseMove}>
        {this.props.children(this.state)}
      </div>

第二种是将一个值为函数的render作为属性传给组件：

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck render={props =>(
    <>
        <h1>实时监听鼠标滚动位置</h1>
        <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
    </>
  )}
>  
</MouseTruck>, document.getElementById("root"));

给父组件一个render属性，这个属性的值是一个函数，然后在父组件里面通过this.props.render去调用，并且把需要的“可变数据源”作为参数传给render函数，至于具体的渲染内容父组件不需要关心，由render自己决定。

虽然语法和vue不一样，但是思想就是vue的slot思想。