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

Posted 阿拉的梦想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React10.render props 模式实现组件复用相关的知识,希望对你有一定的参考价值。

【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)
  

以上是关于React10.render props 模式实现组件复用的主要内容,如果未能解决你的问题,请参考以下文章

React的render-props模式、高阶组件

React 组件通信之发布订阅模式

react 中 render-props 模式

2Reactjs中的属性(this.props)

React Props 原理理解

React Props 原理理解