前言
在前端开发中，我们需要经常使用到 UI 组件库。而我们最常用的就是 Storybook，它是一个开源的前端组件开发工具。这个工具的最大优点就是可以预览组件，以及交互式的展示组件提供给开发者进行交互测试，从而在编写组件时可以大大提高开发效率。
@storybook/state 是 Storybook 中的一个名为 state 的插件。它的作用就是在 Storybook 中提供一个方便的状态管理解决方案，以及为组件测试提供了支持。那么，在本文中，我们将介绍 npm 包 @sambego/storybook-state 的使用方法。
安装
首先，我们需要安装 @sambego/storybook-state 这个 npm 包。你可以使用 npm 安装:
npm install --save-dev @sambego/storybook-state
或者使用 yarn 安装:
yarn add --dev @sambego/storybook-state
快速开始
我们通过一个实例来了解该插件的使用。假设我们要开发一个简单的文本编辑器，它有两个主要的功能，一个是添加文字，一个是清空文本框。我们怎样在 Storybook 中使用这个插件呢？
1. 创建一个组件
我们先来创建一个组件:
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---------- - -- ------------ - --- -------- -- -- -
----- ------ -------- - -----------------------
----- ------------------ - -- -- -
------------ - ---- - ------------
-------- -- ---------------
--
----- ---------------- - -- -- -
------------
-------- -- -------------
--
------ -
-----
--------- ------------ ----------- -- ------------------------ --
------- -------------------------------- -------------
------- -----------------------------------------
------
--
--
------ ------- -----------2. 添加 Story
接下来，我们为这个组件添加 Story:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- --------------- ------ - --------- - ---- --------------------------- ------ ------- - ------ --------------------- ---------- ----------- ----------- -------------- -- ------ ----- ------- - -- -- - ----- ------------ - ----- -- ----------------- --- -- ------- ------ ----------- ----------------------- --- --
这里我们使用 withState 包装了这个组件，并在组件外部添加了一个 onChange 回调函数以观察组件内部状态的变化。
withState 函数的作用是将一个函数参数传递到组件，在组件中使用该函数可以修改本地状态并返回该状态。同时，withState 回调在每次状态发生变化时被调用。
详细解释
@storybook/state 插件只在 Storybook 框架中存在，它不会影响实际应用中的代码。@storybook/state 的设计目的是提供一个管理复杂组件状态的解决方案，并为组件测试提供支持。
withState
当使用 withState 包装组件时，该函数会将一个函数对象传递到该组件中，使其可以使用本地状态管理解决方案。
withState 函数的第一个参数是一个状态管理对象，该对象包含两个属性:
store是一个可以保存和提取本地状态的地方。actions是一个返回处理器/动作函数的对象。这些函数用于修改本地状态，同时更新 Storybook 页面。
withState 返回的结果是一个高阶组件，在使用高阶函数的组件注入 store 和 actions 属性的同时，也将一个 prop name 为 store 传递给被注入进来的组件。
store
store 属性的作用是在组件的生命周期中提供一个从外部存储和提取状态的地方。你可以将 store 视为一个储存本地状态的容器。store 属性以一个记录第一渲染的 props 和 state 的对象开始，然后在操作后每次重新渲染组件后，记录的信息将越来越多。
当使用 withState 包装组件时，store 对象被注入到包装组件的 prop 中。从 store 对象中读取状态值的方法与普通状态管理一样，你可以使用 store.get(key) 方法读取存储在 store 对象中的状态值。
actions
actions 属性是一个包含处理器/动作函数的对象，这些函数用于更新 store 对象。它们的主要作用是创建 callback 函数来更新 store 对象。一旦 store 对象被更新，Storybook 页面就会相应地更新。
如果你在 Storybook 页面上使用这些函数来编辑组件中的状态，那么这些函数优先使用 withState 的本地状态。
你可以看到，在上面的示例代码中，我们在按钮的 onClick 方法中使用 handleAddTextClick 和 handleClearClick 方法来更新组件的状态和 store，这是因为我们使用了 withState 包装了该组件。
结束语
总的来说，@sambego/storybook-state 插件是一个非常有用的包，它可以方便地为我们组件控制提供便利并辅助我们进行组件测试。但是在使用 withState 函数时，一定要注意，只有在 Storybook 框架中使用时，它才会影响状态，而在应用中，它是不会影响任何代码的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/sambego-storybook-state