专栏首页京程一灯3 个 React 状态管理的规则

3 个 React 状态管理的规则

翻译:疯狂的技术宅

作者:Dmitri Pavlutin

来源:dmitripavlutin

正文共:2630 字

预计阅读时间:8 分钟

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

我喜欢 useState() ,它确实使状态处理变得非常容易。但是我经常遇到类似的问题:

  • 我应该将组件的状态划分为小状态,还是保持复合状态?
  • 如果状态管理变得复杂,我应该从组件中提取它吗?该怎么做?
  • 如果 useState() 的用法是如此简单,那么什么时候需要 useReducer()

本文介绍了 3 条简单的规则,可以回答上述问题,并帮助你设计组件的状态。

No.1 一个关注点

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

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

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

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

const [state, setState] = useState({
    on: true,
    count: 0
});

state.on    // => true
state.count // => 0

状态由一个普通的 JavaScript 对象组成,该对象具有 oncount 属性。

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

然后,假设你要将计数器加1:

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

你必须将整个状态放在一起,才能仅更新 count。这是为了简单地增加一个计数器而调用的一个大结构:这都是因为状态变量负责两个方面:开关和计数器。

解决方案是将复合状态分为两个原子状态 oncount

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

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

现在,让我们尝试更新计数器:

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

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

不必担心调用多个 useState() 为每个关注点创建状态变量。

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

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

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

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

答案来自基本面(通常会发生这种情况)。

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

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

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

function ProductsList() {
    const [names, setNames] = useState([]);  
    const [newName, setNewName] = useState('');

    const map = name => <div>{name}</div>;

    const handleChange = event => setNewName(event.target.value);
    const handleAdd = () => {    
        const s = new Set([...names, newName]);    
        setNames([...s]);  };
    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}

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

addNewProduct() 内部,用 Set 对象来保持产品名称唯一。组件是否应该关注这个实现细节?不需要。

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

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

// useUnique.js
export function useUnique(initial) {
    const [items, setItems] = useState(initial);
    const add = newItem => {
        const uniqueItems = [...new Set([...items, newItem])];
        setItems(uniqueItems);
    };
    return [items, add];
};

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

import { useUnique } from './useUnique';

function ProductsList() {
  const [names, add] = useUnique([]);  const [newName, setNewName] = useState('');

  const map = name => <div>{name}</div>;

  const handleChange = event => setNewName(e.target.value);
  const handleAdd = () => add(newName);
  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

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

如果你想在列表中添加新名称,则只需调用 add('New Product Name') 即可。

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

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

No.3 提取多个状态操作

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

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

现在,你必须为 2 个操作编码:添加和删除产品。处理这些操作,就可以创建一个简化器并使组件摆脱状态管理逻辑。

同样,此方法符合 hook 的思路:从组件中提取复杂的状态管理。

以下是添加和删除产品的 reducer 的一种实现:

function uniqueReducer(state, action) {
    switch (action.type) {
        case 'add':
            return [...new Set([...state, action.name])];
        case 'delete':
            return state.filter(name => name === action.name);
        default:
            throw new Error();
    }
}

然后,可以通过调用 React 的 useReducer() hook 在产品列表中使用 uniqueReducer()

function ProductsList() {
    const [names, dispatch] = useReducer(uniqueReducer, []);
    const [newName, setNewName] = useState('');

    const handleChange = event => setNewName(event.target.value);

    const handleAdd = () => dispatch({ type: 'add', name: newName });
    const map = name => {
        const delete = () => dispatch({ type: 'delete', name });    
        return (
            <div>
                {name}
                <button onClick={delete}>Delete</button>
            </div>
        );
    }

    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}

const [names, dispatch] = useReducer(uniqueReducer, []) 启用 uniqueReducernames 是保存产品名称的状态变量,而 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/

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS判断单、多张图片加载完成

    在实际的运用中有这样一种场景,某资源加载完成后再执行某个操作,例如在做导出时,后端通过打开模板页生成PDF,并返回下载地址。这时前后端通常需要约定一个flag,...

    疯狂的技术宅
  • Webpack5.0 新特性尝鲜实战 ?? [每日前端夜话0x37]

    在老袁写这篇文章的时候,v5版本仍然处于早期阶段,可能仍然有问题。而且作为一个major版本,其中有一些breaking changes,可能会导致一些配置和插...

    疯狂的技术宅
  • JavaScript 装逼指南

    下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量。

    疯狂的技术宅
  • 第20章 ICMP

    72. 源主机ping 目的设备时,如果网络工作正常,则目的设备在接收到该报文后,将会向源主机回应ICMP( )报文。 B

    week
  • 交互神器-最好用的Mac原型设计工具

    市场上有着大量的开发和设计工具支持在Mac上安装使用,今天给大家强烈推荐一款Mac上的原型设计工具-Mockplus,原型工具在产品开发设计中是必不可少的,无论...

    奔跑的小鹿
  • 连马斯克都发文调侃特斯拉已倒闭,自动驾驶真的要凉?

    镁客网
  • 去中心化支付系统 Stellar

    在这一篇文章中,我们将介绍去中心化的支付系统 Stellar,它被设计与实现的目的就是在区块链和传统中心化的金融机构之间构建一个桥梁;其目的并不是创建一套完整的...

    哲洛不闹
  • es6 Object的几个新方法

    ES5 的 Object.preventExtensions 则可以阻止给对象添加新属性

    吴裕超
  • 优化递归频烦查询数据问题

    一般在我们做后台管理的时候都需要加载一个树,当然也有更好的方法,一般后端都是直接请求一个接口然后返回一个树,树一般都是递归调用的,根据父级一层层的往下查询,然后...

    技术从心
  • java RMI学习笔记RMI(Remote Method)Java RMI 威力强大Java远程消息交换协议JRMP使用RMI优点RMI网络模型网络模型RMI的工作原理RMI远程调用步骤:编码实现j

    RMI(Remote Method) Invocation):远程方法调用,即在RPC的基础上有向前迈进了一步,提供分布式对象间的通讯。允许运行在一个java虚...

    张俊怡

扫码关注云+社区

领取腾讯云代金券