3 个 React 状态管理的规则

3 个 React 状态管理的规则

疯狂的技术宅 前端先锋

翻译：疯狂的技术宅
做者：Dmitri Pavlutin
来源：dmitripavlutin
正文共：2630 字
预计阅读时间：8 分钟

React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook，负责管理功能组件内部的状态。

我喜欢 useState() ，它确实使状态处理变得很是容易。可是我常常遇到相似的问题：

• 我应该将组件的状态划分为小状态，仍是保持复合状态？
• 若是状态管理变得复杂，我应该从组件中提取它吗？该怎么作？
• 若是 useState() 的用法是如此简单，那么何时须要 useReducer()？
  本文介绍了 3 条简单的规则，能够回答上述问题，并帮助你设计组件的状态。

No.1 一个关注点

有效状态管理的第一个规则是：

使状态变量负责一个问题。

使状态变量负责一个问题使其符合单一责任原则。

让咱们来看一个复合状态的示例，即一种包含多个状态值的状态。

1const [state, setState] = useState({
2    on: true,
3    count: 0
4});
5
6state.on    // => true
7state.count // => 0

状态由一个普通的 JavaScript 对象组成，该对象具备 on 和 count 属性。

第一个属性 state.on 包含一个布尔值，表示开关。一样，`state.count 包含一个表示计数器的数字，例如，用户单击按钮的次数。

而后，假设你要将计数器加1：

1// Updating compound state
2setUser({
3    ...state,
4    count: state.count + 1
5});

你必须将整个状态放在一块儿，才能仅更新 count。这是为了简单地增长一个计数器而调用的一个大结构：这都是由于状态变量负责两个方面：开关和计数器。

解决方案是将复合状态分为两个原子状态 on 和 count：

1const [on, setOnOff] = useState(true);
2const [count, setCount] = useState(0);

状态变量 on 仅负责存储开关状态。一样，count 变量仅负责计数器。

如今，让咱们尝试更新计数器：

1setCount(count + 1);
2// or using a callback
3setCount(count => count + 1);

count 状态仅负责计数，很容易推断，也很容易更新和读取。

没必要担忧调用多个 useState() 为每一个关注点建立状态变量。

可是请注意，若是你使用过多的 useState() 变量，则你的组件颇有可能就违反了“单一职责原则”。只需将此类组件拆分为较小的组件便可。

No.2 提取复杂的状态逻辑

将复杂的状态逻辑提取到自定义 hook 中。

在组件内保留复杂的状态操做是否有意义？

答案来自基本面（一般会发生这种状况）。

建立 React hook 是为了将组件与复杂状态管理和反作用隔离开。所以，因为组件只应关注要渲染的元素和要附加的某些事件侦听器，因此应该把复杂的状态逻辑提取到自定义 hook 中。

考虑一个管理产品列表的组件。用户能够添加新的产品名称。约束是产品名称必须是惟一的。

第一次尝试是将产品名称列表的设置程序直接保留在组件内部：

1function ProductsList() {
 2    const [names, setNames] = useState([]);  
 3    const [newName, setNewName] = useState('');
 4
 5    const map = name => <div>{name}</div>;
 6
 7    const handleChange = event => setNewName(event.target.value);
 8    const handleAdd = () => {    
 9        const s = new Set([...names, newName]);    
10        setNames([...s]);  };
11    return (
12        <div className="products">
13            {names.map(map)}
14            <input type="text" onChange={handleChange} />
15            <button onClick={handleAdd}>Add</button>
16        </div>
17    );
18}
19

names 状态变量保存产品名称。单击 Add 按钮时，将调用 addNewProduct() 事件处理程序。

在 addNewProduct() 内部，用 Set 对象来保持产品名称惟一。组件是否应该关注这个实现细节？不须要。

最好将复杂的状态设置器逻辑隔离到一个自定义 hook 中。开始作吧。

新的自定义钩子 useUnique() 可以使每一个项目保持惟一性：

1// useUnique.js
2export function useUnique(initial) {
3    const [items, setItems] = useState(initial);
4    const add = newItem => {
5        const uniqueItems = [...new Set([...items, newItem])];
6        setItems(uniqueItems);
7    };
8    return [items, add];
9};

将自定义状态管理提取到一个 hook 中后，ProductsList 组件将变得更加轻巧：

1import { useUnique } from './useUnique';
 2
 3function ProductsList() {
 4  const [names, add] = useUnique([]);  const [newName, setNewName] = useState('');
 5
 6  const map = name => <div>{name}</div>;
 7
 8  const handleChange = event => setNewName(e.target.value);
 9  const handleAdd = () => add(newName);
10  return (
11    <div className="products">
12      {names.map(map)}
13      <input type="text" onChange={handleChange} />
14      <button onClick={handleAdd}>Add</button>
15    </div>
16  );
17}
18

const [names, addName] = useUnique([]) 启用自定义 hook。该组件再也不被复杂的状态管理所困扰。

若是你想在列表中添加新名称，则只需调用 add('New Product Name') 便可。

最重要的是，将复杂的状态管理提取到自定义 hooks 中的好处是：

• 该组件再也不包含状态管理的详细信息
• 自定义 hook 能够重复使用
• 自定义 hook 可轻松进行隔离测试

  No.3 提取多个状态操做

将多个状态操做提取到化简器中。

继续用 ProductsList 的例子，让咱们引入“delete”操做，该操做将从列表中删除产品名称。

如今，你必须为 2 个操做编码：添加和删除产品。处理这些操做，就能够建立一个简化器并使组件摆脱状态管理逻辑。

一样，此方法符合 hook 的思路：从组件中提取复杂的状态管理。

如下是添加和删除产品的 reducer 的一种实现：

1function uniqueReducer(state, action) {
 2    switch (action.type) {
 3        case 'add':
 4            return [...new Set([...state, action.name])];
 5        case 'delete':
 6            return state.filter(name => name === action.name);
 7        default:
 8            throw new Error();
 9    }
10}

而后，能够经过调用 React 的 useReducer() hook 在产品列表中使用 uniqueReducer()：

1function ProductsList() {
 2    const [names, dispatch] = useReducer(uniqueReducer, []);
 3    const [newName, setNewName] = useState('');
 4
 5    const handleChange = event => setNewName(event.target.value);
 6
 7    const handleAdd = () => dispatch({ type: 'add', name: newName });
 8    const map = name => {
 9        const delete = () => dispatch({ type: 'delete', name });    
10        return (
11            <div>
12                {name}
13                <button onClick={delete}>Delete</button>
14            </div>
15        );
16    }
17
18    return (
19        <div className="products">
20            {names.map(map)}
21            <input type="text" onChange={handleChange} />
22            <button onClick={handleAdd}>Add</button>
23        </div>
24    );
25}
26

const [names, dispatch] = useReducer(uniqueReducer, []) 启用 uniqueReducer。names 是保存产品名称的状态变量，而 dispatch 是使用操做对象调用的函数。

当单击 Add 按钮时，处理程序将调用 dispatch({ type: 'add', name: newName })。调度一个 add 动做使 reducer uniqueReducer 向状态添加一个新的产品名称。

以一样的方式，当单击 Delete 按钮时，处理程序将调用 dispatch({ type: 'delete', name })。remove 操做将产品名称从名称状态中删除。

有趣的是，reducer 是命令模式的特例。

总结

状态变量应只关注一个点。

若是状态具备复杂的更新逻辑，则将该逻辑从组件提取到自定义 hook 中。

一样，若是状态须要多个操做，请用 reducer 合并这些操做。

不管你使用什么规则，状态都应该尽量地简单和分离。组件不该被状态更新的细节所困扰：它们应该是自定义 hook 或化简器的一部分。

这 3 个简单的规则可以使你的状态逻辑易于理解、维护和测试。

原文连接

https://dmitripavlutin.com/react-state-management/