25 天前 / 江米小枣tonylua
原文：https://flaviocopes.com/react-useeffect-two-times/ 在 2022 年 3 月发布的 React 18 的发布公告中，数量可观的新特性扑面而来。而对 useEffect() 的默认行为的改变，可能就此被淹没了。 如果你的应用在更新到 React 18 之后行为迥异，或许正是因为 useEffect() 默认变为被运行 2 次了。 虽然这种情况只发生在 development mode 中，但无疑每位开发者都会遇到。 另一个限制条件是 只在 strict mode 发生，但这同样是用 create-react-app 或 Next.js 所构建应用的默认选项。
28 天前 / 浪客书心
关注“脚本之家”，与百万开发者在一起来源 | 前端印象（ID：zero2one01）已获得原公众号的授权转载大家好，我是零一，react18 已经出来一段时间了，create-react-app 默认安装的 React 版本也已经是 18+，不知道有没有小伙伴发现自己有点看不懂 React 了？ import{useEffect,useState}from'react' functionApp(){ const[data,setData]=useState(0) useEffect(()=>{ setData(preData=>preData+1) },[]) return( {data} ) } 看一下这段简单的代码，页面最终展示的数字是几？ 是 1 这样吗？我觉得应该也是这样，可事实就是在 React18 里，这并不是预期效果...
35 天前 / 九彩拼盘
CareersAutomatic batching support in React 18ByAkshay MohiteinReacton March 7, 2022React 18 comes with automatic batching support for state updates. This helps in avoiding multiple renders for state updates in promises, setTimeout, setInterval, native event handlers in addition to react event handlers. Thus, we get performance improvement in our React apps out of the box because of automatic batching. What is (automatic) batchingBatching is the process of grouping multiple state updates into a single update.If...
37 天前 / 冷星1024
编译速度一直是困扰开发者的头等问题，现阶段大型 Taro 项目即使在增加了 cache-loader、thread-loader 等优化手段后，编译耗时仍高居不下。因此在 v3.5 版本中 Taro 重点对编译系统进行了重构，引入对 Webpack5 的支持，改善小程序 & H5 编译时的性能与体验。（除此之外，Taro 也正在落地对于 Vite 的支持，届时开发者将可以自由地选择编译工具。） 同时，Taro v3.5 还带来了兼容 React 18、H5 MPA 等新特性，欢迎各位同学升级试用~ 一、编译提速—为了改善编译性能...
40 天前 / 冷星1024
大厂技术坚持周更精选好文 什么是虫洞状态管理模式？ 您可以逃脱的最小state共享量是多少？ 保持你的state。尽可能靠近使用它的地方。 如果有一个组件关心这个问题，使用它。如果有几个组件在意，就用props分享一下。如果很多组件都关心，把它放在context中。 Context就像一个虫洞。它使您的组件树弯曲，因此相距很远的部分可以接触。 利用自定义hooks使这变得容易。 一个例子构建一个点击计数器。虫洞状态管理模式最好通过示例来解释 CodeSandbox( 示例代码) https://codesandbox.io/s/wormhole-state-pattern-5-j4w5efile=/src/App.js 步骤 1 我们从use...
43 天前 / 冷星1024
大家好，我卡颂。 作为前端，想必你对防抖（debounce）、节流（throttle）这两个概念不陌生。 在 React18 中，基于新的并发特性，React 原生实现了防抖的功能。 今天我们来聊聊这是如何实现的。 useTransition DemouseTransition 是一个新增的原生 Hook，用于「以较低优先级执行一些更新」。 在我们的 Demo 中有 ctn 与 num 两个状态，其中 ctn 与输入框的内容受控。 当触发输入框 onChange 事件时，会同时触发 ctn 与 num 状态变化。
51 天前 / richardchen
04 月 21, 2022 如何打造一款简单易用的 React 状态管理工具 React 的状态管理已经是一个老生常谈的问题了。从 React 内置的 Context API 和 Hooks API，到第三方库如 Redux、Mobx 和 Recoil，再到二次封装的库如 Rematch 和国内用户熟知的 dvajs 等等。可见社区对状态管理是如此的纠结，如果你也面对同样的纠结而无从下手，下面我将为你介绍如何基于 Redux 二次封装一个轻量级但是简单易用的状态管理工具。 内容导航为什么不用 Rematch 或 dvajs 声明式状态管理文件 model.ts 解析 model 文件并创建 Redux Store 实例 index.tsparseModel.tsconfigureStor...
52 天前 / 冷星1024
我们知道，Hooks 使用时存在所谓的「闭包陷阱」，考虑如下代码： functionChat(){ const[text,setText]=useState(''); constonClick=useCallback(()=>{ sendMessage(text); },[]); return; } 我们期望点击后 sendMessage 能传递 text 的最新值。 然而实际上，由于回调函数被 useCallback 缓存，形成闭包，所以点击的效果始终是 sendMessage('')。 这就是「闭包陷阱」。 以上代码的一种解决方式是「为 useCallback 增加依赖项」： constonClick=useCallback(()=>{ sendMessage(text); },[text]); 但是这么做了后，每当依赖项（text）变化...
67 天前 / Ryan众乐
欢迎和号主【前端点线面】进群盘算法，此外本号干货满满：14 个门类（100+ 篇原创）内容（又干又硬）、《前端百题斩》pdf（助力薪资 double）、20+ 篇思维导图（知识系统化、记忆简单化），进摸鱼群。在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。 React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。
71 天前 / 冷星1024
关注公众号前端开发博客，领 27 本电子书 回复加群，自助秒进前端群 前言 React 18.0[1] 已经发布两周了 所以这两天抽空重新完整的过了一遍 React 我将所有内容整理为以下 86 张脑图，方便以后查阅 附原图和源文件： 原图和源文件（包括 xmind 和 pos 文件）已上传 github[2]，如有需要可自行下载 86 张脑图 1. 安装 1.安装。png2. 核心概念 JSX 简介 2.1JSX 简介。png2.2 元素渲染 2.2 元素渲染。png2.3 组件 & Props2.3 组件 & Props.png2.4.1State & 生命周期 2.4.1State & 生命周期。
77 天前 / Ryan众乐
今天我们来聊 React，React 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React，它的生态功不可没。 今天的文章，我们我们将从状态管理、样式和动画、路由、代码风格等多个方面来看看 React 最新的生态，希望你以后在做技术选型的时候能够有所帮助。 创建 React 项目对于大多数 React 初学者来说，在刚刚开始学习 React 时如何配置一个 React 项目往往都会感到迷惑，可以选择的框架有很多。React 社区中大多数会给推荐 Facebook 的 create-react-app (CRA)。
85 天前 / 九彩拼盘
大家好，我是这波能反杀。一个对 React 有深入研究的前端打工人。 React 18 正式发布啦，是时候卷一波新知识了。接下来的几篇文章，我将跟大家详细的分享 React 18 每一个新特性。有兴趣跟我一起玩的可以关注我一波。 在新的官方文档中，我们发现 hooks api 新增了一个奇怪的新 hook useId。 constid=useId(); 这个 hook 有什么用呢？ 在之前的版本中，我们可以使用 React 进行服务端渲染（SSR）。在开发模式上，我们可以在客户端与服务端共享同一个 React 组件。但是，这里就会有一个小问题。
89 天前 / 九彩拼盘
作者 | 肖鹏前言作为 Web 前端开发人员，我们日常使用任意一个前端 UI 库时，我们希望它的组件文档页面有提供在线编辑功能的交互式演示，帮助业务团队更直观的理解组件库的使用方法。 在 FreeWheel，UI 开发都会使用前端架构团队开发的一个闭源 React 组件库，也被称为 Spark UI，同时为便于业务团队日常开发参考，我们还在公司内部私有网络中维护着组件库文档的展示网站 ( 背后技术为 Next.js)。 与其他的 UI 文档类网站类似，Spark UI 的每个组件的文档页面以 MDX 文件的方式维护。
90 天前 / 九彩拼盘
翻译自：https://github.com/mithi/react-philosophies[1] 2.5k star 原文作者：mithi[2] 已获作者授权 概要介绍最低要求面向幸福设计性能优化技巧测试原则 0. 介绍《React 开发思想纲领》是： 我开发 React 时的一些思考每当我 review 他人或自己的代码时自然而然会思考的东西仅仅作为参考和建议，并非严格的要求会随着我的经验不断更新大多数技术点是基础的重构方法论，SOLID 原则以及极限编程等思想的变体，仅仅是在 React 中的实践而已 你可能会觉得我写的这些非常基础。但以下示例都来自一些复杂大型项目的线上代码。
91 天前 / 冷星1024
今天看了下 React 的类型定义，也就是 @types/react 包下的 index.d.ts，发现了一些有趣的写法。 这篇文章就分享下这些写法，估计大部分人都不知道： 提取可选索引的值首先，我看到了这样一段类型逻辑： 这段逻辑就是取索引类型的 ref 索引的值，但是是通过模式匹配的方式，把提取的类型放到 infer 声明的局部变量 R 里返回的。 简化一下就是这样的： 提取 Props 的 ref 索引的值的类型返回。 我在想，这么麻烦干什么，直接 Props['ref'] 不就能拿到 ref 索引的值么？ 于是我就改成了这样： 然后试了下： 不对呀，人家这是可选索引...