Immer 是一个用于简化 JavaScript 状态管理的库,以更方便地更新和操作不可变数据
最近接到一个需求,修改一个使用React编写的工单系统,具体就是在创建工单的时候能配置一些增强工单通用性的功能然后把配置传给后端进行存储,乍一听其实挺简单,但是由于数据结构没设计好,写的时候非常的麻烦。
React 作为当前前端最受欢迎的框架之一,极大的提升了前端开发效率。 其拥有庞大的开发者群体,其社区也非常活跃,因此围绕 React 也产出了非常多的第三方库。 Immer 就是其中之一。
本文旨在分享,React hook 在中大型中台项目中的实践,适合熟悉 React hook 用法的同学,希望能对你有帮助。
本文是深入浅出 ahooks 源码系列文章的第十二篇,这个系列的目标主要有以下几点:
Zustand 的核心思想是将状态管理与组件分离,从而使得状态管理更加集中化,同时保持了 React 的响应性和组件的可重用性。它提供了一种简单的 API,使得开发者能够轻松地在应用程序中的任何地方访问和修改状态。 使用 Zustand,开发者可以通过创建一个 store 来存储和管理应用程序的状态。这个 store 是通过调用 createStore 方法并传入一个包含状态和操作的 object 来创建的。
你发现它重新渲染了,因为普通的 class 组件只要 setState 就会渲染。
文件目录组织现在常用的有两种方式,后面公司采用的第二种,更方便一些。两种方式没有最好的,只有更适合自己公司的,只要公司内部达成一致了,用哪一种都会很方便。 1.1 按功能类型来划分 按文件的功能类型来分,比如 api,组件,页面,路由,hooks,store,不管是全局使用到的,还是单独页面局部使用到的,都按照功能类型放在src下面对应的目录里面统一管理。
关于第一点很容易理解,整个应用应当只有一个 store,全局唯一的 store 有利于更好的管理全局的状态,方便开发调试,对实现“撤销”、“重做”这类的功能也更加方便。
useReducer 是 useState 的替代品,它可以更好的管理组件的状态。
https://juejin.im/post/5cac8ccd6fb9a068530111c7
自从React hooks发布以来已经有一段时间了,我很喜欢这个特性。这个hooks把我勾上了!
这里有两个独立的部分:函数logElements()和函数main()。后者想要在对数组进行排序的前后都打印其内容。但是它到用了 logElements() ,会导致数组被清空。所以 main() 会在A行输出一个空数组。
古映杰,携程研发高级经理,负责前端框架和基础设施的设计、研发与维护。开源项目react-lite和react-imvc作者。
写时复制(copy-on-write,简称 CoW 或 COW),也叫隐式共享(implicit sharing)或隐藏(shadowing),是计算机编程中的一种资源管理技术,用于高效地复制或拷贝可修改资源
英文 | https://javascript.plainenglish.io/9-best-vanilla-javascript-utilities-libraries-ff752592dfb5
《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集,主要分为以下几个板块: Highlights 业界最新的技术、热点文章 业界对(新)技术的深度地、优秀地实践 Tut
作者简介 黄子毅,目前在阿里数据中台前端团队,负责数据产品相关业务。前端精读创办者、数据流框架 Dob 作者、可视化编辑器 gaea-editor 作者、react-native-image-view
Immer 是最近火起来的一个项目,由 Mobx 作者 Mweststrate 研发。
Immer结合 Copy-on-write 机制与 ES6 Proxy 特性,提供了一种异常简洁的不可变数据操作方式:
limu面向现代浏览器而设计,只考虑支持Proxy的运行环境,使用了读时浅复制写时标记更新的机制来达到让用户像操作原始数据一样操作可变数据,操作过程中始终只为读取节点生成代理对象返回给用户,读取后父子节点间直接用浅克隆节点相连,proxy对象隐藏到节点的meta数据中,结束操作后生成一个具有结构共享特性的新数据,同时移除这些读取过程中生成的meta数据。
而从根本上讲,「React 是一个用于构建用户界面的 JavaScript 库」。
如果我仍然去解释什么是状态管理器,为什么我们需要它,这篇文章将会索然无味。我的想法是,我们原本不需要状态管理器,但我们确实需要状态管理。
Redux 出现原因 📷 Redux:全局只有一个唯一的 Store,负责管理整个应用程序所有的状态 出发点:让组件通信更加容易 📷 (opens new window) 特性 Single Source of Truth 📷 可预测性 📷 纯函数更新 Store function todo (state = [], action) { switch (action.type) { case 'ADD_TODO': return state.concat([{text:
说到 React 状态管理,必提的肯定是 Redux 与 MobX,2018 年快过去了,它们依然是最火热的状态管理工具,也有一些基于 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree,这里不对各个解决方案作评价。
如果你是一名中级React开发人员,希望成为一名高级React开发人员,这篇文章就是为你准备的!
过去由于操作系统的不一致性,windows、linux、macos 等操作一些一致性的 shell 命令异常困难,我们需要类似的 polyfill 来书写跨平台的 cli 脚本。
虽然文档写得不怎么样,但是里面确实给了很多比较好的代码组织方式,推荐了很多很有用的工具和插件,也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。
JS 中有个重要的类型叫做引用类型。这种类型在使用的过程中,因为传递的值是引用,所以很容易发生一些副作用,比如:
什么是代理呢,可以理解为在对象之前设置一个“拦截”,当该对象被访问的时候,都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理,返回你想返回的数据结构。
React 表单场景的开发中,往往需要维护众多 state (如,表单数据),过多的 state 会导致源代码冗长,可读性比较差;且未来增删改字段,需要修改的地方也较多,难以维护。
值得一看,介绍了很多边角优化点。其中无符号判断empty和pointer alias这些我们在之前介绍过。值得再看
有同学反馈开发 ReactNative 应用时状态管理不是很明白,这个问题我之前刚接触 React 时也遇到过,看了好多文章和视频才终于明白,不得不说,React 及三方库这方面做的有点过于复杂了!
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案。
使用 React 和 Redux 启动新应用程序的推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板来创建 React App,它利用了Redux Toolkit和 React Redux 与 React 组件的集成。
表单联动是前端经常面临的问题,联动实际上是一组表单项和表单项之间的依赖关系的集合。比如经典的“省-市-区”三级联动,就包含了“省”、“市”、“区”三个表单项,以及“市->省”和“区->市”。表单项的依赖关系可以抽象成若干if(省 === '广东省') { 市 in [‘广州市’, ‘深圳市’, ...] }的形式,即“市”依赖于“省”。(被依赖项也可以有多个,比如C依赖于B和A;而依赖项有多个的情况可以拆解为相互独立的依赖关系)
上一篇文章主要介绍了 redux 文档里所用到的基本优化方案,但是很多都是手工实现的,不够自动化。这篇文章主要讲的是怎么用 redux-toolkit 组织 redux 代码。
今天我们来聊 React,React 已经风靡前端届很长一段时间了,在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React,它的生态功不可没。
zustand 是一个非常时髦的状态管理库,也是 2021 年 Star 增长最快的 React 状态管理库。它的理念非常函数式,API 设计的很优雅,值得学习。
20多天前,遇到一个日程表的业务需求,可以动态增加列、对单元格进行合并,结合公司的jsp项目的已有功能完成单元格的增、删、改操作。进行需求分析整理后,经过了一番查找,发现React版本的antd的表格组件功能很强大,可定制程度很高,可以助我完成这个业务需求的开发。
《重新思考 Redux》是 rematch 作者 Shawn McKay 写的一篇干货软文。
因为本身数据没有类似id的唯一值,这里便不假思索的启用了索性作为key,渲染也就完成了,顺便也加上了添加和删除功能,一切都是那么顺利。因为需要编辑,这里及把最初的展示组件替换成了input组件,这里并没有使用受控组件,而使用非受控组件,监听blur后再进行数据更新上传至服务器,所以input只设置了defaultvalue值,然后测试,发现删除怎么也删不了第一行。如图所示:
javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性,精读系列也已有八期源码系列文章,分别是:
在 React 诞生之初,Facebook 宣传这是一个用于前端开发的界面库。在大型应用中,如何处理好 React 组件通信和状态管理就显得非常重要。
写到最后总结得差不多了,后续如果我想起还有哪些类库工具遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
PyCharm是一款功能强大的Python集成开发环境(IDE),它提供了许多有用的功能来提高开发效率。在本文中,我们将了解如何安装PyCharm和创建新项目,以及在PyCharm中编写Python代码的基础知识。
GORM(Go Object Relational Mapper)是一个用于 Go 语言的 ORM 库,它允许开发者通过面向对象的方式操作数据库,而不必直接编写 SQL 查询语句。GORM 提供了简单易用的 API,使得在 Go 项目中进行数据库操作变得更加高效和便捷。它的设计理念是将数据库表映射为 Go 的结构体(Struct),并通过方法调用来实现对数据的增删改查等操作,从而降低了与数据库交互的复杂性。
作为一名前端工程师,不少小伙伴对于 Redux 的概念、使用可能还是比较模糊,上手使用的心智负担也比较重!
上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好了吗?学的是知识,而用的是技能,看别人的用法就像刷抖音一样(哇,饭还可以这样吃?),你总会有新的收获。
领取专属 10元无门槛券
手把手带您无忧上云