Coaction - 一個(gè)高效、靈活的狀態(tài)管理庫(kù)，用于構(gòu)建高性能、多線程 Web 應(yīng)用程序。

倉(cāng)庫(kù)：https://github.com/unadlib/coaction

動(dòng)機(jī)

現(xiàn)代 Web 應(yīng)用程序變得越來(lái)越復(fù)雜，突破了瀏覽器的可能性界限。單線程 JavaScript 雖然功能強(qiáng)大，但通常難以滿(mǎn)足復(fù)雜的 UI、實(shí)時(shí)交互和數(shù)據(jù)密集型計(jì)算的需求。此瓶頸會(huì)導(dǎo)致性能問(wèn)題、界面滯后或無(wú)響應(yīng)、請(qǐng)求連接限制，并最終導(dǎo)致用戶(hù)體驗(yàn)受損。

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

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

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

Coaction 與數(shù)據(jù)傳輸?shù)募蓪顟B(tài)同步的靈活性提升到了一個(gè)新的水平。通過(guò)支持通用傳輸協(xié)議，它為各種通信模式和架構(gòu)開(kāi)辟了可能性，滿(mǎn)足不同應(yīng)用程序的獨(dú)特需求.

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

概念和特點(diǎn)

Coaction 旨在為 Web 應(yīng)用程序中的多線程環(huán)境（例如 Web Workers、Shared Workers，甚至跨進(jìn)程和設(shè)備）共享和同步狀態(tài)提供安全高效的解決方案。

主要功能包括：

• 多線程同步：支持網(wǎng)頁(yè)線程和工作線程之間共享狀態(tài)。通過(guò)通用通信的數(shù)據(jù)傳輸，開(kāi)發(fā)人員可以避免消息傳遞和序列化邏輯的復(fù)雜性。
• 具有可選可變性的不可變狀態(tài)：由 Mutative 庫(kù)提供支持，核心提供了不可變的狀態(tài)轉(zhuǎn)換過(guò)程，同時(shí)允許在需要時(shí)使用可變實(shí)例進(jìn)行性能優(yōu)化。
• 基于補(bǔ)丁的更新：通過(guò)基于補(bǔ)丁的同步實(shí)現(xiàn)高效的增量狀態(tài)更改，簡(jiǎn)化其在 CRDT 應(yīng)用程序中的使用。
• 內(nèi)置計(jì)算：支持基于狀態(tài)依賴(lài)關(guān)系的派生屬性，使管理和檢索核心狀態(tài)的計(jì)算數(shù)據(jù)變得更加容易。
• 切片模式：輕松地將多個(gè)切片組合到具有命名空間的存儲(chǔ)中。
• 可擴(kuò)展中間件：允許中間件增強(qiáng)存儲(chǔ)的行為，例如日志記錄、時(shí)間旅行調(diào)試或與第三方工具集成。
• 與第三方庫(kù)集成：支持 React、Angular、Vue、Svelte 和 Solid 等流行框架，以及 Redux、Zustand 和 MobX 等狀態(tài)管理庫(kù)。

操作模式和基本原理

該庫(kù)以?xún)煞N主要模式運(yùn)行：

• 標(biāo)準(zhǔn)模式
  • 在標(biāo)準(zhǔn)網(wǎng)頁(yè)環(huán)境中，商店完全在網(wǎng)頁(yè)線程內(nèi)進(jìn)行管理。默認(rèn)情況下禁用補(bǔ)丁更新，以確保標(biāo)準(zhǔn)模式下的最佳性能。
• 共享模式
  • 工作線程作為共享狀態(tài)的主要來(lái)源，利用傳輸進(jìn)行同步。
  • 網(wǎng)頁(yè)線程充當(dāng)客戶(hù)端，通過(guò)存儲(chǔ)異步訪問(wèn)和操作狀態(tài)。

在共享模式下，庫(kù)根據(jù)傳輸參數(shù)自動(dòng)確定執(zhí)行上下文，無(wú)縫處理同步線程。

您可以在應(yīng)用程序中輕松使用 Coaction 來(lái)支持多個(gè)選項(xiàng)卡、多線程或多處理。

例如，對(duì)于跨多個(gè)選項(xiàng)卡共享的 3D 場(chǎng)景，您可以使用 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)

測(cè)量（操作/秒）更新 10K 數(shù)組，越大越好（查看源代碼）。

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

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

安裝

您可以通過(guò) 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

如果你想在沒(méi)有任何框架的情況下使用核心庫(kù)，可以通過(guò) npm、yarn 或 pnpm 安裝 coaction。

npm install coaction @coaction/react

用法

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

npm install coaction

共享模式存儲(chǔ)

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 使開(kāi)發(fā)人員能夠在不犧牲性能、開(kāi)發(fā)人員體驗(yàn)或架構(gòu)完整性的情況下構(gòu)建下一代 Web 應(yīng)用程序。它彌合了 Web 應(yīng)用程序日益復(fù)雜的情況與高效的需求之間的差距。跨線程的、可維護(hù)的、高性能的狀態(tài)管理。它是專(zhuān)為那些致力于在并行性和響應(yīng)能力不再是可選而是必不可少的世界中創(chuàng)造卓越用戶(hù)體驗(yàn)的開(kāi)發(fā)人員而設(shè)計(jì)的工具。它還支持遠(yuǎn)程同步，使其適合構(gòu)建任何 CRDT 應(yīng)用程序。

倉(cāng)庫(kù)：https://github.com/unadlib/coaction

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