核心要点
本文最初由 Torque Magazine 发表，经许可在此转载。
WordPress 5.0 版本将使用新的内容编辑系统 Gutenberg 来驱动 WordPress 文章编辑器。Gutenberg 是一个“基于区块”的编辑器。创建内容时，所有内容都是一个区块。如果您有一篇文章包含一个段落、一个标题和两个段落，那就是四个区块。
Gutenberg 带有一组默认的“核心”区块——段落、标题、最新文章、图片、引用等等。如果您使用 Gutenberg 创建内容，您可以使用这些区块或由您在站点上安装的 WordPress 插件提供的自定义区块。
Gutenberg 是一个 JavaScript 驱动的界面。具体来说，它是使用 Facebook 的开源用户界面库“React”构建的。这篇文章解释了使用 JavaScript 创建可在 Gutenberg 编辑器中使用的自定义区块的一些内容。您不必使用 JavaScript 来创建区块。高级自定义字段 (ACF) 最近宣布了一个看起来很不错的使用 PHP 创建自定义区块的系统。
在前端开发中，性能最低下的操作是读取和写入 DOM。跨浏览器一致地引用和更新 DOM 是一件非常困难的事情。React 通过实现反应式编程模型和虚拟 DOM 抽象来提供更好的系统。
例如，不用直接与 DOM 交互（例如使用 jQuery.html() 或 jQuery.val()），React 会创建 DOM 的虚拟表示。我们称之为虚拟 DOM 或 VDOM。VDOM 是一个表示 DOM 结构的 JavaScript 对象。每当您的 React 代码向 React 传达任何数据的更改时，VDOM 都会重新计算。之后，React 会计算 DOM 在更改之前和更改之后存在的差异。然后，React（实际上是 ReactDOM 或 React Native）只更新需要更改的 DOM 部分。它如何做到这一点并不重要。
React 是一个用于创建可重用组件的库。由于它们是可重用的，我们可以用组件组合界面。它是由 Facebook 创建的开源项目。
一切都是一个区块。文本、图像、图库、小部件、短代码，甚至是自定义 HTML 片段，无论它是通过插件添加的还是其他方式添加的。您只需要掌握一个界面：区块界面，然后您就知道如何做所有事情了。——Gutenberg 手册
区块是 Gutenberg 的基本单元。我们用一个或多个区块组合内容。
组件是 React 的原子单元，我们用组件组合 React 应用。Gutenberg 使用 React 创建，因此每个区块都由一个或多个组件组成。
需要注意的是，我将在本系列文章中进一步介绍这一点，但 Gutenberg 在 React 之上添加了一个薄的抽象层。在我们的 Gutenberg 代码中，我们将使用 wp.createElement 而不是 React.createElement。它的工作方式相同，但是当 React 的 API 发生变化时，WordPress 可以决定何时支持这些更改并提供向后兼容的包装器，或者决定不支持。
这是对未来的良好规划，但就目前而言，它只是 React。
因此，这就引出了一个重要的问题，您是否需要学习 React？不需要。除非您想创建自己的区块，否则这些都不重要。如果您只想使用核心或插件提供的区块，则永远不需要创建自己的区块类型。
您可以创建一个基本的区块，而无需了解太多 JavaScript。查看这个基本的示例区块，它是从官方 Gutenberg 示例中简化的：
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'p',
{},
'Hello World, step 1 (from the editor).'
);
},
save: function() {
return el(
'p',
{},
'Hello World, step 1 (from the frontend).'
);
},
} );
}(
window.wp.blocks,
window.wp.element
) );唯一可能比较新的东西是使用 wp.createElement（在此示例中，它在变量“el”中）来创建 HTML。这是一种创建类型为“p”的 html 元素的奇特方法。我将在本系列的下一篇文章中介绍这一点。
WordPress 在 React 之上有一个抽象层，因此您真正需要知道的只是一些函数：wp.createElement，用于创建 HTML，以及 setAttribute()，用于更新区块属性。
我建议您阅读 Gutenberg 手册的“创建区块”部分，然后查看示例存储库以及 WordCamp Miami 2018 Gutenberg 研讨会的示例代码。所有这些代码您都可以使用，而无需深入研究 React。
如果您只需要制作简单的区块，也许只有一个或两个控件，那么您不需要了解 React 的内容超过我之前提到的那两个概念。但是，如果您想创建一个更复杂的区块，在 Gutenberg 和其他 React 应用之间共享组件，例如，您的插件的 wp-admin 设置屏幕或移动应用。
React 是一个非常有趣的库，可以用来玩，并且精通 React 是一项非常有市场价值的技能。更重要的是，一旦您学习了 React，您就可以更容易地理解更高级的 Gutenberg 概念——状态管理、单元测试等等。
这是关于 Gutenberg 的 React 开发系列文章的开始。下次我将介绍 React 基础知识，然后介绍如何在 Gutenberg 区块中应用它们。从那里，我们将制作动态区块，然后查看状态管理和测试。
在我的网站上，我列出了您可能会发现有用的 Gutenberg 开发者演讲。在本系列文章中，我将解释 React 概念，但如果您想深入学习 JavaScript 和 React，Wes Bos 和 Zac Gordon 提供了关于 React 和 JavaScript 的优秀课程，可以帮助您入门。
React 是一个强大的 JavaScript 库，允许开发人员构建高度交互性的用户界面。它的基于组件的架构允许代码重用，使开发更快更高效。此外，React 的虚拟 DOM 优化了渲染并提高了应用程序性能。当用于 WordPress 开发时，它可以通过使网站更具动态性和响应性来增强用户体验。
可以通过 WordPress REST API 将 React 与 WordPress 集成。这允许您从 WordPress 站点获取数据并在 React 应用程序中使用它。您可以在 WordPress 主题或插件中创建自定义端点，然后使用 HTTP 请求从 React 应用程序检索或发送数据到这些端点。
无头 WordPress CMS 是一种 WordPress 设置，其中前端（用户交互的部分）与后端（管理内容的部分）分离。这允许开发人员使用他们喜欢的任何技术来构建前端，包括 React。这种设置可以提供更大的灵活性和性能改进，因为前端可以单独托管并独立于后端进行优化。
是的，您可以将 React 与现有的 WordPress 主题一起使用。但是，这需要对 WordPress 和 React 都有一定的了解，因为您需要修改主题的代码以集成 React 组件。或者，您可以使用专门为 React 设计的主题，例如无头 WordPress 主题。
Frontity 是一个免费的开源框架，用于使用 React 构建 WordPress 主题。它提供了一种简化 WordPress 和 React 连接的方式，为您处理许多复杂的配置。Frontity 还优化了您的 React 主题以进行服务器端渲染，从而提高性能和 SEO。
虽然 React 可以极大地增强 WordPress 网站的交互性和用户体验，但与传统的 WordPress 开发相比，它的学习曲线更陡峭。它还需要不同的托管设置，特别是对于无头 WordPress 网站，这可能会增加复杂性。
虽然了解 React 并不是成为 WordPress 开发人员的必要条件，但它可能是一项宝贵的技能。随着 WordPress 的不断发展，越来越多的部分都是使用 React 构建的。了解 React 可以为作为 WordPress 开发人员的您打开更多机会。
有很多资源可以学习 React，包括在线教程、课程和文档。为了将 React 特别应用于 WordPress 开发，您可以探索官方 WordPress REST API 文档或关于将 React 与 WordPress 集成的教程。
是的，虽然 React 通常与 WordPress 一起使用，尤其是在引入 Gutenberg 编辑器之后，但您可以使用您喜欢的任何 JavaScript 库或框架。这包括 Vue.js、Angular 和许多其他框架。
React 和 WordPress 的未来看起来很有希望。随着使用 React 构建的 Gutenberg 编辑器的引入以及无头 WordPress 设置的日益普及，React 在 WordPress 开发中的使用很可能会继续增加。
以上是您需要知道作为WordPress开发人员的反应吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
