React10.render props 模式实现组件复用

Posted 2022-05-23 阿拉的梦想

【React】10.render props 模式

• 简介：
• 使用步骤
• 优化
• • 优化1，使用children代替属性传入（推荐）
  • 优化2，添加入参验证
  • 优化3，组件卸载时解除事件绑定

简介：

为了复用组件，形成了一种使用模式，就是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)