倾听风的声音，跟随风的脚步！

pnpm是一款当代备受关注的 新兴(问题较多) 包管理工具，使用过的同学们都会被它极快的安装速度、极少的磁盘存储空间所吸引！感兴趣的小伙伴赶紧点击学习吧。

浏览器每一帧需要执行的任务切片调度isInputPending参考文档：https://wicg.github.io/is-input-pending/在运行需要显示某些内容的脚本时，开发人员今天需要做出判断。如果脚本可能计算很长时间才能运行并且用户在发生这种情况时进行了某种输入，那么浏览器将需要等到脚本完成后才能分派输入事件。这会造成在响应输入事件之前有很长的延迟，用户体验并不是很好，因此开发人员通常会将长脚本任务分解成更小的块，以允许用户代理在块之间调度事件。每次脚本..

即便 React DOM 和 React Native 渲染器的区别很大，但也需要共享一些逻辑。特别是协调算法需要尽可能相似，这样可以让声明式渲染，自定义组件，state，生命周期方法和 refs 等特性，保持跨平台工作一致。为了解决这个问题，不同的渲染器彼此共享一些代码。我们称 React 的这一部分为 “reconciler”。当处理类似于 setState() 这样的更新时，reconciler 会调用树中组件上的 render()，然后决定是否进行挂载，更新或是卸载操作。Reconciler

const pure = (a:number, b:number) => a + bconst impure = (c:number) => window.foo.number + cBundlers(捆绑器)通过尽可能多地评估提供的代码来确定模块是否纯。但是在编译时或构建时的代码无法进行评估。因此，假设具有副作用的包无法正确消除，即使它们没有访问。因此，捆绑器现在接受模块package.json文件中的一个键，允许开发人员声明模块是否没有副作用。这样，开发人员可以选择不进行打.

概述React 18 将添加新功能，例如startTransition、useDeferredValue、并发Suspense语义SuspenseList、 等。为了支持这些功能，React 添加了协作多任务、基于优先级的渲染、调度和中断等概念。这些功能通过更智能地决定何时渲染（或停止渲染）应用程序中的子树来解锁新的性能和用户体验。这些功能的代价是需要以一种能够适应这些新概念的方式编写代码。为了帮助用户了解他们的代码是否兼容，React 添加了一组开发警告和行为，称为StrictMode，它警告

在 React 18 中，我们宣布了一个新的 startTransition API，并分享了它解决的问题的高级概述。在这篇文章中，我们将深入研究一个真实示例，该示例使用大型开源 React 应用程序通过 startTransition 加速缓慢更新。tl;博士如果您不想阅读整个页面，这里有一些视频可以显示在快速和慢速计算机上的区别。快速计算机：无 startTransition快速计算机：使用 startTransitionScreen.Recording.2021-06-22.at.

概述在 React 18 中，我们引入了一个新的 API，即使在大屏幕更新期间，它也有助于保持您的应用程序响应。通过将特定更新标记为“转换”，此新 API 可让您显着改善用户交互。React 将让您在状态转换期间提供视觉反馈，并在转换发生时保持浏览器响应。真实世界示例：为慢速渲染添加 startTransition这解决了什么问题？构建流畅且响应迅速的应用程序并不总是那么容易。有时，诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。

我是 Chris Harrelson，他是 Blink 中渲染（将 HTML 和 CSS 转换为像素）的工程负责人。八年来，我一直深入研究 Web 上的渲染性能，我的个人目标是尽我所能更快、更轻松、更可靠地在 Web 上提供出色的用户体验。我很高兴向您介绍我们在那段时间为构建新的、尖端的 Chromium 渲染引擎架构所做的工作。为了实现这一目标，我们付出了巨大的爱心努力，我希望您喜欢听到它！2021 年，我们将基本完成该架构的设计、构建和交付过程。让我们称之为 RenderingNG，因为它是真正的下

生命周期图谱https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 注意:下述生命周期方法即将过时，在新代码中应该避免使用它们： UNSAFE_compone

下面截图是上面代码createElement后的产物，本质上就是个React Object（ extends Object）：这些属性的含义如下： key: 组件的key，主要用在virtual dom上，compare diff和move element props：组件属性，来源于父组件或者HOC，或者类似的外部传递 ref：当前的dom引用 type: 组件类型 _owner: 是React Component，创建react component的..

为什么使用JSX？React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。React 不强制要求使用 JSX，但是大多是的时候，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 Rea

等宽字体（英語：Monospaced Font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体 (Monovolume.)。概要在传统西文印刷中，比例字体可以提高单词的可读性。但因打字机及早期的电脑画面显示等由于技术的局限，无法进行字母宽度的比例调整，因此将每个字符都制作成一样的宽度，从而形成了等宽字体。在等宽字体中，字母「i」、「j」显得两侧餘白较多，而字母「w」、「m」等的笔画显得相当拥挤。但是随着图形用户界面主流的更新和电脑技术的提高，处理比例字体的局限.

React v4以后，react-router 导出所有core组件和函数。react-router-dom导出了dom相关的组件，像Link(which renders an <a>) 和<BrowserRouter> (which interacts with the browser's window.history )。react-router-dom导出了所有的react-router的导出，所以正常来说使用react-router-dom或者react-native即可

自我理解的JavaScript异步概要

babel5 to babel6为什么要升级？性能提升：据说compile速度提升20%（但在测试后发现，速度慢了20%+）。可配置的插件：更强的灵活性，以及更简单的插件API。更简洁的配置。重大变化不再提供babel包 命令行工具由babel-cli包提供node api由babel-core提供polyfill由babel-polyfill提供.babelrc配置变化 移除“