脚本宝典收集整理的这篇文章主要介绍了了解React和Gutenberg中的高阶组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前端生态系统发展非常迅速，React，Vue和Angular等框架的兴起导致应用程序体系结构发生了巨大变化，并为JavaScript开发人员学习了一整套新模式。 随着WordPress在新的Gutenberg编辑器中拥抱React，数百万开发人员突然被引入这个世界，并且争先恐后地追赶。 在这篇文章中，我们将分解其中一种在React中非常常见的架构模式 - 高阶组件。 一位朋友最近请求帮助了解添加到Gutenberg的新工具，用于操纵颜色，即wIThColors高阶组件。你可以在这里看到一个例子，转载如下：

edit: withColors( 'backgroundColor', { textColor: 'color' } )(
    function( PRops ) {
        // Props added by withColors HOC.
        VAR backgroundColor = props.backgroundColor;
        var setBackgroundColor = props.setBackgroundColor;
        var textColor = props.textColor;
        var setTextColor = props.setTextColor;

        // Class computation
        var paragraphClasses = (
            ( backgroundColor.class || '' ) + '' + ( textColor.class || '' )
        ).trim();

        return el( Fragment, {},
            el( 'p', {
                classname: paragraphClasses,
                style: {
                    backgroundColor: backgroundColor.value,
                    color: textColor.value,
                }
            },
                'Hello world'
            ),
            el( InsPEctorControls, {},
                el( PanelColor, {
                    colorValue: backgroundColor.value,
                    title: __( 'Background Color' ),
                    onChange: setBackgroundColor,
                } ),
                el( PanelColor, {
                    colorValue: textColor.value,
                    title: __( 'Text Color' ),
                    onChange: setTextColor,
                } )
            )
        );
    }
),

这感觉有点吓人 - 究竟发生了什么？该withColors函数正在实现一种称为高阶组件的模式。让我们分解这意味着什么：

高阶组件

高阶组件（HOC）是一种React概念，它是一种以组合为中心的封装共享逻辑的方式，因此您可以在许多组件上使用它。 如React文档中所定义：

高阶组件是一个获取组件并返回新组件的函数。

这在许多方面类似于装饰器，本质上允许您封装一些可重用的函数（例如获取和设置颜色的逻辑）或“组件包装器”中的数据。 这个包装器是一个函数，它接受一个组件并返回该组件的“包装”版本，该组件将接收那些函数和数据props。 因此，不是需要从“彩色”组件访问颜色信息_inheriting_的每个组件，或者导入他们需要调用的颜色“库”模块，而是导入withColors高阶组件（HOC），“换行”他们的具有该组件的组件，现在他们的组件将接收与颜色一起的道具以及它专门定义的任何其他道具。

裸最小高阶分量

为了使这个尽可能简单，让我们看一下最低限度的HOC。 最低限度的HOC只是包装函数的函数，例如

import secretKeyHOC From 'secret-key';
const Barecomponent = function(props) {
  //do something
}
const myComponent = secretKeyHOC(BareComponent);
export default myComponent;

其中secretKeyHOC定义在其他地方，可能看起来像：

const secretKeyHOC = function(component) {
  return function(props) {
    return component({... props, secretKey: 'mySecretKey'});
  });
}

本质上，HOC只是为你的组件合并一些新的道具 - 在这个简单的例子中，它合并在一个秘密密钥中。

带参数的高阶组件

大多数高阶组件并不像上面的密钥那么简单......它们封装了可重用的逻辑，但通常需要以某种方式进行配置。 例如，我们的secretKey组件可能包含用于查找多个密钥之一的逻辑，但需要配置为知道为哪个组件提供哪个密钥。 为此，高阶组件通常被实现为一系列功能。首先，使用配置参数调用一个函数，然后返回另一个可用于包装组件的函数。 例如，如果我们可以配置我们secretKeyHOC选择github密钥或gitlab密钥，它可能看起来像：

const secretKeyHOC = function(keyType) {
  const keys = {gitlab: 'key1', github: 'key2' }
  const key = keys[keyType];
  return function(component) {
    return function(props) {
      return component({... props, secretKey: key});
    });
  }
}

然后我们将调用这样的组件：

import secretKeyHOC from 'secret-key';
const BareComponent = function(props) {
  //do something
}
const myComponent = secretKeyHOC('gitlab')(BareComponent);
export default myComponent;

首先，我们调用函数传递我们的配置参数，然后使用我们正在包装的组件调用返回的函数。

回到withColors

回顾withColors古腾堡，我们可以在文档中看到HOC接受如下参数：

withColors HOC可以接收多个参数。withColors HOC的每个参数都可以是字符串或对象。 如果参数是一个对象，它应该只包含一个带有值的键。 键应该是设置预定义颜色的属性名称，例如：'textColor'。 该值应该是使用此颜色的上下文，例如：'color'。

回顾一下在示例代码中如何调用它，我们看到：

edit: withColors( 'backgroundColor', { textColor: 'color' } )(
    function( props ) {
        // Props added by withColors HOC.
        var backgroundColor = props.backgroundColor;
        var setBackgroundColor = props.setBackgroundColor;
        var textColor = props.textColor;
        var setTextColor = props.setTextColor;

        // some more stuff we'll ignore
    }
),

通过我们对高阶组件的理解，我们现在可以确切地看到它正在做什么。 首先，我们withColors首先使用几个参数来调用我们想要的backgroundColor和textColor。这将返回一个“包装函数”（HOC），我们称之为传递给我们的底层组件 - 将接收props的函数。 这确保了该组件将永远得到4个道具：backgroundColor，setBackgroundColor，textColor，和setTextColor，除了其母公司传入道具。 这个“包装”组件随后被分配给edit将用作编辑此Gutenberg块的组件。 通过这种方式，Gutenberg创建了一种干净，孤立，基于道具的方法来修改和使用块内的局部颜色变化。 觉得可用，就经常来吧！React教程 脚本宝典 欢迎评论哦！巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的了解React和Gutenberg中的高阶组件全部内容，希望文章能够帮你解决了解React和Gutenberg中的高阶组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。