React11.高阶组件

Posted 2022-12-04 阿拉的梦想

【React】11.高阶组件

• 高阶组件
• 设置displayName

高阶组件

所谓高阶组件，时在原来的基础上进行一些加工，使组件的复用更方便高效；

使用步骡

1. 创建一个函数，名称约定以with开头
2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

完整示例

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

//-------------------------------------
//1.创建高阶组件，2.指定函数参数，大写字母开头作为要渲染的组件
function withMouse(WrappedComponet) 
  //3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
  class Mouse extends React.Component 
    state = 
      x: 0,
      y: 0
    

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

    componentDidMount() 
      //添加鼠标移动监听器，鼠标移动时会出发handler
      window.addEventListener("mousemove", this.mouseMoveHandler)
    

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

    render() 
      //4.渲染参数组件，同时将自己的状态和props给传入的组件使用
      return <WrappedComponet ...this.state ...this.props />;
    

  


  //返回类组件
  return Mouse;

//-------------------------------------
//5.调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
//调用高阶组件方式1
const position = param => 
  console.log(param)
  return <p>鼠标位置：x:param.x,y:param.y</p>

const WithMousePosition = withMouse(position)

//调用高阶组件方式2
//const WithMousePosition = withMouse((props)=>return <p>鼠标位置：x:props.x,y:props.y</p>)
const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(
  //渲染
  <WithMousePosition a="1" b=200 />
)

设置displayName

• 使用高阶组件存在的问题：得到的两个组件名称相同
• 原因：默认情况下，React使用组件名称作为 displayName
• 解决方式：为 高阶组件 设置 displayName 便于调试时区分不同的组件
• displayName的作用：用于设置调试信息（ React Developer Tools信息〕

设置方式：

  //设置displayName
  Mouse.displayName = `WithMouse$getDisplayName(WrappedComponent)`
  //函数放到高阶组件外面也可以
  function getDisplayName(WrappedComponent) 
    return WrappedComponent.displayName || WrappedComponent.name || "Component "
  

完整示例：

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

//-------------------------------------
//1.创建高阶组件，2.指定函数参数，大写字母开头作为要渲染的组件
function withMouse(WrappedComponent) 
  //3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
  class Mouse extends React.Component 
    state = 
      x: 0,
      y: 0
    

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

    componentDidMount() 
      //添加鼠标移动监听器，鼠标移动时会出发handler
      window.addEventListener("mousemove", this.mouseMoveHandler)
    

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

    render() 
      //4.渲染参数组件，同时将自己的状态和props给传入的组件使用
      return <WrappedComponent ...this.state ...this.props />;
    




  

  //设置displayName
  Mouse.displayName = `WithMouse$getDisplayName(WrappedComponent)`
  //函数放到高阶组件外面也可以
  function getDisplayName(WrappedComponent) 
    return WrappedComponent.displayName || WrappedComponent.name || "Component "
  

  //返回类组件
  return Mouse;




//-------------------------------------
//5.调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
//调用高阶组件方式1
const position = param => 
  console.log(param)
  return <p>鼠标位置：x:param.x,y:param.y</p>

const WithMousePosition = withMouse(position)

//调用高阶组件方式2
//const WithMousePosition = withMouse((props)=>return <p>鼠标位置：x:props.x,y:props.y</p>)
const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(
  //渲染
  <WithMousePosition a="1" b=200 />
)

效果：