React高阶组件探究

最新推荐文章于 2024-04-23 10:30:11 发布
最新推荐文章于 2024-04-23 10:30:11 发布
阅读量4.8k 收藏 6
点赞数 2
文章标签： 函数 JavaScript React 高阶组件 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cqm1994617/article/details/54800360
版权

React高阶组件探究

在使用React构建项目的过程中，经常会碰到在不同的组件中需要用到相同功能的情况。不过我们知道，去这些组件中到处编写同样的代码并不优雅。

在以往，为了解决以上的情况，我们会用到Mixin这种方式来解决问题。

以下是一个最为简单的Mixin

var defaultMixin = {
    getDefaultProps: function() {
        return {
            name: "Allen"
        }
    }
}

var Component = React.createClass({
    mixins: [defaultMixin],
    render: function() {
        return <h1>Hello, {this.props.name}</h1>
    }
})

这个例子很好理解，在这里就不详述了。要使用mixin属性，我们只需要简单地在组件中加入mixins属性即可。

不过在React ES6中，因为种种原因，mixin将不再被支持。

详情可以参考以下文章:

  1. Mixin已死,Composition 万岁

  2. React官方在ES6中不建议使用mixin

文章中提到用高阶组件来替代mixin。
所谓高阶组件其实只是一个方法。这个方法中返回一个包裹着原组件的新组件。接下来看看它的基本用法。

高阶组件基本介绍

function hoc(ComponentClass) {
    return class HOC extends React.Component {
        componentDidMount() {
            console.log("hoc");
        }

        render() {
            return <ComponentClass />
        }
    }
}

以上代码可以看作是一个最简的高阶组件

使用起来也很简单，比如有一个React组件。

class ComponentClass extends React.Component {
    render() {
        return <div></div>
    }
}

export default hoc(MyComponent);

只需要将你的组件类作为参数传入高阶组件这个方法中即可。

如果采用ES7的decorator语法。则可以更简洁

@hoc
export default class ComponentClass extends React.Component {
    //...
}

简单来说，高阶组件就是一个函数，它让你传入一个组件类，然后返回给你一个更强大的组件类。

用更生动一点的说法，高阶组件就像是一个buff……

鸡血(大锤)  ===>  打了鸡血的大锤

@超级buff
class 赛亚人 {}   //超级赛亚人get~~~

类似以上这种感觉……


高阶组件中的props、ref、state

操作props

你可以在高阶组件中对ComponentClass中的props进行读取、添加、编辑操作。

例子：

function hoc(ComponentClass) {
    return class HOC extends React.Component {
        render() {
            const newProps = {
                name: "cqm",
                value: "testData",
            }
            return <ComponentClass {...this.props} {...newProps} />
        }
    }
}

高阶组件中能够通过this.props直接获取到ComponentClass中的props，假设this.props中有name，那么newProps中的name会覆盖掉this.props中的name。


通过ref访问组件实例

你可以通过ref访问到组件中的实例。可以看以下例子:

function hoc(ComponentClass) {
    return class HOC extends React.Component {

        componentDidMount() {
            console.log(this.refs.componentClass);
        }

        render() {
            return <ComponentClass ref="componentClass" />
        }
    }
}

提示：React中ref还有这种回调函数的写法: ref={(dom) => this.dom = dom} 依稀记得好像在哪里看到过，说这种写法更新更好

你也可以使用另一种方式:

function hoc(ComponentClass) {
    return class HOC extends React.Component {

        getDom(dom) {
            console.log(dom);
        }

        render() {
            return <ComponentClass ref={(dom) => this.getDom(dom)} />
        }
    }
}

ref回调函数在ComponentClass渲染时执行，从而可以轻松拿到它的引用。


获取state

在高阶组件中获取state有若干种方式，下面将一一阐述。

和React父子组件交互的方式类似，你可以往ComponentClass中传入一个函数，之后ComponentClass中通过props拿到这个函数，往里面传入你想要的state参数。

示例如下：

function hoc(ComponentClass) {
    return class HOC extends React.Component {

        getState(state) {
            console.log(state);
        }

        render() {
            const newProps = {
                getState: (state) => this.getState(state)
            };
            return <ComponentClass {...newProps} />
        }
    }
}

@hoc
export default class ComponentClass extends React.Component {
    state = {
        value = ""
    };

    render() {
        return (
            <div>
                <input onChange={(z) => this.props.getState(z.target.value)} />
            </div>
        );
    }
}

理论上你还可以通过this.refs.componentClass.state这种方式来获取全部的state(不过我一般不这么干)。

接下来用到的获取state的方式应该算是高阶组件的另一种运用方式

我在文章开篇提到过这句话

所谓高阶组件其实只是一个方法。这个方法中返回一个包裹着原组件的新组件。接下来看看它的基本用法。

高阶组件中所谓的包裹方式主要有以下两种：

  1. Props Proxy: 高阶组件通过ComponentClass中的props来进行相关的操作。

  2. Inheritance Inversion: 高阶组件继承自ComponentClass。

之前我们并未用到第二种包裹方式，大部分采用的Props Proxy的方式来进行操作。接下来我们来详细讲讲第二种方式。


Inheritance Inversion

Inheritance Inversion的最简实现大概如下:

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {
        render() {
            return super.render();
        }
    }
}

高阶组件hoc中，返回了一个继承了原先组件类的组件。颇有一种反转的味道。

显而易见，你可以在这个组件类中拿到一切ComponentClass的props、state。

代码如下:

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {

        componentDidMount() {
            console.log(this.state);
        }

        render() {
            return super.render();
        }
    }
}

@hoc
export default class ComponentClass extends React.Component {

    state = {
        id: 0,
        value: "hahaha"
    };

    render() {
        return <div>ComponentClass</div>
    }
}

你也可以通过super.[lifecycle]来调取ComponentClass的声明周期或是render函数

接下来我们可以来实现一个简单的需求。比如说一个组件中存在网络请求，你希望在请求完成之前组件显示loading，完成后再显示具体内容。我们就可以运用高阶组件来实现。

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {
        render() {
            if (this.state.success) {
                return super.render()
            }
            return <div>Loading...</div>
        }
    }
}

@hoc
export default class ComponentClass extends React.Component {
    state = {
        success: false,
        data: null
    };

    async componentDidMount() {
        const result = await fetch(...请求);          this.setState({
            success: true,
            data: result.data
        });
    }

    render() {
        return <div>主要内容</div>
    }
}

这个例子应该很好理解。这边就不再详细解释了。


Inheritance Inversion渲染劫持

渲染劫持这句话的意思很好理解。因为在高阶组件中你可以控制ComponentClass的渲染输出，因此你可以在渲染的时候做出各种各样的事情。比如修改props，修改render的组件树等等。

以下示例用以演示修改render方法输出的组件树

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {
        render() {
            const elementTree = super.render();
            elementTree.props.children = elementTree.props.children.filter((z) => {
                return z.type !== "ul" && z;
            }
            const newTree = React.cloneElement(elementTree);
            return newTree;
        }
    }
}

@hoc
export default class ComponentClass extends React.Component {
    render() {
        const divStyle = {
            width: '100px',
            height: '100px',
            backgroundColor: 'red'
        };

        return (
            <div>
                <p style={{color: 'brown'}}>啦啦啦</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
                <h1>哈哈哈</h1>
            </div>
        )
    }
}

以上就是一个渲染劫持的示例，我将ComponentClass中的ul标签给移除了。你可以使用渲染劫持完成类似的需求。如果你对于React中的组件元素操作不是很了解的话，推荐您去看看官方文档中的这一节：

React官方关于component-elements的文档


实际案例

mobx-react

/**MyStore文件**/
import { observable } from 'mobx';

export class MyStore() {
    @observable value = 1;

    @action add = () => {
        this.value++;
    }
}

/**另一个文件**/
import MyStore from './MyStore';

const store = new MyStore();

@observer
export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <p>这只青蛙的寿命{store.value}</p>
                <button onClick={store.add}>+1s</button>
            </div>
        );
    }
}

可以把observer当成高阶组件。传入MyComponent这个类，之后mobx-react会对其生命周期进行各种处理，并通过调用实例的forceUpdate来进行刷新实现最小粒度渲染。

算是小小安利一下mobx这个框架吧。

顺便一提, mobx中提倡一份数据引用，而在redux中则更提倡immutable思想，返回新对象。


pure-render-decorator

@pureRender
export default class MyComponent extends React.Component {

    static propTypes = {
        name: React.PropTypes.string,
    };

    render() {
        return (
            <div>{this.props.name}</div>
        );
    }
}

pureRender中重新定义了shouldComponentUpdate这一生命周期，当传来的props未发生改变时，不重新render，从而达到性能优化的目的。

以上。。。


References

  1. Mixin的使用
  2. 深入理解React高阶组件
  3. React进阶——使用高阶组件（Higher-order Components）优化你的代码
  4. Mixin 已死,Composition 万岁
绯色流火
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-loading:用于加载动画的React组件
05-28
React加载 易于使用的为React项目加载动画。 使用Brent Jackson的项目中的SVG动画。 安装 npm i react-loading 或者 yarn add react-loading 演示版 检查 加载类型 空白的 球 吧台 气泡 立方体 赛龙 旋转 气泡 辐条 例子 import React from 'react' ; import ReactLoading from 'react-loading' ; const Example = ( { type , color } ) => ( < ReactLoading xss=removed xss=removed xss=removed xss=removed> ) ; export default Example ; import React from '
React进阶——高阶组件基本概念、使用场景、参数传递、继承实现
sxww_zyt的博客
10-27 1215
withPersistentData是一个高阶组件，返回一个新的组件，在新组件的componentWillMount中统一处理data，然后将获取到的数据。前面介绍的高阶组件的实现方式都是由高阶组件处理通用逻辑，然后将相关属性传递给被包装组件，我们称这种实现方式为。HOC(...params)的返回值是一个高阶组件，高阶组件需要的参数是先传递给HOC函数的。继承方式实现的高阶组件对被包装组件具有侵入性，当组合多个高阶组件使用时，很容易因为子类组件忘记通过。实现高阶组件：通过继承被包装组件实现逻辑的复用。
什么是高阶组件
dxn16638400024的博客
02-24 208
高阶组件在 React 社区中非常受欢迎，因为它们提供了一种将组件逻辑与 UI 分离的方式，使得组件更加模块化和可重用。简单来说，高阶组件就是一个函数，该函数接受一个组件作为参数，并返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件。因为高阶组件只是接收一个组件并返回一个新的组件，它们不会修改或复制其输入组件的任何行为，因此被称为“纯”组件。高阶组件的参数为一个组件，返回一个新的组件，这个新的组件可以使用原组件的 props，并添加或修改一些行为。
React、Vue3、Vue2 组件之间传值方式总结！！
weixin_56295520的博客
12-26 870
本文总结了React、Vue3、Vue2组件之间传值的各种方式。非常适合新手上手理解
React_lazy使用-组件加载前loading做优雅降级
我是我
10-27 863
React.lazy懒加载组件
react项目路由组件懒加载和路由传值方式
m0_74331185的博客
03-28 1015
lazy参数为()=>promise———联想es6import()错误提示使用suspended内置组件处理懒加载组件的状态。使用useRoutes配置路由，结合插槽配置用户登录检测。以上的get或者动态传值方案均是函数组件使用hook完成。到对应的路由组件中获取路由get传值进行解析。使用创建的lazy 懒加载组件的方法。使用vite构建工具提供的懒加载方案。如果项目中使用的试class组件。在路由组件中获取动态传值。项目中使用动态匹配传值。class类组件中使用。处理之后的懒加载方法。
React的高阶组件详解
热门推荐
m0_71485750的博客
10-05 1万+
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;
React中的高阶组件（Higher-Order Components）是什么？其作用是什么，使用场景？
usernameID007的博客
07-24 304
react高阶组件的概念、作用和使用场景
React 组件之加载图Loading
忘川
09-26 1918
import React, { PureComponent } from "react"; import { ActivityIndicator } from "antd-mobile"; export default class Loading extends PureComponent { static defaultProps = { show: false }; ...
开发一个 React Loading 组件
weixin_40582035的博客
02-02 910
一直都是用的第三方库的loading组件(ant-design/antd-mobil)，最近一个项目需要用到loading，自己开发了下，总结如下： Loading组件的两种形式：全局loading、局部loading 全局loading：一般覆盖全屏居中显示，这种情况的调用方式一般是编程式调用即 Loading.show() 局部loading：只对某个区块进行loa...
React之高阶组件
astonishqft的博客
09-29 2657
React之高阶组件React之高阶组件前言基本用法属性代理模式`(Props Proxy)`通过ref访问组件实例反向继承`(Inheritance Inversion)`总结 React之高阶组件 前言 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 从高阶组件的定义来看，高阶组件并不是一个组件，它就是一个函数，接受一个组件并且返回一个被包装过的新组件。 const...
深入理解React高阶组件
08-29
本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈React高阶组件
08-27
主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 高阶组件（HOC）
01-20
高阶组件（HighOrderComponent）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体来说，高阶组件是一个函数，能够接受一个组件...
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 402
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 996
​​​​​​​。
C++ WebServer的细节理解
我的博客
04-22 412
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SCADA系统通过巨控GRM模块实现OPC协议远程监控PLC
csjukong的博客
04-17 657
SCADA系统和PLC不在同一个地方，需要远程监控和控制PLC，可以通过巨控GRM模块来实现，通过OPC协议转巨控服务器远程读写PLC寄存器，从而完成远程监控PLC
css flex布局两个元素水平居中垂直居中
最新发布
xiaohua616的博客
04-23 250
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
react 高阶组件
10-10
React 高阶组件(HOC)是一种函数，它接受一个组件并返回一个新组件。高阶组件可以在不修改原始组件代码的情况下添加对其功能的增强。 举个例子，我们可以创建一个名为 withLoading 的高阶组件，该组件可以在数据加载时显示一个加载指示器： ``` function withLoading(Component) { return function WithLoadingComponent({ isLoading, ...props }) { if (!isLoading) return <Component {...props} />; return <p>Loading...</p>; } } ``` 在这个例子中，withLoading 函数接受一个组件作为参数，然后返回一个新的函数，该函数接受一个对象作为参数并根据 isLoading 属性来确定是否显示一个加载指示器或者渲染原始组件。 我们可以使用 withLoading 高阶组件来包装一个原始组件： ``` function MyComponent({ data }) { return ( <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } const MyComponentWithLoading = withLoading(MyComponent); ``` 在这个例子中，我们使用 withLoading 函数包装了 MyComponent 组件并将返回的结果分配给 MyComponentWithLoading 变量。现在，我们可以使用 MyComponentWithLoading 组件并传递 isLoading 属性以控制加载指示器的显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值