React
Using global memoization in React
Vladimir解释说，有时候仅仅使用useMemo是不够的，我们需要在多个组件之间共享缓存数据。他提出了5种在React组件外以全局方式缓存数据的方法，从单个常量到LRU缓存。我的观点：使用WeakMap也可以是一个不错的解决方案，为什么不在React上下文中提供缓存呢？
React component as prop: the right way™️
Nadia给出了使用React composition的充分理由。她以一个带有文本+图标的按钮为例，提出了3个备选方案，并在不同的更新场景下对它们进行了比较。
icon={<MyIcon/>}Icon={MyIcon}renderIcon={(...settings) <Icon {...settings}/>}
我不太喜欢第一种情况，并尽量避免使用cloneElement。
拓展阅读:
- 📜 Remix upload to S3: 使用Remix API将上传流直接转发至S3
- 📦 Remix Electron: Remix和Electron的整合🤔似乎很有趣，可以减少Electron的模板，并提供更好的网络+本地代码的共同定位。
- 📦 Griffel: 微软对原子式CSS-in-JS、零运行时间、类型安全的看法。提醒我们，我们仍在等待StyleX😏。
- 📦 Jotai 1.6: 暴露存储接口，原子与localStorage同步…
- 🗳 Next.js Developer Survey: Vercel官方调查
- 💡 Next.js RFC: Switchable Runtime: Next.js中的SSR在历史上是基于Node.js的运行时。他们计划引入全局和每条线路的配置来启用Edge运行时。这在很多方面都很有趣：启用流式SSR，降低延迟......请注意，Remix由于其适配器层，已经在某种程度上具备了这种能力。
- 💡 Gatsby RFC: Ahead of Time Compilation for config files: 来支持TypeScript中的配置文件。顺便说一下，我发现了一个有趣的包，用于这个用途：bundle-require
- 💡 Flat file system for file-based routing: 杰米-凯尔关于文件系统路由约定的强烈和原创的意见 🤔
- 📖 Partytown + Hydrogen: 新的整合文档
- 🐦 Remix: animated page transitions with useOutlet(): Outlet是一个很好的解决方案，可以避免布局的卸载/重载，使其更容易实现页面的转换。
- 🎥 Remotion Update - February 2022
- 📜 Hydrogen & Tailwind: The Perfect Match: 来自Shopify，有一点像React，更像是Tailwind。
- 📜 Svelte vs. React in 2022: Choosing the Best Match for You
React-Native
Measuring and improving performance on a React Native app
Alexandre介绍了他的Flipper插件，可以持续测量React-Native的性能（UI和JS线程FPS），并像Lighthouse一样计算得分。他还分享了4个技巧，帮助你测量你的应用程序的性能。TIL关于用adb自动滚动。所有这些都被应用在一个具体的案例中：他的团队将TF1应用的分数从40分提高到90分。
拓展阅读:
- 📜 4 years as a React Native OSS maintainer: a retrospective: 做一个维护者并不容易 😅
- 📜 Calling Windows APIs from React Native just got easier: 微软推出了一个新的React-Native包，以一种非常灵活的方式直接从JS中调用任何WinRT API，而不需要任何额外的模板。请注意，iOS也有类似的举措（react-native-native-runtime），但不确定苹果是否会批准。😝
- 📜 React Native for Windows is helping Settings improve more quickly: M微软对一个具体的跨平台用例的反馈，他们在桌面（使用上述WinRT包）和网络之间共享代码。
- 🎥 Orta Dev Diary 2 - React Native Web
- 🎙️ RNR 226 - GraphQL in React Native
Other
对CSS Cascade layers的一个很好的介绍，这是一个值得期待的CSS新功能。看起来它在我们的浏览器中很快会被支持，即使你今天不能使用它（没有polyfill），那也值得看一看。CSS Cascade Laters对CSS级联给予额外的控制以及应用CSS规则的顺序。这可以帮助修复与特异性、插入顺序有关的问题，或者减少使用！!important。如果你只有1分钟时间，可以看一眼这个动画。
这就像浏览器重新排列了你的样式，而不是使用CSS文件中定义的顺序。这让我想起了React 😅.为什么这很重要？因为捆绑器和前端工具没有任何明确的规则，以正确的可预测的顺序发出捆绑的CSS。例如，使用Webpack、CSS加载器、JS/CSS代码分割、动态导入、CJS/ESM，你真的知道你的CSS规则在最终页面中的顺序是什么？我绝对不知道! 🤷♂️有了这个新功能，你的CSS可能会变得更加便携。如果有一天你决定使用另一个捆绑器/工具，你不希望不得不重写一切，并修复一大堆与CSS插入顺序变化有关的小CSS问题：Cascade layers,可以防止这种情况。
这些天在CSS方面有很多活动。还可以看看Interop 2022项目：浏览器计划在今年关注的有关浏览器兼容性的功能，包括cascade layers
拓展阅读:
- Announcing TypeScript 4.6 RC: great improvements on Control Flow Analysis, very nice for React
- Typescript - (ReadOnly) NotEmptyArray: 需要了解的有用元组技术:
[T, ...T[]]; - Assertion Functions in TypeScript: useful feature for type-narrowing
- “Extract in TS can be used to query a member of a union type.”
- SWC v1.2.139: 介绍新的Rust插件系统
- Why I prefer JS for front-end build automation: 可以肯定的是，它比bash要好 😅
- npm RFC : Package Distributions: 为需要发布特定平台二进制文件的lib作者提出新的解决方案。看起来对Rust和Go的现代工具很有用。
- Node.js 17.5.0: fetch (behind flag), JSON modules
- Jest v28.0 alpha: ligher, remove deps JSDOM, Jasmine
- AbortController -> TaskController: assign priority to JS tasks?
- Parcel 2.3 + Parcel CSS 1.3 + Webpack integration example
- EdgeDB 1.0 with a query builder TypeScript
- Rome Formatter and Rust Update: initial focus seems to be on a code formatter that will try to sync with Prettier.
- Flutter in 2022: strategy and roadmap: improvements planned on web support
- Vite 2.8
- ESLint 8.9
- Is Turborepo overhyped?
- Move over JavaScript: Back-end languages are coming to the front-end
- Storybook: Component Encyclopedia beta
- Static Files on Deno Deploy
- Debugging JavaScript
- Inside the JavaScript Engine
- Design system versioning: single library or individual components?
- How not to learn GraphQL
- Implementing A Svelte Store In Rust
- The first developer preview of Android 13
- Server-Sent Events: the alternative to WebSockets you should be using
