还在用useState来定义数据吗?教你个更好的方案:useImmer!

以前编写state的方式

Hooks上市之前我们是这么定义state的:

state = {
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
}

这种情况下如果用 setState({…}) 这种形式的话修改数据的话会比较麻烦,所以推荐函数式写法:

this.setState(state => {
    state.people[2].englishName = 'Robin Lee'
    return {...state}
});

函数式setState写法要求每次都返回一个新的引用,在类组件走遍天下的那个时代,state这个变量几乎存储了此组件中的所有数据,便于集中访问与管理。

Hooks时代

用了函数式组件定义数据就不能再这么定义了,假如你要是还像以前一样那么写:

const [state, setState] = useState({
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
});

那么你的setState就不太好改了,相信用过React Hooks的小伙伴们都能懂,而且这也不是被推荐的写法,一般来说我们会尽可能的细分:

const [jack, setJack] = useState({
    name: '马云',
    englishName: 'Jack Ma'
});
const [pony, setPony] = useState({
    name: '马化腾',
    englishName: 'Pony Ma''
});
const [robin, setRobin] = useState({
    name: '李彦宏',
    englishName: 'Robin Li'
});

这样的话修改数据就方便多了,粒度也更细腻,但是就是写起来麻烦、不够直观、代码量也更多,尤其是当你的数据量比较大、或者嵌套层级比较深的情况下那简直就是一场灾难。

那么怎么样才能既像以前setState那样方便快捷,同时又能使用函数式组件呢?聪明的朋友们应该猜也猜到了:useImmer

use-immer

来看看useImmer是怎么撰写上述逻辑的:

// 定义
const [state, setState] = useImmer({
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
})

// 修改
setState(state => {state.people[2].name = 'Robin Lee'})

无论嵌套层级多么深,无论数据有多么复杂,useImmer总能让你找到当年 this.setState(state => state.people[2].name = 'Robin Lee') 的感觉,但是不同之处除了一个要用 this. 而另一个不用以外还有一个需要注意的地方:

原生的setState直接可以当作返回值,而这个useImmer生成的盗版useState修改后的值不能被直接当作返回值返回,所以需要在函数体外面有大括号。
当然也可以自定义返回值,返回什么值就会更新成什么值。
喜欢我文章的朋友记得关注+点赞啊!
Image placeholder
huj_php
未设置
  96人点赞

没有讨论,发表一下自己的看法吧

推荐文章
“数据+智能” 华为重新定义数据基础设施

互联网的发展,促成了网络订餐平台的崛起,数据的力量正在给传统的餐饮行业带来新的增长。业务场景不断丰富、数据规模越来越大,这对数据采集提出了非常高的要求;出行软件最核心的业务是一个实时在线服务,因此具有

css使用url引用图片报错

css使用url引用图片报错css使用url引用图片报错,是因为图片路径填写错误,路径需要相对于css文件,而不是引用css文件的html文件。例如:css文件夹下的index.css样式表中back

重新定义数据基础设施,华为的底气与转变

摘要:重新定义,制定新规则,意味着变革,它能让我们在深度思考和发散思维之间寻找更好的解决方案。重新定义存储架构,重新定义数据处理平台,重新定义数据基础设施,今年,华为在数据基础设施领域有点忙。华为何要

56岁潘石屹下决心学Python,60岁程序语言之父们还在敲代码,你呢

比你成功的人,比你还努力。上周,SOHO中国董事长、地产大亨 潘石屹,56岁生日当天发布微博宣布进军编程语言Python。 紧接着第二天,又更新微博解释为何会做出此举。潘石屹给出的解释大致就是,在不断

算法-下一个更大元素 I-LeetCode.496

题目下一个更大的元素I给定两个没有重复元素的数组 nums1和 nums2 ,其中nums1 是 nums2 的子集。找到 nums1 中每个元素在 nums2 中的下一个比其大的值。nums1 中数

一步步教你如何在 Django REST API 中构建使用 JWT 验证

基于令牌的身份验证,允许后端服务与前端(无论是web端,原生移动端或其他端)分离,并驻留在不同域中。JSONWebTokens(JWT)是一种流行的令牌认证实现,在本文中,我们使用它来验证,通过Dj

手把手教你写几个实用的的AST插件

背景AST是非常有用的。今天下午听了小组一个老哥做的AST分享,深以为然。为了加深印象,就写了篇总结,顺便分享给大家,希望能给朋友们一些启发。AST有用,口说无凭,且看几个具体的案例。且不说: Vue

徒手教你使用zookeeper编写服务发现

zookeeper是一个强一致【不严格】的分布式数据库,由多个节点共同组成一个分布式集群,挂掉任意一个节点,数据库仍然可以正常工作,客户端无感知故障切换。客户端向任意一个节点写入数据,其它节点可以立即

手摸手教你搭建简单的 Git 的代码自动发布

1.为什么我要弄这个? emmmm,因为有个自己的项目每次发布到线上,都要登录一下服务器,然后pull一下代码,执行一些项目初始化的命令(诸如:gitsubmoudleupdate,phpartisa

教你阅读 Python 开源项目代码

为什么要阅读开源代码 阅读Python开源项目代码主要有如下三个原因: 在工作过程中遇到一些问题Google和StackOverFlow等网站找不到解决办法,只能去翻源码。 对某些项目或者方向非常感

甜过初恋!浙大博士用200个西瓜130页论文,教你用机器学习科学挑瓜

大数据文摘出品作者:易琬玉刚刚送走了最热七月,转眼就迎来了最热八月。2019年是人类有气象纪录以来最热的几个年份之一,虽然这个夏天还没结束,但气象学家们已经有十足把握做出这个判断。为了应付热,人们想出

直男福利!手把手教你做一只口红色号识别器,秒变李佳琦

大数据文摘编辑组出品技术实现:宁静 七夕将至,送礼时节。直男送礼,首选口红。毕竟李佳琦一句”OMG买它”,女朋友披头散发抢购,钱包就空了一半。但是,口红色号千千万,选对了牌子才成功了一半。快乐橙、伤心

10后小学生都能教你学编程了!低龄编程的下限在哪?

大数据文摘出品作者:宁静最近,文摘菌经常收到读者留言,说b站上有一个10后小学生在教编程。小学生???教编程???话说文摘菌小学时候还只知道玩儿贪吃蛇……在感叹长江后浪推前浪的同时,文摘菌也赶紧去这位

「解放双手」老舅教你VS Code Disco

观感度:🌟🌟🌟🌟🌟口味:驴肉蒸饺烹饪时间:15min这是最好的时代,也是最坏的时代。今年听到过最浪漫的一句话:我们在键盘上留下的余温,也将随时代传递到更远的将来。感觉让理性的技术人多了份柔光滤镜。也许

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR登陆用户名密码失效问题解决方案

背景分析随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需

大数据是个技术,数据库才是它最好的产品形态

星环科技(以下简称:星环)的定位是大数据基础软件公司,而非数据库公司,却在数据库方面,做的比很多数据库公司更好更猛?这是为何?“我们认为,大数据是个技术,数据库才是它最好的产品形态”,星环科技研发总监

从产品到解决方案,GaussDB与FusionData之我见

摘要:连接、计算和数据是ICT基础设施的三大基石,华为IT产品线副总裁、智能数据与存储领域总裁周跃峰在接受媒体采访时强调,这或许是华为在数据领域全面持续发力的原因之一。时隔不足一个月,华为连续召开两次

华为发布智能数据解决方案FusionData

华为在北京发布智能数据解决方案FusionData,支持智能的数据全生命周期管理;从数据接入、数据处理和数据使能三个层面,重定义数据基础设施,帮助客户打造领先的智能数据解决方案,拥抱行业数字化,释放数

ES 笔记二十六:Term & Phrase Suggester

什么是搜索建议 现代的搜索引擎,一般都会提供Suggestasyoutype的功能 帮助用户在输入搜索的过程中,进行自动补全或者纠错。通过协助用户输入更加精准的关键词,提高后续搜索阶段文档匹配的程度

MySQL 亿级数据数据库优化方案测试-银行交易流水记录的查询

作者:逸宸a链接:https://www.jianshu.com/p/cbdef47fb837对MySQL的性能和亿级数据的处理方法思考,以及分库分表到底该如何做,在什么场景比较合适?比如银行交易流水

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

Twitter 宣布抛弃 Mesos,全面转向 Kubernetes

作者|阿里云智能高级技术专家张磊划重点Twitter的基础设施从Mesos全面转向Kubernetes阿里云容器平台团队即将开源 Kubernetes高级作业管理集合美国西部时间5月2日下午7点,Tw

在云、AI时代,传统应用性能监控方案过时了吗?

近年来,企业云对IT复杂性产生巨大影响,越来越多的企业需要能够解决云复杂性上升或加速数字化转型的有效方案,而人工智能正在成为解决这些问题的不二之选。在全球智能运维浪潮下,不少公司都选择重写代码,颠覆自

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

Testin用iTestin开启下一代测试,测试行业为什么要“重新来过”?

测试,其实并不是一个新话题。从有软件开发开始,就有测试,最早的测试就是找Bug。后来,自动化测试、云测试、众包测试的模式开始成为流行趋势,今天又迎来以智能化为核心的下一代测试。但是,“测试”从简单的软