前端周热点105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45

This Week In React #105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...

React

React useEvent() RFC

Dan Abramov的RFC建议在React核心中添加一个新的useEvent(fn)钩子，没有任何依赖数组。然后，作为参数传递的不稳定的函数/闭包被稳定化（它在一段时间内保持相同的身份）。这有助于避免陈旧的闭包问题（当ESLint规则未配置或者不受重视时），同时通过React.memo()简化优化，并避免useEffects的重新执行。计划对ESLint规则进行修改：稳定的函数不需要传递到其他依赖数组中，可以采用 "onEvent"/"handleEvent "惯例。

我在pull-request中给出了我的积极反馈（那里有很多评论，特别是关于该钩子的命名）。对我来说，这确实是最初钩子设计中缺少的一块，许多应用程序已经使用了基于useLayoutEffect的变通方法。

useEvent - 缺失的React钩子是一个很好的3分钟视频，可以了解大局。

Next.js Layouts RFC

Next.js将使其路由基础设施现代化。这将有助于利用React 18的功能，以及其他即将到来的功能。

他们计划逐步采用：./pages 文件夹继续像以前一样工作，你可以逐步把东西移到新的./app文件夹，这也会激活服务器组件🤯。

将支持基于layout.js命名惯例的嵌套路由/布局。请求将被并行执行（没有瀑布）。这篇文章只是一个巨大的RFC的第一部分：第二部分即将到来。

拓展阅读

📜 Building a Design System from scratch: Maxime sharing all the details behind his personal React design system , based on Stitches
📜 Building a Mini Next.js: Jonas shows how to replicate Next.js file-system routing and SSR with getServerSideProps, using Vite and Fastify.
📜 Remix and "The Edge": Jim recently joined the Remix team. This explains how Remix leverages the Edge (ie Deno and Cloudflare Workers 😏) to be both fast and dynamic.
📜 Storybook Performance: Vite vs Webpack: Storybook has pluggable builders, so which one to use? This benchmark shows that Vite does not always win against Webpack, on a large IBM Carbon 250 comps Storybook
📜 What the useEvent React hook is (and isn't): opinion of a Solid contributor
📜 Getting started with Markdoc in Next.js: Stripe just open-sourced their doc tool Markdoc
📜 React key attribute: best practices for performant lists: good illustration on problems happening when you use index or random keys
📜 (P)react vs Web Components: a Xoogler's perspective
📜 Reading Source Code: React-Query
📜 You Don't Need A UI Framework
📜 What You Need to Do to Improve Performance in Next.js
📜 How to solve React useEffect infinite loops
📜 What I learnt at Reactathon 2022
📜 Using Next.js ISR with Serverless Cloud
👥 Remix Conf: starts today!
👥 Reactathon 2022 livestreams: day 1, day 2, day 3
🧑‍🎓 Advanced-Remix: workshop open-sourced by Kent
🧑‍🎓 Complex State Management in React with Jotai and XState
🐦 TypeScript 4.8 + "as props": possible improvement?
🐦 well-named function inside useEffect
📦 eslint-plugin-react v7.30: new jsx-no-leaked-render rule very useful. Permits to avoid rendering a 0 with {count && <div>{count}</div>} (which makes React-Native crash 😅)
📦 Remix 1.5: officiel Deno support
📦 Reagraph: WebGL Graph Visualizations
📦 Playright 1.22: possible to test React components

React-Native

Announcing Reanimated 3

新版本在RC中。支持新的Fabric架构，但也支持旧的架构，以帮助逐步采用。Reanimated v2代码继续在v3上工作，但旧的Reanimated v1 API被删除 demo Reanimated 3 + RNGH + Screens

Microsoft - React Native Developer Tools

Adam宣布启动React Native开发者工具社区项目。这是一个repo(rnx-kit)，里面有许多对React-Native项目有用的工具，与Metro、TypeScript、Jest有关。微软已经在Office、Xbox和Teams等各种产品上使用它。

拓展阅读

📜 Expo SDK 45: using latest React-Native 0.68.2 version. New Expo Go UI with better EAS Updates integration. Modules upgraded to JSI and Sweet API. New CLI in beta.
📜 Tamagui Beta: promising cross-platform tool now available in beta. Starter available using Expo, Next.js and Solito.
📜 React Native Accessibility - GAAD 2022 Update
🎥 It's Severance, but in React Native: latest William Candillon video with Skia, Perlin Noise and shaders. As good as the TV show. Remotion intros/outros are back👌
🎙️ The React Native Show - Coffee Talk #2 - Top Resources for Developers
🎙️ RNR 234 - React Native Tips and Tricks
🎙️ RNR 235 - Dissecting React Native 0.68
🎙️ RNR 236 - Reanimated 2 with Krzysztof Magiera
📦 6 Expo 45 clones: Spotify, Uber, Netflix, Slack, Twitch, Disney+
🐦 Tesla app using React-Native
🐦 React-Native 0.69: faster & ~5% less RAM usage

其它

订阅原文:

🇬🇧 ThisWeekInReact.com
🇫🇷 ReactHebdo.fr