Coaction - 一個高效、靈活的狀態(tài)管理庫，用於建立高效能、多執(zhí)行緒 Web 應(yīng)用程式。

倉庫：https://github.com/unadlib/coaction

動機(jī)

現(xiàn)代 Web 應(yīng)用程式變得越來越複雜，突破了瀏覽器的可能性界限。單線程 JavaScript 雖然功能強(qiáng)大，但通常難以滿足複雜的 UI、即時互動和資料密集型運(yùn)算的需求。此瓶頸會導(dǎo)致效能問題、介面延遲或無回應(yīng)、請求連線限制，並最終導(dǎo)致使用者體驗受損。

雖然 Web Workers（或 SharedWorker）提供了一條實現(xiàn)並行性和提高效能的途徑，但它們也帶來了一系列新的挑戰(zhàn)?？鐖?zhí)行緒管理狀態(tài)、高效同步資料以及維護(hù)一致的應(yīng)用程式邏輯很快就會成為一項艱鉅的任務(wù)?，F(xiàn)有的狀態(tài)管理解決方案通常無法滿足這些特定需求，要么是與工作執(zhí)行緒耦合過於緊密，要么是引入了阻礙開發(fā)人員生產(chǎn)力的複雜抽象。

Coaction 的創(chuàng)建是出於對狀態(tài)管理解決方案的需求，該解決方案真正擁抱現(xiàn)代 Web 應(yīng)用程式的多執(zhí)行緒本質(zhì)。 它認(rèn)識到效能和開發(fā)人員體驗不應(yīng)相互排斥。透過利用 Web Workers 和 Shared Workers 的強(qiáng)大功能，Coaction 允許開發(fā)人員從工作線程中卸載計算密集型任務(wù)和狀態(tài)管理邏輯，從而獲得響應(yīng)更快、更流暢的使用者介面。

Coaction 不僅僅是效能，它還致力於為複雜的應(yīng)用程式提供更具可擴(kuò)展性和可維護(hù)性的架構(gòu)。 此函式庫的直覺式 API 受 Zustand 啟發(fā)，可確保平滑的學(xué)習(xí)曲線和高效的開發(fā)工作流程。它對切片、命名空間和計算屬性的支援促進(jìn)了模組化和程式碼組織，使管理大型和不斷發(fā)展的程式碼庫變得更加容易。

Coaction 與資料傳輸?shù)恼蠈顟B(tài)同步的靈活性提升到了一個新的水平。 透過支援通用傳輸協(xié)議，它為各種通訊模式和架構(gòu)開闢了可能性，滿足不同應(yīng)用程式的獨(dú)特需求.

本質(zhì)上，Coaction 使開發(fā)人員能夠在不犧牲效能、開發(fā)人員體驗或架構(gòu)完整性的情況下建立下一代 Web 應(yīng)用程式。 它彌合了 Web 應(yīng)用程式日益複雜的情況與高效的需求之間的差距。跨執(zhí)行緒的、可維護(hù)的、高效能的狀態(tài)管理。它是專為那些致力於在並行性和響應(yīng)能力不再是可選而是必不可少的世界中創(chuàng)造卓越用戶體驗的開發(fā)人員而設(shè)計的工具。它還支援遠(yuǎn)端同步，使其適合建立任何 CRDT 應(yīng)用程式。

概念和特點(diǎn)

Coaction 旨在為 Web 應(yīng)用程式中的多執(zhí)行緒環(huán)境（例如 Web Workers、Shared Workers，甚至跨進(jìn)程和裝置）共用和同步狀態(tài)提供安全且高效的解決方案。

主要功能包括：

• 多執(zhí)行緒同步：支援網(wǎng)頁執(zhí)行緒與工作執(zhí)行緒之間共用狀態(tài)。透過通用通訊的資料傳輸，開發(fā)人員可以避免訊息傳遞和序列化邏輯的複雜性。
• 具有可選可變性的不可變狀態(tài)：由 Mutative 庫提供支持，核心提供了不可變的狀態(tài)轉(zhuǎn)換過程，同時允許在需要時使用可變實例進(jìn)行性能優(yōu)化。
• 基於補(bǔ)丁的更新：透過基於補(bǔ)丁的同步實現(xiàn)高效的增量狀態(tài)更改，簡化其在 CRDT 應(yīng)用程式中的使用。
• 內(nèi)建計算：支援基於狀態(tài)依賴關(guān)係的衍生屬性，使管理和檢索核心狀態(tài)的計算資料變得更加容易。
• 切片模式：輕鬆地將多個切片組合到具有命名空間的儲存中。
• 可擴(kuò)充中間件：允許中間件增強(qiáng)儲存的行為，例如日誌記錄、時間旅行偵錯或與第三方工具整合。
• 與第三方函式庫整合：支援 React、Angular、Vue、Svelte 和 Solid 等流行框架，以及 Redux、Zustand 和 MobX 等狀態(tài)管理函式庫。

操作模式和基本原理

本函式庫以兩種主要模式運(yùn)作：

• 標(biāo)準(zhǔn)模式
  • 在標(biāo)準(zhǔn)網(wǎng)頁環(huán)境中，商店完全在網(wǎng)頁執(zhí)行緒內(nèi)進(jìn)行管理。預(yù)設(shè)情況下會停用補(bǔ)丁更新，以確保標(biāo)準(zhǔn)模式下的最佳效能。
• 共享模式
  • 工作執(zhí)行緒作為共享狀態(tài)的主要來源，利用傳輸進(jìn)行同步。
  • 網(wǎng)頁執(zhí)行緒充當(dāng)客戶端，透過儲存非同步存取和操作狀態(tài)。

在共享模式下，函式庫根據(jù)傳輸參數(shù)自動決定執(zhí)行上下文，無縫處理同步執(zhí)行緒。

您可以在應(yīng)用程式中輕鬆使用 Coaction 來支援多個選項卡、多執(zhí)行緒或多處理。

例如，對於跨多個選項卡共享的 3D 場景，您可以使用 Coaction 輕鬆處理其狀態(tài)管理。

https://github.com/user-attachments/assets/9eb9f4f8-8d47-433a-8eb2-85f044d6d8fa

共享模式 - 序列圖

sequenceDiagram
    participant Client as Webpage Thread (Client)
    participant Main as Worker Thread (Main)

    activate Client
    Note over Client: Start Worker Thread
    activate Main

    Client ->> Main: Trigger fullSync event after startup
    activate Main
    Main -->> Client: Synchronize data (full state)
    deactivate Main

    Note over Client: User triggers a UI event
    Client ->> Main: Send Store method and parameters
    activate Main
    Main ->> Main: Execute the corresponding method
    Main -->> Client: Synchronize state (patches)
    Note over Client: Render new state

    Main -->> Client: Asynchronously respond with method execution result
    deactivate Main
    deactivate Client

表現(xiàn)

測量（操作/秒）更新 10K 數(shù)組，越大越好（查看原始程式碼）。

此表對大型初始化任務(wù)上的各種狀態(tài)管理函式庫進(jìn)行了基準(zhǔn)測試。協(xié)同作用引人注目，在某些情況下執(zhí)行速度至少快數(shù)百倍。例如，在「bigInitWithoutRefsWithoutAssign」測試中，Coaction 的速度約為 19,910 次操作/秒，而 Mobx 的速度為 37.5 次操作/秒，快了 500 倍以上。同樣，在「init」測試中，Coaction 達(dá)到約 3,524 次操作/秒，而 Mobx 為 42.98 次操作/秒，大約增加了 80 倍。這些結(jié)果凸顯了 Coaction 在處理大規(guī)模資料初始化方面的卓越效率。

我們也將提供更完整的基準(zhǔn)測試。

安裝

您可以透過 npm、yarn 或 pnpm 為 React 應(yīng)用程式安裝 @coaction/react。

sequenceDiagram
    participant Client as Webpage Thread (Client)
    participant Main as Worker Thread (Main)

    activate Client
    Note over Client: Start Worker Thread
    activate Main

    Client ->> Main: Trigger fullSync event after startup
    activate Main
    Main -->> Client: Synchronize data (full state)
    deactivate Main

    Note over Client: User triggers a UI event
    Client ->> Main: Send Store method and parameters
    activate Main
    Main ->> Main: Execute the corresponding method
    Main -->> Client: Synchronize state (patches)
    Note over Client: Render new state

    Main -->> Client: Asynchronously respond with method execution result
    deactivate Main
    deactivate Client

如果你想在沒有任何框架的情況下使用核心庫，可以透過 npm、yarn 或 pnpm 安裝 coaction。

npm install coaction @coaction/react

用法

標(biāo)準(zhǔn)模式商店

npm install coaction

共享模式存儲

counter.js:

import { create } from '@coaction/react';

const useStore = create((set, get) => ({
  count: 0,
  increment: () => set((state) => state.count++)
}));

const CounterComponent = () => {
  const store = useStore();
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
};

worker.js：

import { create } from '@coaction/react';

export const counter = (set) => ({
  count: 0,
  increment: () => set((state) => state.count++)
});

import { create } from '@coaction/react';
import { counter } from './counter';

const useStore = create(counter);

切片模式和衍生數(shù)據(jù)

import { create } from '@coaction/react';

const worker = new Worker(new URL('./worker.js', import.meta.url));
const useStore = create(counter, { worker });

const CounterComponent = () => {
  const store = useStore();
  return (
    <div>
      <p>Count in Worker: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
};

結(jié)論

本質(zhì)上，Coaction 使開發(fā)人員能夠在不犧牲效能、開發(fā)人員體驗或架構(gòu)完整性的情況下建立下一代 Web 應(yīng)用程式。 它彌合了 Web 應(yīng)用程式日益複雜的情況與高效的需求之間的差距?？鐖?zhí)行緒的、可維護(hù)的、高效能的狀態(tài)管理。它是專為那些致力於在並行性和響應(yīng)能力不再是可選而是必不可少的世界中創(chuàng)造卓越用戶體驗的開發(fā)人員而設(shè)計的工具。它還支援遠(yuǎn)端同步，使其適合建立任何 CRDT 應(yīng)用程式。

倉庫：https://github.com/unadlib/coaction

以上是解鎖多重處理以實現(xiàn)更流暢的 Web 應(yīng)用程式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！