在CSS中，我们通过selector（选择器）选择样式片段：.title { color: red; }简而言之，选择器title对应样式color: red;换个角度，我们也可以说：关键词.title对应数据color: red;在我们生活中，还有什么东西依赖这种对应关系呢？一个很显然的例子：搜索引擎。在搜索引擎中输入关键词，搜索引擎经过检索，返回关键词对应的数据.既然道理都一样，那能不能用
昨天一个小伙伴发了一个Demo给我，让我解释下原因。我一看，好家伙，小小一个Demo，知识点囊括了：Hooks的闭包问题state是如何组装的相信看懂这个Demo，对函数组件会有更深的认识。让人懵逼的DemoDemo包含一个按钮、一个列表。<div className="App"> <button onClick={add}>Add</button>
React这几年一直在完善的并发模式主要由以下两部分组成：基于fiber实现的可中断更新的架构基于调度器的优先级调度可以说，从16年开始重构fiber架构到今年底（或明年初）React18发布正式版，这期间React团队大部分工作都是围绕这两点展开的。如果现在告诉你，React呕心沥血多年实现的优先级调度，浏览器原生就支持，会不会很惊讶？文章参考Building a Faster Web Expe
遥想数年前的一次面试，面试官问我：promise有什么缺点？真是百思不得姐啊...答案是：promise一旦初始化，就不能中止。这是由promise的实现决定的。AbortSignal的出现使promise从语义上变为可中止的。并且，只要符合规范，所有异步操作都能变为可中止的。AbortSignal是什么AbortSignal是个实验性API，不过兼容性还不错，而且polyfill实现起来也不复杂
这两年有不少朋友和我吐槽React源码，比如：调度器为什么用小顶堆这种数据结构，直接用数组不行？源码里各种单向链表、环状链表，直接用数组不行？源码里各种位运算，有必要么？作为业务依赖的框架，为了提升一点点运行时性能，React从不吝惜将源码写的很复杂。在涉及状态、标记位、优先级操作的地方大量使用了位运算。本文会讲解其中比较有代表性的部分。学到之后，当遇到类似场景时露一手，你就是业务线最靓的仔。几个
昨天在网上愉快冲浪时，看到一篇框架测评，效果属实爆炸。作者用React和Solid.js开发了同样的Demo。为什么用Solid.js和React对比呢，让我们看看Solid.js的API：HooksContext、Portal APIError Boundaries不能说和React多雷同，只能说一摸一样吧。而且Solid.js也用JSX描述视图，所以一个React应用要改为Solid.js应用
这么多年大家习惯了使用JSX描述UI的React。甚至部分场景下使用Vue时也会选择JSX而不是模版语法。好像一切就这么自然而然发生了。然而，如果梳理历史的走向，模版语法才是更自然的选择。接下来让我们看看React选择JSX背后的逻辑是什么？这是React如今生态繁荣的关键因素么？本文参考HTML模板语言纵览模版语言简史前端在有足够复杂度之前都是作为后端MVC框架的V（view，即视图层）存在的，
React一直被吐槽官方文档对新手不友好，而且自从v16.8出现Hooks后，Hooks逐渐成为React主要发展方向，新特性都会基于Hooks开发。但是当前官方文档还是基于class component讲解。所以从去年10月开始，React团队的Rachel Nabors开始推进新文档的编写。关于Rachel Nabors的经历，可以参考我之前写的一篇文章从失学二次元少女到React核心成员时隔
Svelte问世很久了，一直想写一篇好懂的原理分析文章，拖了这么久终于写了。本文会围绕一张流程图和两个Demo讲解，正确的食用方式是用电脑打开本文，跟着流程图、Demo一边看、一边敲、一边学。让我么开始吧。Demo1Svelte的实现原理如图：图中Component是开发者编写的组件，内部虚线部分是由Svelte编译器编译而成的。图中的各个箭头是运行时的工作流程。首先来看编译时，考虑如下App组件
前端框架中经常有将多个自变量变化触发的更新合并为一次执行的批处理场景，框架的类型不同，批处理的时机也不同。比如如下Svelte代码，点击H1后执行onClick回调函数，触发三次更新。由于批处理，三次更新会合并为一次。接着分别以同步、微任务、宏任务的形式打印渲染结果：<script> let count = 0; let dom; const onClick = () =&
大家好，我卡颂。经过React18工作组几个月工作，11月16日v18终于从Alpha版本更新到Beta版本。本文会解释：这次更新带来的变化对开发者的影响如何安装v18 Betav18稳定版何时会来带来的变化经过与社区不断沟通，Beta版将有如下三个API变动：useSyncExternalStore将替代useMutableSource 用于订阅外部源，见：#86讨论用法类似如下：im
相信很多关注React进展的朋友都了解Concurrent Mode，他是渐进升级策略的产物。由于策略调整，根据What happened to concurrent mode?，在v18中将不会有Concurrent Mode了。没有Concurrent Mode，那该如何使用并发更新呢？一句话总结：在v18中，不再有三种模式，而是以是否使用并发特性作为是否开启并发更新的依据。更详细的解释，让我
React可以看作是三部分的组合：scheduler，调度器，用于调度任务reconciler，协调器，用于计算任务造成的副作用renderer，渲染器，用于在宿主环境执行副作用这三者都是独立的包，我们项目里引入的ReactDOM可以看作是以下三部分代码打包而成：scheduler的主要逻辑reconciler部分逻辑ReactDOM renderer的主要逻辑本文会教你如何基于官方的reconc
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
