reactdigest

星期日 07 晚上 十二月 22o 2024

RD#486 (React) Things I Regret Not Knowing Earlier

RD#486 (React) Things I Regret Not Knowing Earlier

[读在线](https://link.mail.beehiiv.com/ss/c/u001.3mTwTBe\_1W4fLvRj4unk8hErXB2vrDHg5DYaj51xP1XYEuFVChJelSuJ5XoBpKBQBv-WSogMBcQBH pVQzmJwNCxa6jGTbadJe_7aLWLbdXQGlpGh2zapkaosvs_YDh90duACnGsj3toBb6DCBgY1unmGSA0gd0nRwdwPGp2lIFYK7ou_VWmIVaKx863ESxHgiJfAtCuZkz 0ZtfkziymMN8aPj_rlgdv7BBrPd3Z3FybY2Iio_CSTPHEgAFVH2DWKAVu_o2sCo4PC07I6-MpJ3XMD-ValrwBQEdJD6d3guMs8TLYx3YVuTBkJLx7TnCSNFmY28OW A6cqfqH0CWEemtvmfhdNRk_WZMCBOMCzb2KJc9stQIn-LSyN_3_PeThWbjlPPcQK1f1o1M_TS1sevMKSTsyA1wAvS1px0uvb5axcI6r-qbWRyPFMn8eN4WQV3q_xeU xo_UcRp7zdupmecYXNcLJHofBRkRatXv_oi1sQMHZoHpKsTmoFrlpOL5OvyjQ5R04JkUbAClDbeVvYgSJEh7BnqCW46z-HKuOniBAQEstxvdLDDgV0wCUK2iWqn4N c48sVDsfT4rFHYk8K_8yNX338gaXQn966G6_BqUDD2t7b8tYMcMKmaAOOHhDmQK81AoLYX-cQ6Ar7AVQttT0lOkf4Nhbc1j45VgkLPMpH5hwiSIOV_NY8vkvEVSYAVR 5bQnP71tWnDjgi7JatV8qP3fddWxTTA55DEO5nnXk9pSjWGXEZyds2z7rr3KfD6TgCNCuwyyHSu3BvUI-6q-5GeODJEPvh8OlFr78JdoVeT54CufIb7FJfI34AWBh xlzIt9ck_zL8P0ZvCTyNA-IBfof5YVEfQ2KJyRiUdcnLBo/4ci/4Se23ohGSK-4z8GSycWJsg/h0/h001.NlHy4yWcr2Mjy5HmcOo5MUSnWsYxtbA_YoXBzoGU0yQ)

你好,👋

这是 2024 年最后一份时事通讯。我将休假几周,将于 1 月 6 日回来。明年已经计划了一些令人兴奋的事情。

今年年初,我打算将时事通讯移回我自己制作的电子邮件服务提供商。这将使我能够更好地控制交付能力、外观,并且应该改善我的策展和发布流程。最后,时事通讯应该更好,并且应该可靠地到达您的收件箱(听起来很简单,但并不容易)。

其次,我想重点关注内容本身。让我知道您想阅读哪些内容,以及您是否想了解前端开发的其他一些领域。

最后,我希望接触到尽可能多的 React 开发人员。如果您喜欢这份时事通讯,请与您的(程序员)朋友和同事分享。这会有很大帮助。

[测试已死。细致的AI是在这里。](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqa3JwGFc7SR4VfYwt4lGl6BqJbWmR8Zr6peVAmAulyzAx6j18FNSq9WHzwlFlFYko39HgeM2 WqroLgOnA-NgNKtuzp4tf-DgVOEWVwRvFa5DXLsOCNqCDWRtzYUUGTVsKQ/4ci/4Se23ohGSK-4z8GSycWJsg/h1/h001.ei5T4-ERbc3jIsHGr8pIKOLTQiZ3zIJu8ajF1MH0RgQ)
由精心赞助

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

【我后悔不知道的事情较早](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqQtZUvbjz4EL00G6RqzzLjMH3fnchAx6UJqcCaTW5xEOMj-wK DEtbW_4mqrRqxuaTVjwOb9TRt-qaIS0iR3k_—dyzLGTKGyaGqtLckwNXbfFesjXFvx31QLbpcmQNwhzs82CRA1UtrKUSVQ_NZF85Qi0g6-vatGjRhO_M9 HSBXgB7MHqq68j8KpvCzFx7V1oHIQDWiOui3dtOFl5_O8Sx6UyI1_8sg6KBYiUX5WEBr2cexMLCjKcWcDla5XpCxBAyTzrzO8D8f843v1ypwJBE5VCHR0 1jK1tE31z4poF2mHksCILnn11SQpG0PbFH9nw/4ci/4Se23ohGSK-4z8GSycWJsg/h2/h001.rtbTf-c3Nsps_IaAeKGf4_whzNLuISXC01QQlj3vfvw)
7 分钟 Ndeye Fatou Diop

掌握 React 需要时间。但这些教训将使你避免我早期所犯的错误。继续编码,保持好奇心,并记住——你已经做到了!

[React 19 和 Web 组件示例](https://link.mail.beehiiv.com/ss/c/u001.KaMW3WmNMB7SepvbqFCmfaSOFJc2XPJZaMvVYObtcgO82reZ6TukooUk9hKejF mFRCKVBWwOS4Jh3vfqH5rOl2nc6gWBdZavokRAf_tYaMEHShhLbI5ut3Y05edibjxezKHuassEB6Pqp9Nz-Gag6CcPLnkIm65UuJ1yB3_oTLuA4zA peptZD-JceUSEHoMsITzaUo1UMg1DYsar8fETw19UuD4xvtAX7E2t-NPQ0mQJ6cPwsdoM5ERMex06e3ZeVe_BhOih1GYWtLDL091r8UL_JQSYWPEV XogI8jehvcHp3g5oYr2yzm-O6l1jBYlR/4ci/4Se23ohGSK-4z8GSycWJsg/h3/h001.pB2ZLgQLj0QvnnzloXF8SjsW_KagNNsMXAsLDkRsRPA)
2 分钟 Chris Coyier

React 19 有很多消息。它现在完全支持 Web 组件,在服务器端和客户端渲染中处理 props 都有明确的规则。具有原始值的 props 被渲染为属性,而非原始类型则被处理为属性。该更新实现了 React 和 Web Components 之间的无缝集成。

[使用 React 19 表单功能重构新闻通讯订阅表格](https://link.mail.beehiiv.com/ss/c/u001.UBh74i5ibvpiWu-3SxqXvmT1tfMGfxA3v\_DxMTfUzLX7uU9T39Xv282M7FB8iNPYKphU8l\_icsi7Y3\_lX r_BSltDC2n-pt4Wc_te8Rl3x-NxZN-yaUSDA9UZBsJ1vqpXD4Amt5DrOQaPQwsU8Mhwn0Bg8MSTUa3QXqmMQ1Hx7jhLU2nDnK9QXIRq9IkeiYlINitqzYyre2jp-DDMq IFMhCKq1Zexf5W0TRscCAABBV4r2hWyFnbscw5y5V0OnDLz23ETJvc9gOXLix7YIhpFqtAXYGDPkiZqxt7-7kWPsmYf2GUbmBtjGbpbW5AoI_MfjZW7k3OjGWvEAl0OE 7VuVgJ1sxstBZL_tKQERL49Rmu-BBXA5tM6F6p8N6K2DEUc/4ci/4Se23ohGSK-4z8GSycWJsg/h4/h001.P00I7RT-XGDHtLYuaIBWPViaYZXKptpGr5BQjQEIYHo)
20 分钟 Corina Udrescu

Corina 谈论了 React 19 通过“Newsletter Subscribe”表单示例中演示的新 useActionState 钩子实现的重大表单处理改进。此更新简化了表单提交、错误处理、成功状态和表单清除,从而使代码更加简洁。

[有效优​​化 INP 的技巧反应](https://link.mail.beehiiv.com/ss/c/u001.H7TV3nVHQvyVqifzthtBOQsPoSRdI-81EfXldG07AwZOFwDGBhdT\_EFTmyVOz4PIF2j4Qc uO42k9MDzi87fogNLaFMTdaDiOQmKBN9OY2M8WJCFGKuRams4P6lOnJVw54ZkHmBL_O6-20faGnmR78fdpWASNtoMbT0hry1fGL-fxyznDUGb0D6zbMOaj a-2qD3TYpbhZyDokuALFbERunxo_E2pCyFwgCOTGyAXuWGRXIG3ck4Mc28TDs_WlTp12TYpQv96rXRFEg3XdVR7JhO7qpJOtk7qoFOxSJHrAAW-ghwacn qz-I0m8wjysxBEPJr6RQFRDGd-EJpxKod1vTA/4ci/4Se23ohGSK-4z8GSycWJsg/h5/h001.atVS0ADVryWo9AEg-_m-OPkWVYZnLCMu0WPsBcieVhs)
9 分钟 米哈尔·马图什卡 (Michal Matuška)

主要建议包括减少 DOM 大小(使其保持在 2,500 个元素以下)、将组件拆分为简单版本和扩展版本、利用 React 标签进行选择性渲染、避免服务器端渲染期间的水合错误,以及仔细管理 useEffect() 挂钩。

[您可能不需要 React Form库](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqfQAf\_qUprM09yoMPtF27zIaU2ypwQCX\_03Aa1 UJ9ogORgGNsrQhHskW2OFSiZhW_2KWPKdMGBFvWohJupDAkqm39QGxf9XW8jE7RNMm-Ywg-io37nhiNJsJpjU_-vblTejc33OOfl5VDXvo0 PEw7MtPL6b421EaHF6A7xoeNzoZdJXFFwDP_OPlJo6zHFQoNAoo6fPJIBQbysCSzej9kShEaWKU6QGMj01JxdBZxZTJrjpAQD0HJJJsl794 O69NNMO0buQ5TAd1DS7dqUy0Kc4/4ci/4Se23ohGSK-4z8GSycWJsg/h6/h001.Lm67Inuh7_JgNrrt_BzXG50bzm2eoaXM9e5vHDG75R4)
9 分钟 罗宾·维鲁奇 (Robin Wieruch)

如何在不使用外部表单库的情况下在 React 中实现表单验证,重点关注服务器端和客户端验证。它演示了使用 React Server Actions、Zod 进行模式验证和本机表单处理的实用方法。

感谢您在 2024 年的支持。祝您圣诞假期愉快,一月再见。

雅库布🎄🎅🏻

发布者