用 400 行代码构建您自己的 React.js
React v19 测试版已发布。 与 React 18 相比，它提供了许多用户友好的 API，但其核心原理基本保持不变。 您可能已经使用 React 一段时间了，但您知道它的幕后工作原理吗？ 本文将帮助您构建一个大约 400 行代码的 React 版本，该版本支持异步更新并且可以中断——这是许多高级 API 所依赖的 React 核心功能。 最终效果Gif如下： 目前它托管在我的 GitHub 上，您也可以访问在线版本来亲自尝试。 在深入探讨原理之前 迷你反应.ts，了解 JSX 代表什么很重要。 我们可以使用 JSX 来描述 DOM，并轻松应用 JavaScript 逻辑。 然而，浏览器本身并不理解JSX，所以我们编写的JSX被编译成浏览器可以理解的JavaScript。 我在这里使用了 babel，但是当然你可以使用其他构建工具，它们生成的内容将是类似的。 所以你可以看到它调用了 React.createElement，它提供以下选项： type：表示当前节点的类型，如 div。 config：表示当前元素节点的属性，例如： {id: “test”}。 Children：子元素，可以是多个元素、简单文本或由React.createElement创建的多个节点。 如果您是经验丰富的 React 用户，您可能还记得在 React 18 之前，您需要 import React from ‘react’; […]