• react 高价组件HOC实现组件复用

    目录

    一 使用步骤

    二 显示鼠标坐标

     三 鼠标随图片移动

    四 设置displayName

    五 传递props

    高阶组件HOC: Higher-Order Component,是一个函数,接收要包装的组件,返回增强后的组件
    目的:实现状态逻辑复用
    高阶组件就相当于手机壳, 采用包装(装饰)模式

    一 使用步骤


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

    二 显示鼠标坐标

    1. import React from "react";
    2. import ReactDOM from "react-dom";
    3.  
    4. // 1 创建一个函数,名称约定以with开头
    5. // 2 指定函数的参数,参数以大写字母开头(作为要渲染的组件)
    6. function withMouse(WrappedComponent) {
    7.  
    8.     // 3 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
    9.     class Mouse extends React.Component {
    10.  
    11.         //鼠标状态
    12.         state = {
    13.             x: 0,
    14.             y: 0
    15.         }
    16.  
    17.         //处理状态的逻辑代码
    18.         handleMouseMove = e => {
    19.             this.setState({
    20.                 x: e.clientX,
    21.                 y: e.clientY
    22.             })
    23.         }
    24.  
    25.         //监听鼠标移动事件
    26.         componentDidMount() {
    27.             window.addEventListener("mousemove", this.handleMouseMove)
    28.         }
    29.  
    30.         //解绑事件
    31.         componentWillUnmount() {
    32.             window.removeEventListener('mousemove', this.handleMouseMove)
    33.         }
    34.  
    35.         render() {
    36.             //4 渲染参数组件,同时将状态通过props传递给参数组件
    37.             return <WrappedComponent {...this.state}/>
    38.  
    39.         }
    40.  
    41.     }
    42.     return Mouse;
    43. }
    44.  
    45. const Position = props => (
    46.     <p>
    47.         鼠标当前位置:(x:{props.x},y:{props.y})
    48.     p>
    49. )
    50.  
    51. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    52. const MousePosition = withMouse(Position)
    53.  
    54. class App extends React.Component {
    55.  
    56.     render() {
    57.         return (
    58.             <div>
    59.                 {/*渲染增强后的组件*/}
    60.                 <MousePosition/>
    61.             div>)
    62.     }
    63. }
    64.  
    65. ReactDOM.render(<App/>, document.getElementById("root"));

    效果

     三 鼠标随图片移动

    加入鼠标随图片移动的功能

    1. import imgage from "./images/cat.jpg"
    2.  
    3. const Cat = props => (
    4.     <img src={imgage} alt='猫' style={{
    5.         position: 'absolute',
    6.         // 为了让鼠标在图片的中间,top减掉了图片的一半高度,left减掉了图片一半的宽度
    7.         top: props.y - 180,
    8.         left: props.x - 180
    9.     }}/>
    10. )
    11.  
    12.  
    13. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    14. const MousePosition1 = withMouse(Cat)

    效果

    完整代码

    1. import React from "react";
    2. import ReactDOM from "react-dom";
    3. import imgage from "./images/cat.jpg"
    4.  
    5. // 1 创建一个函数,名称约定以with开头
    6. // 2 指定函数的参数,参数以大写字母开头(作为要渲染的组件)
    7. function withMouse(WrappedComponent) {
    8.  
    9.     // 3 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
    10.     class Mouse extends React.Component {
    11.  
    12.         //鼠标状态
    13.         state = {
    14.             x: 0,
    15.             y: 0
    16.         }
    17.  
    18.         //处理状态的逻辑代码
    19.         handleMouseMove = e => {
    20.             this.setState({
    21.                 x: e.clientX,
    22.                 y: e.clientY
    23.             })
    24.         }
    25.  
    26.         //监听鼠标移动事件
    27.         componentDidMount() {
    28.             window.addEventListener("mousemove", this.handleMouseMove)
    29.         }
    30.  
    31.         //解绑事件
    32.         componentWillUnmount() {
    33.             window.removeEventListener('mousemove', this.handleMouseMove)
    34.         }
    35.  
    36.         render() {
    37.             //4 渲染参数组件,同时将状态通过props传递给参数组件
    38.             return <WrappedComponent {...this.state}/>
    39.  
    40.         }
    41.  
    42.     }
    43.     return Mouse;
    44. }
    45.  
    46.  
    47. const Cat = props => (
    48.     <img src={imgage} alt='猫' style={{
    49.         position: 'absolute',
    50.         // 为了让鼠标在图片的中间,top减掉了图片的一半高度,left减掉了图片一半的宽度
    51.         top: props.y - 125,
    52.         left: props.x - 100
    53.     }}/>
    54. )
    55.  
    56.  
    57. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    58. const MousePosition1 = withMouse(Cat)
    59.  
    60. const Position = props => (
    61.     <p>
    62.         鼠标当前位置:(x:{props.x},y:{props.y})
    63.     p>
    64. )
    65.  
    66. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    67. const MousePosition2 = withMouse(Position)
    68.  
    69. class App extends React.Component {
    70.  
    71.     render() {
    72.         return (
    73.             <div>
    74.                 {/*渲染增强后的组件*/}
    75.                 <MousePosition1/>
    76.                 <MousePosition2/>
    77.             div>)
    78.     }
    79. }
    80.  
    81. ReactDOM.render(<App/>, document.getElementById("root"));

    四 设置displayName

    默认情况下,react使用组件名称作为displayName
    使用高阶组件存在的问题: 得到的两个组件名称相同


    解决办法: 设置displayName → 用于调试时区分不同的组件

     效果

    完整代码

    1. import React from "react";
    2. import ReactDOM from "react-dom";
    3. import imgage from "./images/cat.jpg"
    4.  
    5. // 1 创建一个函数,名称约定以with开头
    6. // 2 指定函数的参数,参数以大写字母开头(作为要渲染的组件)
    7. function withMouse(WrappedComponent) {
    8.  
    9.     // 3 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
    10.     class Mouse extends React.Component {
    11.  
    12.         //鼠标状态
    13.         state = {
    14.             x: 0,
    15.             y: 0
    16.         }
    17.  
    18.         //处理状态的逻辑代码
    19.         handleMouseMove = e => {
    20.             this.setState({
    21.                 x: e.clientX,
    22.                 y: e.clientY
    23.             })
    24.         }
    25.  
    26.         //监听鼠标移动事件
    27.         componentDidMount() {
    28.             window.addEventListener("mousemove", this.handleMouseMove)
    29.         }
    30.  
    31.         //解绑事件
    32.         componentWillUnmount() {
    33.             window.removeEventListener('mousemove', this.handleMouseMove)
    34.         }
    35.  
    36.         render() {
    37.             //4 渲染参数组件,同时将状态通过props传递给参数组件
    38.             return <WrappedComponent {...this.state}/>
    39.  
    40.         }
    41.  
    42.     }
    43.  
    44.     //设置displayName
    45.     Mouse.displayName = `withMouse${getDisplayName(WrappedComponent)}`
    46.     return Mouse;
    47. }
    48. //displayName
    49. function getDisplayName(WrappedComponent) {
    50.     return WrappedComponent.displayName || WrappedComponent.name || 'Component'
    51. }
    52.  
    53. const Cat = props => (
    54.     <img src={imgage} alt='猫' style={{
    55.         position: 'absolute',
    56.         // 为了让鼠标在图片的中间,top减掉了图片的一半高度,left减掉了图片一半的宽度
    57.         top: props.y - 125,
    58.         left: props.x - 100
    59.     }}/>
    60. )
    61.  
    62.  
    63. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    64. const MousePosition1 = withMouse(Cat)
    65.  
    66. const Position = props => (
    67.     <p>
    68.         鼠标当前位置:(x:{props.x},y:{props.y})
    69.     p>
    70. )
    71.  
    72. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    73. const MousePosition2 = withMouse(Position)
    74.  
    75. class App extends React.Component {
    76.  
    77.     render() {
    78.         return (
    79.             <div>
    80.                 {/*渲染增强后的组件*/}
    81.                 <MousePosition1/>
    82.                 <MousePosition2/>
    83.             div>)
    84.     }
    85. }
    86.  
    87. ReactDOM.render(<App/>, document.getElementById("root"));

    五 传递props

    问题:

    添加了一个属性, 打印了props

     属性没显示在props里

    原因:props传递丢失

    解决办法:

     效果

     完整代码

    1. import React from "react";
    2. import ReactDOM from "react-dom";
    3.  
    4.  
    5. // 1 创建一个函数,名称约定以with开头
    6. // 2 指定函数的参数,参数以大写字母开头(作为要渲染的组件)
    7. function withMouse(WrappedComponent) {
    8.  
    9.     // 3 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
    10.     class Mouse extends React.Component {
    11.  
    12.         //鼠标状态
    13.         state = {
    14.             x: 0,
    15.             y: 0
    16.         }
    17.  
    18.         //处理状态的逻辑代码
    19.         handleMouseMove = e => {
    20.             this.setState({
    21.                 x: e.clientX,
    22.                 y: e.clientY
    23.             })
    24.         }
    25.  
    26.         //监听鼠标移动事件
    27.         componentDidMount() {
    28.             window.addEventListener("mousemove", this.handleMouseMove)
    29.         }
    30.  
    31.         //解绑事件
    32.         componentWillUnmount() {
    33.             window.removeEventListener('mousemove', this.handleMouseMove)
    34.         }
    35.  
    36.         render() {
    37.             //4 渲染参数组件,同时将状态通过props传递给参数组件
    38.             return <WrappedComponent {...this.state}{...this.props}/>
    39.  
    40.         }
    41.  
    42.     }
    43.  
    44.     return Mouse;
    45. }
    46.  
    47.  
    48. const Position = props => {
    49.     console.log(props)
    50.     return (
    51.         <p>
    52.             鼠标当前位置:(x:{props.x},y:{props.y})
    53.         p>
    54.     )
    55.  
    56. }
    57.  
    58. //调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
    59. const MousePosition = withMouse(Position)
    60.  
    61. class App extends React.Component {
    62.  
    63.     render() {
    64.         return (
    65.             <div>
    66.                 {/*渲染增强后的组件*/}
    67.                 <MousePosition a="1"/>
    68.             div>)
    69.     }
    70. }
    71.  
    72. ReactDOM.render(<App/>, document.getElementById("root"));

  • 相关阅读:
    VMware Workstation Player虚拟机Ubuntu启用Windows共享目录
    nagios
    js第六章
    CEPH-3：cephfs功能详解
    程序编译过程（扫盲贴）
    Java框架 SSM整合
    智能电话机器人，使用Microsoft语音识别技术（Speech sdk）
    CSAPP-Lab05 Cache Lab 深入解析
    App Store审核被拒的原因和解决方案
    Leetcode1608. 特殊数组的特征值
  • 原文地址：https://blog.csdn.net/m0_45877477/article/details/125896275