react中的高阶组件

最新推荐文章于 2024-04-01 15:39:54 发布
最新推荐文章于 2024-04-01 15:39:54 发布
阅读量456 收藏 1
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangdong9395/article/details/109117245
版权

1.高阶组件的作用：实现组件的状态逻辑复用
2.高阶组件的使用步骤：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    // 高阶组件的基本使用
    // 1. 创建一个函数，以with开头
    // 2. 指定函数的参数，以大写字母开头
    // 3. 在函数内部创建一个类组件，同时将状态通过props传递给参数组件
    function withMouse(WrappedComponent) {
      class Mouse extends React.Component {
        state = {
          x: '',
          y: ''
        }
        handleMove = (e) => {
          this.setState({
            x: e.pageX,
            y: e.pageY
          })
        }
        componentDidMount() {
          window.addEventListener('mousemove', this.handleMove)
        }
        componentWillUnmount() {
          window.removeEventListener('mousemove', this.handleMove)
        }
        render() {
          return <WrappedComponent {...this.state} />
        }
      }
      return Mouse
    }

    // 创建一个包含渲染ui的组件
    function Position(props) {
      return (
        <div>
          <p>x: {props.x}</p>
          <p>y: {props.y}</p>
        </div>
      )
    }

    // 调用封装状态和逻辑的方法包装Position
    const MousePosition = withMouse(Position)

    class App extends React.Component {
      constructor(props) {
        super(props)
      }
      render() {
        return (
          <div>
            <h3>高阶组件</h3>
            <MousePosition></MousePosition>
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
  </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    // 高阶组件，实现组件的复用
    // 创建高阶组件的步骤
    // 1. 创建一个以with开头的函数, 参数值必须以大写字母开头
    function withMouse(WrapedComponent) {
      // 2. 封装一个带有状态和操作方法的组件
      class Mouse extends React.Component {
        state = {
          x: 0,
          y: 0
        }
        handleMove = (e) => {
          this.setState({
            x: e.pageX,
            y: e.pageY
          })
        }
        componentDidMount() {
          window.addEventListener('mousemove', this.handleMove)
        }

        render() {
          return <WrapedComponent {...this.state} />
        }
      }
      // 如果组件被复用多次 ，会存在一个问题， 多个组件名称一致，不方便进行调试，因此需要设置displayName,以区分组件的不同
      Mouse.displayName = `withMouse${getDisplayName(WrapedComponent)}`
      function getDisplayName(WrappedComponent) {
        return WrapedComponent.displayName || WrappedComponent.name || 'Component'
      }
      return Mouse
    }

    // 定义一个ui组件
    function Position(props) {
      return (
        <div>x: {props.x}, y: {props.y}</div>
      )
    }

    function Kill(props) {
      return (
        <div>
          <h2>x: {props.x}, y: {props.y}</h2>
        </div>
      )
    }
    const MousePosition = withMouse(Position)
    const TwoPosition = withMouse(Kill)

    class App extends React.Component {
      render() {
        return (
          <div>
            <MousePosition />
            <TwoPosition />
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果需要传值，需要在封装的高阶组件返回值中添加{…this.props},否则，在是接收不到传递过来的值的，可以在ui组件中打印查看结果
在这里插入图片描述
完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    // 高阶组件，实现组件的复用
    // 创建高阶组件的步骤
    // 1. 创建一个以with开头的函数, 参数值必须以大写字母开头
    function withMouse(WrapedComponent) {
      // 2. 封装一个带有状态和操作方法的组件
      class Mouse extends React.Component {
        state = {
          x: 0,
          y: 0
        }
        handleMove = (e) => {
          this.setState({
            x: e.pageX,
            y: e.pageY
          })
        }
        componentDidMount() {
          window.addEventListener('mousemove', this.handleMove)
        }

        render() {
          return <WrapedComponent {...this.state} {...this.props}/>
        }
      }
      // 如果组件被复用多次 ，会存在一个问题， 多个组件名称一致，不方便进行调试，因此需要设置displayName,以区分组件的不同
      Mouse.displayName = `withMouse${getDisplayName(WrapedComponent)}`
      function getDisplayName(WrappedComponent) {
        return WrapedComponent.displayName || WrappedComponent.name || 'Component'
      }
      return Mouse
    }

    // 定义一个ui组件
    function Position(props) {
      console.log(props)
      return (
        <div>x: {props.x}, y: {props.y}</div>
      )
    }

    function Kill(props) {
      return (
        <div>
          <h2>x: {props.x}, y: {props.y}</h2>
        </div>
      )
    }
    const MousePosition = withMouse(Position)
    const TwoPosition = withMouse(Kill)

    class App extends React.Component {
      render() {
        return (
          <div>
            <MousePosition  value={19}/>
            <TwoPosition />
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
  </script>
</body>

</html>
dong.wang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解React高阶组件
08-29
本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈React高阶组件
08-27
主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React的高阶组件详解
热门推荐
m0_71485750的博客
10-05 1万+
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;
精读 React 高阶组件
frontend_frank的博客
08-07 585
1 引言高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种...
React+Typescript高阶函数及自定义Hook
最新发布
qq_43644292的博客
04-01 565
自定义hook及使用高阶组件
React高阶组件
月光晒了很凉快的博客
09-24 1263
高阶组件 (Higher-Order Components) 就是一个函数，传给它一个组件，它返回一个新的组件。高阶组件：就相当于手机壳，通过包装组件，增强组件功能。创建一个函数指定函数参数，参数应该以大写字母开头在此函数内部创建一个类组件或函数组件进行权限控制路由限制访问统计统一布局缺点：增加了组件层级，影响性能。
React之高阶组件
astonishqft的博客
09-29 2666
React之高阶组件React之高阶组件前言基本用法属性代理模式`(Props Proxy)`通过ref访问组件实例反向继承`(Inheritance Inversion)`总结 React之高阶组件 前言 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 从高阶组件的定义来看，高阶组件并不是一个组件，它就是一个函数，接受一个组件并且返回一个被包装过的新组件。 const...
React之HOC(高阶组件)
qq_45799465的博客
04-14 4068
React之HOC(高阶组件) 组件装饰器 memoization(计算属性-记忆组件) 渲染属性(Render Props)
React 高阶组件（HOC）
01-20
高阶组件（HighOrderComponent）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体来说，高阶组件是一个函数，能够接受一个组件...
React 中的 HOOKS 和 一些高阶组件概念
weixin_72099243的博客
02-09 419
React 中 高阶组件和Hooks的一些概念摘要
React中的高阶组件
WindrunnerMax
01-15 1918
React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。 描述 高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于JavaScript的高阶函数，高阶函数就是接受函数作为输入或者输出的函数，可以想到柯里化就是一种高阶函数，同样在React文档上也给出了高阶组件的定义，高阶组件是接收组件并返回新组件的函数。 A higher-orde
React高阶组件了解及使用
DOM曼珠沙华的博客
03-14 690
组件的定义： 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件：一个界面的功能更复杂 作用：复用编码, 简化项目编码, 提高运行效率 React内的组件分为容器组件和展示组件。 这里呢，需要你优先有一个React的项目，在项目内操作，创建项目可查看React框架入门-创建项目、JSX了解 创建组件 简单例子 在 项目src下新建 App.js文件（index.js与App.js同级），作为组件，进入组件后直接输入 rcc 会出现组件的简..
React中的高阶组件（Higher-Order Components）是什么？其作用是什么，使用场景？
usernameID007的博客
07-24 326
react高阶组件的概念、作用和使用场景
React 中的高阶组件及其应用场景
Buzz Lightyear带你拯救代码世界
08-12 1479
本文目录 什么是高阶组件 React 中的高阶组件 属性代理（Props Proxy） 反向继承（Inheritance Inversion） 高阶组件存在的问题 高阶组件的约定 高阶组件的应用场景 装饰者模式？高阶组件？AOP？ 总结 什么是高阶组件 在解释什么是高阶组件之前，可以先了解一下什么是 高阶函数，因为它们的概念非常相似，下面是 高阶函数 的定义： 如果一个函数 接受一个或多...
React的高阶组件怎么用？
Learn-anything.cn
11-19 1145
一、高阶组件是什么？ 高阶组件（HOC）是一个接收组件作为参数并返回新组件的函数。将多个组件的相同逻辑代码，抽象到HOC中，让组件更有结构化，更易于复用。HOC不破坏传入组件的特性，只通过组合形成新组件。HOC是纯函数，没有副作用。 二、高阶组件实例 接受了组件WrappedComponent，增加了订阅和数据刷新的操作。 // 此函数接收一个组件... function withSubscription(WrappedComponent, selectData) { // ...并返回另一个组件
react 高阶组件的几种应用
fengzijinliang的专栏
06-12 3503
属性代理：    1.操作props:        高阶组件：import React , {Component } from 'react'; const wrapComponent = (TempComponent) =&gt; class extends Component{ handleClick(){ console.log('click') } render(){ ...
react高阶组件的使用
霜叶的博客
02-22 609
高阶组件 高阶组件：高阶组件是参数为组件，返回值为新组件的函数。 作用：像我们之前用到的react的Form组件和redux的connect函数都是高阶组件，使用高阶组件能够提高代码复用能力 实现一个高阶组件 实现一个高阶组件很容易，只需要简单的几步就好了 import React, { useEffect, useState } from "react"; interface Props{ } function WithComponent(WrappedComponent: React.FC&l
React-高阶组件的使用说明
吃瓜群众的博客
04-06 193
概念 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体而言，高阶组件是参数为组件，返回值为新组件的函数。 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。 HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。 举例说明 常用userInfo的数据全局共享 i
react高阶组件的用法
qq_41831345的博客
09-05 729
具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 我们需要一个抽象，允许我们在一个地方定义逻辑，并在许多组件之间共享它。这正是高阶组件擅长的地方。 优点：HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。 属性代理：高阶组件通过被包裹的React组件来操作props 开...
react中高阶组件和高阶函数有什么区别
04-23
在 React 中，高阶函数通常用于将共同的功能封装在一个函数中，并返回一个新的函数，以便在多个组件中使用。高阶组件则是将组件作为参数，并返回一个新的组件。高阶组件可以用来实现一些横切关注点（cross cutting ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值