【React】10.render props 模式实现组件复用

简介：

为了复用组件，形成了一种使用模式，就是render props模式，这个模式中显然要使用render 和 props。

使用步骤

1. 外部调用者向组件传入一个带返回值的函数如render2。
2. 组件的render直接调用这个函数，并用自己的state作为参数，render2的返回值作为render的返回值。
3. 这样，render2就可以自由使用组件的数据并自由渲染内容了。

demo：
一个实时获取鼠标坐标的组件

import React from 'react'
import ReactDOM from 'react-dom/client'

class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0
  }

  mouseMoveHandler = (e) => {
    //2.鼠标移动时，就将坐标写入state
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  componentDidMount() {
    //1. 添加鼠标移动监听器，鼠标移动时会出发handler
    window.addEventListener("mousemove", this.mouseMoveHandler)
  }
  render() {
    //3.state发生改变，就会触发render，render调用外部传入的函数render2，让本类的state作为参数。render2的返回值作为本组件的返回值
    return this.props.render2(this.state);
  }

}

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(
  //外部调用组件传入一个带返回值的方法，使用组件的状态来自由渲染内容
  <Mouse
    render2={(res) => {
      return <p>鼠标位置：x:{res.x},y:{res.y}</p>
    }}
  />)

效果：

这样，Mouse组件就可以复用了，复用了鼠标的坐标位置，根据调用时传入不同的JSX可以渲染出任意内容。

优化

优化1，使用children代替属性传入（推荐）

children可以直接写在组件标签内部，如：
让结构看起来更清晰

root.render(
  <Mouse>
    {
      (res) => {
        return <p>鼠标位置：x:{res.x},y:{res.y}</p>
      }
    }
  </Mouse>)

而组件内部也需要改成获取传入的children

return this.props.children(this.state);

优化2，添加入参验证

//导入校验包,注意，这里是小写字母开头的propTypes
import propTypes from 'prop-types'

//验证入参
Mouse.propTypes = {
  children: propTypes.func.isRequired
}

优化3，组件卸载时解除事件绑定

  //组件卸载时接触鼠标事件绑定
  componentWillUnmount() {
    window.removeEventListener("mousemove", this.mouseMoveHandler)
  }