[[342442]]

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、柏鄉(xiāng)ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的柏鄉(xiāng)網(wǎng)站制作公司

前言

自 Hook 被引入 React 以來，Context API 與 Hook 庫在應(yīng)用狀態(tài)管理中被一起使用。但是把 Context API 和 Hooks（許多基于 Hooks 的狀態(tài)管理庫建立在其基礎(chǔ)上）組合的用法對于大規(guī)模應(yīng)用來說可能效率不高。

由于必須創(chuàng)建一個自定義的 Hook 才能啟用對狀態(tài)及其方法的訪問，然后才能在組件中使用它，所以在實際開發(fā)中很繁瑣。這違反了 Hook 的真正目的：簡單。但是對于較小的應(yīng)用，Redux 可能會顯得太重了。

今天，我們將討論 Context API 的替代方法：Storeon。Storeon 是一個微型的、事件驅(qū)動的 React 狀態(tài)管理庫，其原理類似于 Redux。用 Redux DevTools 可以查看并可視化狀態(tài)操作。Storeon 內(nèi)部使用 Context API 來管理狀態(tài)，并采用事件驅(qū)動的方法進行狀態(tài)操作。

Store

store 是在應(yīng)用程序狀態(tài)下存儲的數(shù)據(jù)的集合。它是通過從 Storeon 庫導(dǎo)入的 createStoreon() 函數(shù)創(chuàng)建的。

createStoreon() 函數(shù)接受模塊列表，其中每個模塊都是一個接受 store 參數(shù)并綁定其事件監(jiān)聽器的函數(shù)。這是一個store 的例子：

  
 
 
 

   
  
  
  
import { createStoreon } from 'storeon/react' 
   
  
  
  
// todos module 
   
  
  
  
const todos = store => {  store.on(event, callback) 
   
  
  
  
}export default const store = createStoreon([todos]) 
  
 
 
 

模塊化

Storeon 中的 store 是模塊化的，也就是說，它們是獨立定義的，并且沒有被綁定到 Hook 或組件。每個狀態(tài)及其操作方法均在被稱為模塊的函數(shù)中定義。這些模塊被傳遞到 createStoreon() 函數(shù)中，然后將其注冊為全局 store。

store 有三種方法：

1. store.get() – 用于檢索狀態(tài)中的當前數(shù)據(jù)。
2. store.on(event, callback) – 用于把事件偵聽器注冊到指定的事件名稱。
3. store.dispatch(event, data) – 用于發(fā)出事件，并根據(jù)定義的事件要求將可選數(shù)據(jù)傳遞進來。

Events

Storeon 是基于事件的狀態(tài)管理庫，狀態(tài)更改由狀態(tài)模塊中定義的事件發(fā)出。Storeon 中有三個內(nèi)置事件，它們以 @ 開頭。其他事件不帶 @ 前綴定義。三個內(nèi)置事件是：

1. @init – 在應(yīng)用加載時觸發(fā)此事件。它用于設(shè)置應(yīng)用的初始狀態(tài)，并執(zhí)行傳遞給它的回調(diào)中的所有內(nèi)容。
2. @dispatch – 此事件在每個新動作上觸發(fā)。這對于調(diào)試很有用。
3. @changed – 當應(yīng)用狀態(tài)發(fā)生更改時，將觸發(fā)此事件。

注意：store.on(event，callback) 用于在我們的模塊中添加事件監(jiān)聽器。

演示程序

為了演示在 Storeon 中如何執(zhí)行應(yīng)用程序狀態(tài)操作，我們將構(gòu)建一個簡單的 notes 程序。還會用 Storeon 的另一個軟件包把狀態(tài)數(shù)據(jù)保存在 localStorage 中。

假設(shè)你具有 JavaScript 和 React 的基本知識。你可以在https://github.com/Youngestdev/storeon-app 上找到本文中使用的代碼。

設(shè)置

在深入探討之前，讓我們先勾勒出 Notes 程序所需的項目結(jié)構(gòu)和依賴項的安裝。從創(chuàng)建項目文件夾開始。

  
 
 
 

   
  
  
  
mkdir storeon-app && cd storeon-app 
   
  
  
  
mkdir {src,public,src/Components} 
   
  
  
  
touch public/{index.html, style.css} && touch src/{index,store,Components/Notes}.js 
  
 
 
 

接下來，初始化目錄并安裝所需的依賴項。

  
 
 
 

   
  
  
  
npm init -y 
   
  
  
  
npm i react react-dom react-scripts storeon @storeon/localstorage uuidv4 
  
 
 
 

接下來就是在 index.js文件中編寫父組件了。

`index.js`

這個文件負責(zé)渲染我們的筆記組件。首先導(dǎo)入所需的包。


  
 
 
 

   
  
  
  
import React from 'react' 
   
  
  
  
 import { render } from 'react-dom'; 
   
  
  
  
  function App() { 
   
  
  
  
   return ( 
   
  
  
  
    <> 
   
  
  
  
       Hello! 
   
  
  
  
     
   
  
  
  
   ); 
   
  
  
  
} 
   
  
  
  
const root = document.getElementById('root'); 
   
  
  
  
render(, root); 
  
 
 
 

接下來通過在 store.js 中編寫用于狀態(tài)的初始化和操作的代碼來構(gòu)建 store。

`store.js`

此文件負責(zé)處理應(yīng)用中的狀態(tài)和后續(xù)狀態(tài)管理操作。我們必須創(chuàng)建一個模塊來存儲狀態(tài)以及支持事件，以處理操作變更。

首先，從 Storeon 導(dǎo)入 createStoreon 方法和唯一隨機ID生成器 UUID。

createStoreon 方法負責(zé)將我們的 狀態(tài) 注冊到全局 store 。

  
 
 
 

   
  
  
  
import { createStoreon } from 'storeon'; 
   
  
  
  
import { v4 as uuidv4 } from 'uuid' 
   
  
  
  
import { persistState } from '@storeon/localstorage'; 
   
  
  
  
let note = store => {} 
  
 
 
 

我們將狀態(tài)存儲在數(shù)組變量 notes 中，該變量包含以下格式的注釋：

  
 
 
 

   
  
  
  
{ 
   
  
  
  
  id: 'note id', 
   
  
  
  
  item: 'note item' 
   
  
  
  
}, 
  
 
 
 

接下來，我們將用兩個注釋（在首次啟動程序時會顯示）來初始化狀態(tài)，從而首先填充注釋模塊。然后，定義狀態(tài)事件。

  
 
 
 

   
  
  
  
let note = store => { 
   
  
  
  
 store.on('@init', () => ({ 
   
  
  
  
   notes: [ 
   
  
  
  
     { id: uuidv4(), item: 'Storeon is a React state management library and unlike other state management libraries that use Context, it utilizes an event-driven approach like Redux.' }, 
   
  
  
  
   { id: uuidv4(), item: 'This is a really short note. I have begun to study the basic concepts of technical writing and I'\'m optimistic about becoming one of the best technical writers.' }, 
   
  
  
  
   ] 
   
  
  
  
 }); 
   
  
  
  
 store.on('addNote', ({ notes }, note) => { 
   
  
  
  
   return { 
   
  
  
  
     notes: [...notes, { id: uuidv4(), item: note }], 
   
  
  
  
   }  });  store.on('deleteNote', ({ notes }, id) => ({ 
   
  
  
  
 });16} 
  
 
 
 

在上面的代碼中，我們定義了狀態(tài)，并用兩個簡短的注釋填充了狀態(tài)，并定義了兩個事件和一個從 dispatch(event, data) 函數(shù)發(fā)出事件后將會執(zhí)行的回調(diào)函數(shù)。

在 addNote 事件中，我們返回添加了新 note 的更新后的狀態(tài)對象，在 deleteNote 事件中把 ID 傳遞給調(diào)度方法的 note 過濾掉。

最后，把模塊分配給可導(dǎo)出變量 store ，將其注冊為全局 store，以便稍后將其導(dǎo)入到上下文 provider 中，并將狀態(tài)存儲在 localStorage 中。

  
 
 
 

   
  
  
  
const store = createStoreon([ 
   
  
  
  
  notes,  // Store state in localStorage 
   
  
  
  
 persistState(['notes']), 
   
  
  
  
]);export default store; 
  
 
 
 

接下來，在 Notes.js 中編寫 Notes 應(yīng)用組件。

`Notes.js`

此文件包含 Notes 程序的組件。我們將從導(dǎo)入依賴項開始。

  
 
 
 

   
  
  
  
import React from 'react'; 
   
  
  
  
import { useStoreon } from 'storeon/react'; 
  
 
 
 

接下來，編寫組件。

  
 
 
 

   
  
  
  
const Notes = () => { 
   
  
  
  
  const { dispatch, notes } = useStoreon('notes'); 
   
  
  
  
 const [ value, setValue ] = React.useState('');  
   
  
  
  
} 
  
 
 
 

在上面的代碼的第二行中，useStoreon() hook 的返回值設(shè)置為可破壞的對象。useStoreon() hook 使用模塊名稱作為其參數(shù)，并返回狀態(tài)和調(diào)度方法以發(fā)出事件。

接下來定義在組件中發(fā)出狀態(tài)定義事件的方法 。

  
 
 
 

   
  
  
  
const Notes = () => { 
   
  
  
  
...   const deleteNote = id => { 
   
  
  
  
    dispatch('deleteNote', id) 
   
  
  
  
 };  const submit = () => { 
   
  
  
  
   dispatch('addNote', value); 
   
  
  
  
  setValue(''); 
   
  
  
  
 };  const handleInput = e => { 
   
  
  
  
   setValue(e.target.value);  };} 
  
 
 
 

讓我們回顧一下上面定義的三種方法：

1. deleteNote(id) – 此方法在觸發(fā)時調(diào)度deleteNote事件。
2. submit() – 該方法通過傳遞輸入狀態(tài)的值來調(diào)度addNote事件，該狀態(tài)在Notes組件中本地定義。
3. handleInput() – 此方法將本地狀態(tài)的值設(shè)置為用戶輸入。

Next, we’ll build the main interface of our app and export it.接下來，我們將構(gòu)建應(yīng)用程序的主界面并將其導(dǎo)出。

  
 
 
 

   
  
  
  
const Notes = () => { 
   
  
  
  
  ...  return (   
 
   
  
  
  
      
Quick Notes
 
   
  
  
  
       
   
  
  
  
         
   
  
  
  
        submit()}> Add A Note