您需要知道作為WordPress開發人員的反應嗎？

核心要點

• WordPress 新的編輯器 Gutenberg 基於 Facebook 開源的 UI 庫 React 構建。但除非您打算創建自定義區塊，否則無需學習 React 即可使用 Gutenberg。
• React 是一個強大的、可複用的庫，允許開發者構建高交互性的用戶界面。其虛擬 DOM 優化了渲染並提升了應用性能，通過使網站更具動態性和響應性來增強用戶體驗。
• 雖然學習 React 對於 WordPress 開發人員不是必需的，但它可能是一項寶貴的技能。精通 React 可以幫助更好地理解高級 Gutenberg 概念，並提高您的市場競爭力。

本文最初由 Torque Magazine 發表，經許可在此轉載。

WordPress 5.0 版本將使用新的內容編輯系統 Gutenberg 來驅動 WordPress 文章編輯器。 Gutenberg 是一個“基於區塊”的編輯器。創建內容時，所有內容都是一個區塊。如果您有一篇文章包含一個段落、一個標題和兩個段落，那就是四個區塊。

Gutenberg 帶有一組默認的“核心”區塊——段落、標題、最新文章、圖片、引用等等。如果您使用 Gutenberg 創建內容，您可以使用這些區塊或由您在站點上安裝的 WordPress 插件提供的自定義區塊。

Gutenberg 是一個 JavaScript 驅動的界面。具體來說，它是使用 Facebook 的開源用戶界面庫“React”構建的。這篇文章解釋了使用 JavaScript 創建可在 Gutenberg 編輯器中使用的自定義區塊的一些內容。您不必使用 JavaScript 來創建區塊。高級自定義字段 (ACF) 最近宣布了一個看起來很不錯的使用 PHP 創建自定義區塊的系統。

什麼是 React？

在前端開發中，性能最低下的操作是讀取和寫入 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 如何在 Gutenberg 中使用？

React 是一個用於創建可重用組件的庫。由於它們是可重用的，我們可以用組件組合界面。它是由 Facebook 創建的開源項目。

一切都是一個區塊。文本、圖像、圖庫、小部件、短代碼，甚至是自定義 HTML 片段，無論它是通過插件添加的還是其他方式添加的。您只需要掌握一個界面：區塊界面，然後您就知道如何做所有事情了。 ——Gutenberg 手冊

區塊是 Gutenberg 的基本單元。我們用一個或多個區塊組合內容。

組件是 React 的原子單元，我們用組件組合 React 應用。 Gutenberg 使用 React 創建，因此每個區塊都由一個或多個組件組成。

需要注意的是，我將在本系列文章中進一步介紹這一點，但 Gutenberg 在 React 之上添加了一個薄的抽象層。在我們的 Gutenberg 代碼中，我們將使用 wp.createElement 而不是 React.createElement。它的工作方式相同，但是當 React 的 API 發生變化時，WordPress 可以決定何時支持這些更改並提供向後兼容的包裝器，或者決定不支持。

這是對未來的良好規劃，但就目前而言，它只是 React。

我是否需要了解 React 才能使用 Gutenberg 進行開發？

因此，這就引出了一個重要的問題，您是否需要學習 React？不需要。除非您想創建自己的區塊，否則這些都不重要。如果您只想使用核心或插件提供的區塊，則永遠不需要創建自己的區塊類型。

不需要。但是……

您可以創建一個基本的區塊，而無需了解太多 JavaScript。查看這個基本的示例區塊，它是從官方 Gutenberg 示例中簡化的：

<code class="language-javascript">( 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
) );</code>

唯一可能比較新的東西是使用 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 概念——狀態管理、單元測試等等。

如何學習用於 WordPress 和 Gutenberg 的 React

這是關於 Gutenberg 的 React 開發系列文章的開始。下次我將介紹 React 基礎知識，然後介紹如何在 Gutenberg 區塊中應用它們。從那裡，我們將製作動態區塊，然後查看狀態管理和測試。

在我的網站上，我列出了您可能會發現有用的 Gutenberg 開發者演講。在本系列文章中，我將解釋 React 概念，但如果您想深入學習 JavaScript 和 React，Wes Bos 和 Zac Gordon 提供了關於 React 和 JavaScript 的優秀課程，可以幫助您入門。

關於 React 和 WordPress 開發的常見問題 (FAQ)

使用 React 進行 WordPress 開發的好處是什麼？

React 是一個強大的 JavaScript 庫，允許開發人員構建高度交互性的用戶界面。它的基於組件的架構允許代碼重用，使開發更快更高效。此外，React 的虛擬 DOM 優化了渲染並提高了應用程序性能。當用於 WordPress 開發時，它可以通過使網站更具動態性和響應性來增強用戶體驗。

如何將 React 與 WordPress 集成？

可以通過 WordPress REST API 將 React 與 WordPress 集成。這允許您從 WordPress 站點獲取數據並在 React 應用程序中使用它。您可以在 WordPress 主題或插件中創建自定義端點，然後使用 HTTP 請求從 React 應用程序檢索或發送數據到這些端點。

什麼是無頭 WordPress CMS，它與 React 如何相關？

無頭 WordPress CMS 是一種 WordPress 設置，其中前端（用戶交互的部分）與後端（管理內容的部分）分離。這允許開發人員使用他們喜歡的任何技術來構建前端，包括 React。這種設置可以提供更大的靈活性和性能改進，因為前端可以單獨託管並獨立於後端進行優化。

我可以將 React 與現有的 WordPress 主題一起使用嗎？

是的，您可以將 React 與現有的 WordPress 主題一起使用。但是，這需要對 WordPress 和 React 都有一定的了解，因為您需要修改主題的代碼以集成 React 組件。或者，您可以使用專門為 React 設計的主題，例如無頭 WordPress 主題。

什麼是 Frontity，它與 WordPress 和 React 如何相關？

Frontity 是一個免費的開源框架，用於使用 React 構建 WordPress 主題。它提供了一種簡化 WordPress 和 React 連接的方式，為您處理許多複雜的配置。 Frontity 還優化了您的 React 主題以進行服務器端渲染，從而提高性能和 SEO。

將 React 與 WordPress 一起使用有什麼缺點？

雖然 React 可以極大地增強 WordPress 網站的交互性和用戶體驗，但與傳統的 WordPress 開發相比，它的學習曲線更陡峭。它還需要不同的託管設置，特別是對於無頭 WordPress 網站，這可能會增加複雜性。

我是否需要了解 React 才能成為 WordPress 開發人員？

雖然了解 React 並不是成為 WordPress 開發人員的必要條件，但它可能是一項寶貴的技能。隨著 WordPress 的不斷發展，越來越多的部分都是使用 React 構建的。了解 React 可以為作為 WordPress 開發人員的您打開更多機會。

如何學習用於 WordPress 開發的 React？

有很多資源可以學習 React，包括在線教程、課程和文檔。為了將 React 特別應用於 WordPress 開發，您可以探索官方 WordPress REST API 文檔或關於將 React 與 WordPress 集成的教程。

我可以將其他 JavaScript 庫或框架與 WordPress 一起使用嗎？

是的，雖然 React 通常與 WordPress 一起使用，尤其是在引入 Gutenberg 編輯器之後，但您可以使用您喜歡的任何 JavaScript 庫或框架。這包括 Vue.js、Angular 和許多其他框架。

React 和 WordPress 的未來是什麼？

React 和 WordPress 的未來看起來很有希望。隨著使用 React 構建的 Gutenberg 編輯器的引入以及無頭 WordPress 設置的日益普及，React 在 WordPress 開發中的使用很可能會繼續增加。

以上是您需要知道作為WordPress開發人員的反應嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！