探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。
文章推荐：本期为大家带来对于 React 框架探讨的《因为React，你遗忘或从未了解过的事物》，从0到1创建一款响应式框架，通过这种方式来学习现代化框架的原理、prettier 深度优化背后的事情、css 小技巧，通过css 给两个元素间画连接线
工具推荐：好用的爬虫工具，支持现有主流内容网站--MediaCrawler、强大的数据库实体关系（DBER）在线编辑器--drawdb、AI画图 prompt 词参考 --prompt-marketplace、无需代码即可完成对数据库管理的应用生成工具 --dashpress
行业新闻：主流框架的 Signals 被纳入 JavaScript 标准提案了、 Vision Pro 版淘宝，用户可以进行何种交互！如果觉得有收获，欢迎大家点赞👍🏻订阅
文章推荐
因为React，你遗忘或从未了解过的事物
这篇文章探讨了React作为一个前端框架已经不再是最佳选择的理由，并指出了其设计和技术上的局限性。React是为了解决特定大型组织的问题而设计的，但随着时间的推移，它的架构决策逐渐成为了迭代的障碍。其次，React强化了一个观念，即需要为特定框架定制开发包和库，这限制了开发者利用广泛的JavaScript库的潜力。在性能、代码简洁性和灵活性方面，React 与一些现代前端框架存在一定的差距。特别是在状态管理和组件生命周期的处理上，React的规则和复杂性导致它与通用Web平台的兼容性较差。React 的 Hooks 虽然在引入时革新了状态管理和逻辑复用的方式，但在 React在渲染优化方面需要频繁的微管理，如对useMemo和useCallback的复杂区分和useEffect依赖数组的精细控制，而这些在其他框架中已被更智能的自动处理所取代。
👉原文链接👉🏻： Things you forgot (or never knew) because of React
通过 DIY 来学习现代 JavaScript 框架的工作方式
这篇文章详细讲述了如何一步步基于响应式（reactivity）来进行DOM更新的设计思路来构建一个现代的JavaScript框架。首先，使用Proxy对象创建响应式系统来监控状态变化。然后，通过将渲染函数绑定到状态变化上，实现当状态更新时自动重新渲染UI。此外，通过使用<template>标签和DOM克隆技术优化DOM操作，减少性能消耗。最后，确保每次状态变化都能触发正确的界面更新，完成响应式框架的构建。
👉原文链接👉🏻： Let’s learn how modern JavaScript frameworks work by building one
Prettier 性能深度优化
作者Fabio Spampinato从零开始重写了CLI，以便从性能角度考虑进行优化。文件查找优化主要通过并行处理和预先过滤非目标文件来实现，这样可以缩短文件扫描的总体时间。至于配置文件解析的优化，则包括了缓存已解析的配置以减少重复计算，以及优化配置继承逻辑以提高处理速度。通过这些策略，Prettier的CLI 能更快地响应用户命令，特别是在大型项目中，这些优化带来了显著的性能提升。
👉原文链接👉🏻： Prettier's CLI: A Performance Deep Dive
使用 CSS 绘制连接元素的线条
这篇文章探讨了如何使用CSS锚点定位（CSS Anchor Positioning）来连接网页元素。作者通过实例展示了如何用CSS而非大量JavaScript来连接不同列中的单词，形成有趣的词组。具体方法包括使用CSS的anchor-name和anchor()函数定位连接线，以及利用CSS网格布局和数据属性来管理元素。这种方法减少了JavaScript的计算需求，将更多的布局责任交给了浏览器。
注意：需要使用 Chrome Canary 来查看演示效果
👉原文链接👉🏻： Drawing a Line to Connect Elements with CSS Anchor Positioning
工具推荐
MediaCrawler
利用 playwright 搭桥，保留登录成功后的上下文浏览器环境，通过执行JS表达式获取一些加密参数，从而爬取对应网站的数据。目前能抓取小红书、抖音、快手、B站、微博的视频、图片、评论、点赞、转发等信息。
附：
- 该项目使用了 playwright，对 playwright 感兴趣的同学，可以查看playwright 使用指南
- playwright 安装第二步需要下载 Chromium 内核文件,这个过程比较慢。可以先手动下载好这些文件,然后直接复制到对应的目录,跳过第二步的下载过程。能够加快安装速度，避免失败。不同系统对应的安装路径如下:
- Windows:
%USERPROFILE%\AppData\Local\ms-playwright- macOS:
~/Library/Caches/ms-playwright- Linux:
~/.cache/ms-playwright
drawdb
这个开源项目是一个免费、简单、强大的数据库实体关系（DBER）在线编辑器，无需注册即可直接在浏览器中使用。它提供了直观、可视化的操作界面，用户通过点击即可构建数据库表和导出建表语句，还可以导入建表语句，实现可视化编辑、错误检查等。支持 MySQL、PostgreSQL、SQLite、MariaDB、SQL Server 共 5 种常用的关系数据库。
dashpress
无需编写一行代码即可生成强大的管理应用程序
prompt-marketplace
适用于多个平台的免费AI图像提示词。每天更新提示
行业新闻
JavaScript 原生 Signals 标准提案
关于 Signals 标准提案，该提案与 Promises/A+类似，侧重于使 JavaScript 生态系统保持一致。如果这种对齐成功，那么一个标准可能会出现，该标准基于这种经验。几位框架作者正在此处合作共同制定一个可能支持其响应式的通用模型。当前草案是基于 Angular、Bubble、Ember、FAST、MobX、Preact、Qwik、RxJS、Solid、Starbeam、Svelte、Vue、Wiz 等作者/维护者的设计输入...
用 Vision Pro 逛了一下午淘宝，我发现了一种很新的网购方式
未来的网购会是怎样的？ 足不出户，就能看见商品的 3D 展示；不仅能把产品放大看细节，还能还原 1:1 的真实比例，放在房间的任何角落看看尺寸是否合适；甚至能把毛坯房用虚拟家具堆满，在装修之前就能确定新房的装修风格。
附：作为一个前端开发者，对于这种新的交互模式很感兴趣。这里给大家推荐一款 RN 的 Vision Pro 开发框架 -- react-native-visionos 那么问题来了，环境搭好了，请问 Vision Pro 去哪里领呀？
