使用未说的隔离来管理反应状态

本文以先前对国家管理的讨论为基础，该讨论使用未陈述的，探讨其继任者未知的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中文网其他相关文章！