Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用React hooks处理复杂表单状态数据

使用React hooks处理复杂表单状态数据

作者头像
前端知否
发布于 2020-03-23 09:54:09
发布于 2020-03-23 09:54:09
3.7K0
举报
文章被收录于专栏:前端知否前端知否

自从React hooks发布以来已经有一段时间了,我很喜欢这个特性。这个hooks把我勾上了!

Hooks允许我们创建更小,可组合,可重用,更易管理的React组件。

您可能正在使用Hooks的一个用例是:使用useState或useReducer管理表单状态。

让我们考虑一个场景,您必须管理具有多个输入的复杂表单状态,这些表单输入可以是几种不同的类型,如文本,数字,日期输入。表单状态甚至可以具有嵌套信息,例如用户的地址信息,它具有子字段,例如address.addressLine1,address.addressLine2等。

也许您还必须根据当前状态更新表单状态,例如toggle切换按钮。

现在,如果您对每个单独的表单字段使用useState,那么您可以根据当前状态计算新状态。

但是,如果你有太多单独的表单字段,比如100+,那么这种方法并不友好。

脑补一下...

编写单独的useStates,然后为每个字段使用单独的更新函数是不切实际的。我们的另一个选择是hook,useReducer。

我们来看一个例子。

呃,不好。您不可能为reducer中的n个表单字段编写每个用例。

但是,useReducer中使用的reducer函数只是一个返回更新状态对象的普通函数。所以,我们可以做得更好。

这样看起来,reducer简洁干净多了。

但是,现在reducer更新参数中如果有回调函数,则不能基于当前状态计算新状态,因为当前state没有传递给回调函数作为参数。就像我们在useState一样:

useState中的更新函数可以基于prev参数计算新状态

另外,如何更新嵌套状态如address.addressLine1,address.pinCode。

我们通过使用不那么理想的方法进行了很多关于管理复杂表单状态的讨论。让我告诉你解决方案。

因此,这是处理复杂表单场景的完整源代码。

我将稍微解释一下reducer(enhancedReducer)函数。

reducer函数接收两个参数,第一个参数是更新前的当前状态。当您调用updateState / dispatch函数来更新reducer状态时,将自动提供此参数。reducer函数的第二个参数是用于更新state。它不一定是采用{type:'something',payload:'something'}形式的典型redux动作对象。它甚至可以是任何东西,数字,字符串,对象或函数。

这就是我们的做法。如果updateArg是一个函数,我们用当前状态调用它来计算新函数。无论我们从这个函数返回什么对象都成为我们的新状态。

如果updateArg是一个普通的旧Javascript对象,那么有两种情况。

1:该对象没有_path和_value属性,因此是一个普通的更新对象,就可以像使用this.setState一样。因此,您可以使用包含要更新的状态片段的新对象调用updateState,并将其与旧状态合并并返回新状态。

2:对象具有_path和_value属性 - 当使用具有这两个属性的对象作为参数,调用更新回调函数时。我们将此视为一种特殊情况,其中_path表示嵌套的字段路径。在字符串形式中,例如:'address.pinCode'或表示路径['address','pinCode']的数组。

我们如何使用此类路径表示来更新对象中的嵌套字段?我们将使用lodash的set方法。它接受路径表单作为更新和对象的有效输入。

但是,set方法就地改变对象并且不返回新副本,但在React世界中,更改检测取决于Immutability(不可变)。需要一个全新的数据副本,在内存中有一个新位置来触发渲染。

为了绕过这个,我们使用immer,来轻松地处理Javascript对象的不变性。

immer中的produce函数将对象作为其第一个参数进行处理,在我们的例子中是当前状态,它的第二个参数是一个函数,它接收对象的草稿副本以进行mutate,无论你在这个函数内修改了什么草稿状态,是在副本上完成的,而不是实际的输入对象状态。然后,它会自动返回包含更新数据的新对象。

这就是我们的增强版reducer。

安装一下依赖,就可以跑起来了。

PS:在enhancedReducer中可以处理更多边缘情况,动态字段映射也可以缩短一些代码,减少代码重复和其他一些事情。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端知否 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React-Hooks-useReducer
useReducer 是 React 中的一个 Hooks,用于处理复杂的状态逻辑。它允许您管理本地组件状态,将复杂的状态管理逻辑分解成可维护的部分,类似于 Redux 的 reducer。以下是关于 useReducer 的简介:
杨不易呀
2023/10/01
2170
从React源码来学hooks是不是更香呢
要理解 hooks 的执行过程,首先想要大家对 hooks 相关的数据结构有所了解,便于后面大家顺畅地阅读代码。
goClient1992
2022/10/04
7890
Sentry 开发者贡献指南 - 前端 React Hooks 与虫洞状态管理模式
如果有一个组件关心这个问题,使用它。如果有几个组件在意,就用 props 分享一下。如果很多组件都关心,把它放在 context 中。
为少
2021/12/20
7440
Sentry 开发者贡献指南 - 前端 React Hooks 与虫洞状态管理模式
全网最简单的React Hooks源码解析!
从React Hooks发布以来,整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的 useState、useReducer、useEffect 进行学习,尽可能的揭开Hooks的面纱。
Nealyang
2022/04/11
2.2K0
全网最简单的React Hooks源码解析!
React Hooks 源码解析(3):useState
React 源码版本: v16.11.0 源码注释笔记:airingursb/react 在写本文之前,事先阅读了网上了一些文章,关于 Hooks 的源码解析要么过于浅显、要么就不细致,所以本文着重讲解源码,由浅入深,争取一行代码也不放过。那本系列讲解第一个 Hooks 便是 useState,我们将从 useState 的用法开始,再阐述规则、讲解原理,再简单实现,最后源码解析。另外,在本篇开头,再补充一个 Hooks 的概述,前两篇限于篇幅问题一直没有写一块。 注:距离上篇文章已经过去了两个月,这两
QQ音乐前端团队
2019/12/03
2K1
React Hooks 源码解析(3):useState
React-Hooks源码深度解读
这个代码有一个问题,在执行 useState 的时候每次都会 var _val = initialValue,初始化数据;
goClient1992
2022/10/03
1.2K0
react源码解析13.hooks源码
​ 在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate
全栈潇晨
2021/06/16
7280
Reducer:让代码更灵活&简洁
React 表单场景的开发中,往往需要维护众多 state (如,表单数据),过多的 state 会导致源代码冗长,可读性比较差;且未来增删改字段,需要修改的地方也较多,难以维护。
奋飛
2024/05/25
2240
Reducer:让代码更灵活&简洁
「不容错过」手摸手带你实现 React Hooks
Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。
陈大鱼头
2020/10/23
1.3K0
React 16.8.6 升级指南(react-hooks篇)
从官方的态度可以很容易看出是十分重视hooks这个特性的,并且官方直言我们期望 Hook 能够成为人们编写 React 组件的主要方式。并且从笔者的实践过程来看hooks不仅仅是一种新玩法,更重要的意义是可以帮助开发者做减法,减少代码量,减少维护成本,甚至减少理解成本。
腾讯IVWEB团队
2020/06/28
2.9K0
React Hooks的使用
React是一个非常流行的JavaScript库,用于构建用户界面。在React中,Hooks是一种特殊的函数,可以帮助我们管理组件中的状态、副作用和生命周期等问题。
泽霖
2023/11/29
3270
React Hooks 万字总结
每个 hook 都会有一个 next 指针,hook 对象之间以单向链表的形式相互串联, 同时也能发现 useState 底层依然是 useReducer 再看看更新阶段发生了什么
ConardLi
2021/04/23
1K0
从React源码来学hooks是不是更香呢_2023-02-28
要理解 hooks 的执行过程,首先想要大家对 hooks 相关的数据结构有所了解,便于后面大家顺畅地阅读代码。
goClient1992
2023/02/28
8060
一篇看懂 React Hooks
React Hooks 是 React 16.7.0-alpha 版本推出的新特性,想尝试的同学安装此版本即可。
前端迷
2019/08/05
3.9K0
React 组件优化
useReducer 是 useState 的替代品,它可以更好的管理组件的状态。
多云转晴
2020/04/27
7.9K0
React 组件优化
react-hooks如何使用?
react-hooks是react16.8以后,react新增的钩子API,目的是增加代码的可复用性,逻辑性,弥补无状态组件没有生命周期,没有数据管理状态state的缺陷。笔者认为,react-hooks思想和初衷,也是把组件,颗粒化,单元化,形成独立的渲染环境,减少渲染次数,优化性能
用户6835371
2021/06/01
3.8K0
React Hooks 是什么
最近在重构 BadJS 的管理页面,使用 TypeScript + React Hooks 的技术栈,趁这个机会好好理一理 React Hooks 那些事儿。
李振
2021/11/26
3.4K0
精读《怎么用 React Hooks 造轮子》
上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好了吗?学的是知识,而用的是技能,看别人的用法就像刷抖音一样(哇,饭还可以这样吃?),你总会有新的收获。
黄子毅
2022/03/14
2.6K0
react hooks api
hooks API是 React 16.8的"新增"功能(16.8更新于2年前)。官网是这么说的:
一粒小麦
2020/06/16
3K0
react hooks api
React Hooks-useTypescript!
在React v16.8新增了Hook,它提供了在函数组件中访问状态和React生命周期等能力,这些函数可以在程序的各个组件之间复用,达到共享逻辑的目的。
写代码的阿宗
2020/09/22
4.4K0
相关推荐
React-Hooks-useReducer
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档