使用未說的隔離來管理反應狀態

本文以先前對國家管理的討論為基礎，該討論使用未陳述的，探討其繼任者未知的next。未陳述的隔離利用鉤子和上下文API用於簡化狀態管理，提供了比其前任更有效的方法，尤其是考慮到React Hooks的進步。我們將使用未說的隔離檢查單個和多組件狀態管理。熟悉以前的未說的文章是有幫助的，但並不是嚴格要求。

最小形式組件示例

我們將創建一個簡單的React表單，其中包含一個名稱和提交按鈕的文本輸入。提交後，名稱將顯示在表格上方。完整的代碼可在GitHub上找到。此示例利用創建React App和Bootstrap。

首先，設置項目：

 NPX創建反應未陳述的隔壁形式
CD未陳述的接頭形式

安裝未說的隔離：

 ＃紗
紗線添加未說的隔離

＃npm
NPM安裝 - 持續未陳述的隔離

將必要的模塊導入App.js ：

 // src/app.js
導入React，{usestate}來自“ React”；
導入{createContainer}來自“未陳述的next”;

創建一個自定義鉤子：

 // src/app.js
// ...以前的導入

const useform =（）=> {
  const [輸入，setValue] = usestate（“”）;
  const [name，setName] = usestate（“ Barney Stinson”）;

  const handleinput =（event）=> setValue（event.target.value）;
  const updateName =（event）=> {
    event.preventDefault（）;
    setName（輸入）;
    setValue（“”）;
  };

  返回{輸入，名稱，句柄instup，updateName};
};

使用createContainer創建一個容器：

 // src/app.js
// ...以前的代碼

const formContainer = createContainer（useform）;

創建表單組件：

 // src/app.js
// ...以前的代碼

const form =（）=> {
  const form = formContainer.usecontainer（）;
  返回 （
    <div>
      <p>你好！ {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">節省</button>
      </form>
    </div>
  ）；
};

將“形式”組件與應用程序組件中的提供商包裝：

 const app =（）=>（
  <formcontainer.provider>
    <form></form>
  </formcontainer.provider>
）；

這完成了最小的表單示例。嘗試使用這些概念構建簡單的待辦事項應用程序。可以使用參考存儲庫。

跨多個組件共享狀態

此示例演示了表單和待辦事項列表之間的共享狀態。用戶名稱以表格更新，將在待辦事項列表中反映。

創建一個新項目並安裝依賴性：

 NPX創建反應未啟示的隔壁應用
CD未陳述的接頭應用
紗線添加未陳述的隔壁shortid

創建store.js來管理共享狀態：

 // src/store.js
從“ react”導入{usestate};
從“ shortid”進口shortid;
從'unstated-next'導入{createContainer};

const usestore =（）=> {
  const [輸入，setValue] = usestate（“”）;
  const [name，setName] = usestate（“ Barney Stinson”）;
  const [todos，settodos] = usestate（[{id：1，title：'寫代碼'}，{id：2，title：'buy milk'}]）;
  const [item，setItem] = usestate（“”）;

  const handleinput =（event）=> setValue（event.target.value）;
  const updateName =（event）=> {
    event.preventDefault（）;
    setName（輸入）;
    setValue（“”）;
  };
  const handleitem =（event）=> setItem（event.target.value）;
  const handlesubmit =（event）=> {
    event.preventDefault（）;
    settodos（[...
    setItem（“”）;
  };

  返回{輸入，名稱，句柄instut，updateName，todos，item，handleitem，handlesubmit};
};

導出const storecontainer = createContainer（usestore）;

創建form.js ：

 // src/form.js
從“反應”中導入反應；
從“ ./store”導入{Storecontainer};

const formComponent =（）=> {
  const form = storecontainer.usecontainer（）;
  返回 （
    <div>
      <p>你好！ {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">更改名稱</button>
      </form>
    </div>
  ）；
};

導出默認formComponent;

創建todo.js ：

 // src/todo.js
從“反應”中導入反應；
從“ ./store”導入{Storecontainer};

const toDocomponent =（）=> {
  const todo = storecontainer.usecontainer（）;
  返回 （
    <div>
      <p>添加招待</p>
      <form onsubmit="{todo.handleSubmit}">
        <input type="text" value="{todo.item}" onchange="{todo.handleItem}">
        <button type="submit">添加</button>
      </form>
      <p>親愛的{todo.name}，這是您當前的任務：</p>
      <ul>
        {todo.todos.map（（item）=><li key="{item.id}"> {item.title}</li> ）
      </ul>
    </div>
  ）；
};

導出默認toDocomponent;

更新App.js ：

從“反應”中導入反應；
從“ ./ todo”導入todocomponent;
從“ ./form”導入FormComponent;
從“ ./store”導入{Storecontainer};

功能應用程序（）{
  返回 （
    <storecontainer.provider>
      <formcomponent></formcomponent>
      <todocomponent></todocomponent>
    </storecontainer.provider>
  ）；
}

導出默認應用；

這個修訂後的示例提供了使用未說的next跨多個組件共享狀態共享的更完整和功能的例證。記住要處理生產環境中的潛在錯誤和邊緣案例。

以上是使用未說的隔離來管理反應狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！