react的装饰器和HOC怎么应用

本篇内容主要讲解“react的装饰器和HOC怎么应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react的装饰器和HOC怎么应用”吧!

创新互联建站从2013年开始，是专业互联网技术服务公司，拥有项目网站制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元桑珠孜做网站,已为上家服务,为桑珠孜各地企业和个人服务,联系电话:18982081108

 高阶组件

          简单来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。
          组件是将 props 转化成 UI ，然而 高阶组件将一个组价转化成另外一个组件。

装饰器

        ES7中的一种语法糖，与Python中的装饰器使用及作用类似，其实就是以一种更为简洁的方式来来包装修改类的行为。装饰对象包括：类、类的属性、类的方法。

项目中使用

由于属于新特性，如果在项目中使用需要使用babel来进行转码。

• 安装babel插件:
  Babel >= 7.x

• Babel >= 7.x

    npm install --save-dev @babel/plugin-proposal-decorators

    Babel@6.x

    npm install --save-dev babel-plugin-transform-decorators-legacy

.babelrc 配置：

Babel >= 7.x
{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ] }
Babel@6.x
{ "plugins": [ "transform-decorators-legacy" ] }
import React, {Component} from 'react';
const addDiv = (title) => (WrappedComponent) => class extends Component {
    render() {
        return (
            

                
{title}
                

                >
            
        )
    }
};export default addDiv
 
 
//demo.js
import React, {Component} from 'react';
import addDiv from './addDiv.js';@addDiv('标题')
export default class Demo extends Component {
    ...
    render() {
        return(
            demo
        )
    }
}

到此，相信大家对“react的装饰器和HOC怎么应用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！