reactdigest

星期日 06 晚上 十二月 8o 2024

RD#484 How To Improve Interaction-to-Next-Paint

RD#484 How To Improve Interaction-to-Next-Paint

[读在线](https://link.mail.beehiiv.com/ss/c/u001.3mTwTBe\_1W4fLvRj4unk8hErXB2vrDHg5DYaj51xP1UzLl1hlsBX6ufCpWakhKXg8vqTWwAmyI H2C_ORln-pSIEgcLjbXI0yWTIlyvg8sbGyCiuwgfb20pn2NR99i-4iWnnmGc_iEdRbBOcs0d33okWsz_mtsArRcJvlTvVrHkyh91gG_XPYVU4Q0JMV464L_m6tF MJsz45yBrLP-01rKLlWQ9jjmXYYRoUV0k0Kv8uH_WGZicJy0gYG0Ne4M_nFaxdjkJ_z6QfByzXktn_ijGCaaC8DiQoqVVjMiiQpM2kRyU5GzWX8KW52hgF3wGEe第885章fRwzkRH8BZDjXUdRGBRHsZbqIVsmSd_Da6XlMOUuoglsh20H8wEwYwTAjPmyJNaKwB3kqJMvbRb0urLBpRZt9xAmXMqxVAsvOeddJLIvdkEkpRig_Wvqnu0le3 XWg0vIFQ7EUSdQdD12pwQHgGb1BYjYk-vorBQuZAs6rKWXB2PqA8yDzDU-YxPQwfqGpwK17iLIsCAcrF3FKptU8Thun9t18tii7rh0yfR_aETrm7dUUVw0By9_D SVN2Sr7lnFCyK2zmNDlwKgybTRPgbuaQEh2otHj9TgIPbayWvmO2NN6XLtbtGJ-xhUL2YXJPb6ENysl516YSwlnQHNclM6s1fZMOfHRPO6BBJ-AfVJWj0L7AXFH tc9hXFdPnnIQl1SZtJr9uYxFg4bEkpCWZ-vBOGXHIyw/4c4/RRfexmGfRfOh6gu9b2CJxA/h0/h001.VP_2wg3WJ_uP2ytbjGQsG1K5Al7ySRVVqgPX_EEjkNg)

[测试已死。细致的AI是在这里。](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqa3JwGFc7SR4VfYwt4lGl6DvHowMd5fyCwFZ9VlDqtjEN84KnUybgtTkTpy1LBbIcbfcaqZo 5OvSOZFSQbEf57gfbUQivOUBCn85E_j8R2DODzK3J8S_5cXlNr_Ik3QLSA/4c4/RRfexm GfRfOh6gu9b2CJxA/h1/h001.nwxC8gZWW6zBC_ANQxIb6jnKx6DOyoFk45EFy5yoixw)
由精心赞助

Meticulous AI 是一款自动创建和维护不断发展的 e2e UI 测试套件的工具,该套件涵盖应用程序的每个角落,无需开发人员进行任何干预。在 GitHub 首席技术官 Guillermo Rauch(next.js 作者)、yc 和其他人的支持下,它是从 Chromium 级别构建的,具有确定性调度引擎 - 使其成为唯一消除碎片的测试工具。

[如何改进与下一个绘画的交互](https://link.mail.beehiiv.com/ss/c/u001.K5pvBZzC3tJzgxtI00uQCOV1ZytzmUUHYXTXw2bsr8cp _3odOMjV8H-EEgVPfHauZfUIomRNb9ejNlq4fQ_aXzpPAfPjHMaFG8VLq2MUvMFR9WdUCDDNINneBMrZOqYi4cRrPimU868fpN4qhNN_tPjYd3Wz MjJHNXRQDEkeujGDa_itCucHKn3cfCZaIDv_KZDQd1ejRTn5FEABk0fxYqBQQwUc_gYAM3f0Q8BOn1RO0tIF6EDaLDwQuuBQeeGHvZnALim1Dppe 9Y6hMi_IGLC2QHQHWhKRtPSgUsiscdw/4c4/RRfexmGfRfOh6gu9b2CJxA/h2/h001.tzNpVdrvDGmdnJNxTNPxX_layOP2BwhKTNaD_MR53gs)
16 分钟 雅各布·格罗斯 (Jacob Groß)

本文提供了有关优化 React 应用程序以获得更好 INP 性能的详细指导,INP 性能现在是 Google 搜索排名所使用的一个关键的 Core Web Vital 指标。

[更好的代码渲染通过虚拟化](https://link.mail.beehiiv.com/ss/c/u001.umaHyWnMavjtWWn\_0mUAO8skwkp8U-l-168vCCs00lvD3MyNugi6lYeZDZRCQbH NJ47uf7ysJV1wuvys79L9DfnswDZmaYe0YLTDsRiUcbCVxx3dUiOXC9rNrhSPK7i07QPsOlmtaXTdnKggrps6w2JAGPx9rez9HMQw5UwW824MJ79ZA5M-qlv Tq-lrK0hE-LBEHSJm_YgRejzDaYFJZeMaDpyV8rlnedNwFWE3fIKcjY3E4eNIB-D_jrPGADL2jslZveyc3x1wAU3CFHP-jTNN59oi5kya3fdKaK_txgbFSBt -z9T86pW_HwBWSNSyJG8cUor-3qBTWwHE5g6ddA/4c4/RRfexmGfRfOh6gu9b2CJxA/h3/h001.D0LuKT6FU7njiQAq9lOAnm0CEpSLElHPQadk1_1xrRo)
15 分钟 尼古拉斯·德舍尼斯 (Nicholas Deschenes)

在收到有关 TypeScript checker.ts 文件崩溃的反馈后,Codecov 重建了代码渲染器以处理极大的文件。团队发现主要的性能瓶颈是 React 对大量元素的渲染,而不是代码标记化。

[React编译器在真实环境中的表现如何代码](https://link.mail.beehiiv.com/ss/c/u001.H7TV3nVHQvyVqifzthtBOQsPoSRdI-81EfXldG07AwaTPFNqxSNVvV3CzSoXsI9Ka-k8wk6 z13GDaKnKlgCHBHwcewzsG6fAhaRjWF3-xKJMRfDNp_LNmqq7b5VGsikj0JWpmX5OeBmFHKuE_YgD7TheL1_MJfuDCKjdQh8QKwqKNiCk_pThxq-ARgU5 ncgGkGEfsbV5kHifAr8sgQFatpEe7OMEziha6p3arIRjYEnJitiIR-ZIas_OxjMBCOqT4kIF4IeuenPfmui-AISHK5S17rCoXxbkwHf39XYuWVOQToDlT pZAqsgdzQ-xH11Vkc4Ffs9Q71r77psKgB-fWA/4c4/RRfexmGfRfOh6gu9b2CJxA/h4/h001.Y9tgfp9vqSDCooGMqQAIicQGLswv—NqPXNCgW_TwZY)
20 分钟 纳迪亚·马卡列维奇

Nadia 的文章研究了 React Compiler——一种新工具,承诺通过处理记忆和重新渲染来自动优化 React 应用程序性能。

[反应数据获取模式](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqfQAf\_qUprM09yoMPtF27zJJSmvhTi4foivEuFKnWV fHVhTLu9xE_pDx3Gx3aQpxtLk7LHD3bK81HUR-kxn063XtNoreqbYLY1PM5WBAc-SPPh7__wuaVGCbMBgq6nQPm4xyy-Ey1PY_GKO0noVX1LRM0XK PcEsCnLdcWS93hgEP2VoVjxm4XHLn8Kw_bDRnpeb2iRRagwQwxgvCT6TqgfjsGjPBTTu5GL4Ku7kdrthSVqJPckpBVO1xiE17MFNmWFhCp7liGDPL uLgVvQz_6hAhGOBnsMDPv_nqcy4ZFdYt/4c4/RRfexmGfRfOh6gu9b2CJxA/h5/h001.QQVmtwWI8z8FSl48I-LB8agg0MAJQ7Hdocb_H0FPVRU)
5 分钟 罗宾·维鲁奇 (Robin Wieruch)

本文讨论了 React 应用程序中的各种数据获取模式,重点关注顺序数据获取、并行数据获取和预取策略。

[清理 React 中的死文件项目](https://link.mail.beehiiv.com/ss/c/u001.HjBpxMuZJ3Xr2cyiPk5rUUGIIkmF21KfvxJ7ERHvwYXn\_OlBT8QbcvPXhGWYUU0 OLS3G4CQZf5ZLGLygptbrCUgo9jFC21L2um4cCXeBESBoJAsWbcfRz1GLKB5A_R25eS_JW5Ps9KYAL6uGs69RywxkGk93374E0q6RqPkuDcvqkGx4 90b9ZdqKn1rjTz56Q4ffGFwD3VnNvC1s4yUa_izV54kk1yh8b9tcw6IVTNwDcrLCVM5h4l74_-UKQvkYoJxWDX0jg3-3h24wgR0KqLA40BpFGt83 xJXsrIXGNaE5lJLlEkaO2X_STujVkIB3/4c4/RRfexmGfRfOh6gu9b2CJxA/h6/h001.hrhsOIi_uo8RfzswwyXnEZtvdB4oyrLkLiN59JQUUj0)
1 分钟,埃德文斯·安东诺夫斯

了解如何使用 knip 等工具识别和删除 React 代码库中未使用的文件。简化您的项目并提高可维护性。

最后,[React v19 已发布](https://link.mail.beehiiv.com/ss/c/u001.UBh74i5ibvpiWu-3SxqXvuMRDy3w85kWf16GtEwWeEANfNF03oThDKm-x Ebk1yJnwXBgy3zQtuJCnGNejm-GfEg02jW_l-9Q25izKRkYlDhBGWE809jjBQ5a2e1s4ierjvu0ZJo2zOxn0vM33qEwAmVxNB0bTJ44fROIa Zo3lqJR_vK2OO-Bxf8g8jJAd84PQVy0fjhQedWncj83kadxlKBDtQSko7ZPgS6iU8uX6Tpy703YNAgy3FSe2Sh8Yv0SO-3tnklB77_GUdX5 lLdc2TT_SBd8IswhWnSHhQDC3d8/4c4/RRfexmGfRfOh6gu9b2CJxA/h7/h001.mP91LQL4vlHmKtYmKvdeTAxBAdApk_8_IITbuwWueF4)。

发布者