|
Post by account_disabled on Jan 28, 2024 4:44:33 GMT -6
很简单,对吧? 但是,在现实世界中,我们会遇到一些涉及表单的复杂交互。当表单上存在验证错误时,我们可能必须在页面顶部显示错误。我们甚至可能需要禁用页面其他部分的某些元素,具体取决于用户体验。这通常是通过传递来自父母的父母的父母的随机回调,甚至在每次验证时操作 DOM 来实现的。 让我们看看如何使用 Redux 来实现这一点这不是和我们上一节看到的例子很相似吗?它在形式上有何特别之处? 在开始讨论之前,了解 Redux 内部结构是如何工作的很重要。 当状态发生变化时,您不会更新树中的单个点。相反,整个状态树被一棵新的状态树替换。该树 WhatsApp 号码数据 被传递到您的 React 组件,React 会协调所有组件以查看 DOM 是否需要更新。 表单状态比较特殊,因为状态树变化非常快。根据用户的打字速度,这可能是一个问题。由于状态更改会触发所有节点的协调,因此用户键入时可能会出现轻微的延迟。当处理具有数百个组件的大页面时,它会变得非常明显。 让我们看看如何在不做大改变的情况下对其进行改造处理此问题的最简单方法是在表单周围创建一个包装组件(将其视为容器)并将状态存储在那里。 因此,当用户输入更改时,仅更新该节点,而不会动摇整个树。 请注意,我们只将表单状态移至 React 内部,但错误状态仍然保留在外部。如果我们想要在表单范围之外处理这些错误,这将有助于减少不必要的混乱。 包起来 在决定使用 Redux 时存储状态的位置之前,了解以下场景会很有帮助: 1. 这是UI状态,还是应用程序状态? 角色名称是应用程序状态,而跟踪操作是否正在进行是 UI 状态。
|
|