React

Shopify: React Server Components best practices

Cathryn对Shopify公使用Servers Components的反馈，她通过新的Hydrogen框架学会了使用Servers Components。如果没有最佳实践指导，你可能无法正确地使用这个新的React功能，导致最终会产生一个比它大的包。她建议默认使用Shared Components，而不是Client Components（我们现在使用的）。对于交互性，提取一些最细粒度的Client Components，然后把剩余的尽可能转化为Server Components。我们有时用来优化的composition patterns（使用children用）也可以用来搭配使用不同类型的组件。她提供了一个真实的案例，用了2个例子来说明：通讯注册和产品FAQ。一个Shopify使用服务器组件的教程也已经出版了：Rapid Development with Hydrogen: Building a Product Page

How to write performant React apps with Context

Nadia解释了如何使用React上下文来优化复杂的React表单的渲染。首先，你必须分离成2个上下文和钩子useFormData()和useFormAPI()。不要忘记正确记忆api对象。我们最终可以把状态分成几个小的上下文。这些技术可能无法像真正的状态管理器那样扩展，但在你无法使用状态管理器的情况下，了解这些技术还是很有用的。

The “best” way to manage icons in React.js

在React中使用图标有很多方法，每种方法都有不同的权衡。.svg文件不能在CSS中写样式。渲染SVG的React组件（也适用于SVGR）很方便，但它们在HTML输出中内联SVG标签会使页面更重。根据我的经验，在多次使用相同图标的静态页面（或SSR）上，我们很快就会看到这个问题。Ben提供了一个伟大的、鲜为人知的替代方案：使用SVG精灵。

拓展阅读:

• 📜 How to Setup React Native Web in a Remix project: React-Native-Web可以与Remix很好地整合，就像任何CSS-in-JS库一样。
• 📜 Offline React Query: Dominik介绍了React-Query 3在处理离线或网络问题上的局限性，并介绍了新的v4（目前在Beta版本），可能会帮助你更好的处理离线优先应用程序。
• 📜 Rendering 3D in React made easy with react-three-fiber: 一个对Three.js and R3f不错的介绍。
• 📖 Partytown: new doc site + pages to integrate with Next.js and Remix
• 🐦  “A simple composition trick to avoid re-rendering a component” : 与服务器组件使用的技术相同😏（第一条）。
• 📦 Gatsby 4.7: with new option: trailingSlash
• 📦 Yerba: Electron Turborepo monorepo with Next.js, Typescript, Vite…
• 📦 Lamina: layer-based shader material for Three.js + React-Three-Fiber
• 🔗 Remix Routing Demo
• 🔗 Remix Bug Report Test: Remix建议通过创建失败的测试来报告框架的错误😏
• 🔗 remix.guide: kind-of HackerNews for Remix content

React-Native

• 🧵 Andrew Clark: “I can’t prove this but I suspect if someone built a Next.js/Remix/etc for React Native (i.e. single codebase for client and server) they would make a trillion dollars” : 我不知道Andrew到底在想什么，但这是一个非常有趣的讨论话题!我对服务器组件在React-Native中的使用特别感兴趣（或者至少是一些服务器驱动的UI），以及将数据需求与屏幕放在一起（想想Remix/loader，Next.js/getServerProps，但用于React-Navigation）。
• 🧵 Satyajit Sahoo:  “Seeing many people compare React Navigation to React Router…”
• 📜 Displaying a List in React Native: Map Method or FlatList Component
• 📜 Expo EAS + LogRocket: Unlimited Possibilities for Your Expo Apps
• 📖 React-Navigation - Organizing Types: new doc
• 📦 React-Native 0.68.0-rc.1: 已经有了新的分支和RC，因为发布周期越来越快。
• 📦 expo-e2e-demo: 通过GitHub actions在Expo应用上试用Detox e2e测试
• 📦 React Location on React Native POC: 将React-Location库与React-Native集成，以实现 "边取边用 "模式。
• 🐦  “We rebuilt the docs of NativeBase using Nativebase”
• 👥 App.js Conf 2022: 6月8-10日克拉科夫（CFP）。我还有2020年的票，所以希望你能在那里见到我。
• 👥 React Native London February 2022: 与Quin Jung（Expo）会面（直播），谈论全新的EAS更新。
• 🎥 Limitless App Development with Expo and React Native

其它

A list of every web API in Deno

Luca（Deno贡献者）详尽地提到了Deno支持的所有网络API。毫不奇怪，它是一个部署Remix应用的好平台。这可能是上周宣布的Node.js 18的新网络API的回应。另请阅读：Node.js核心中的fetch()：为什么你应该关心

Immutability isn’t free

有趣的故事，在后端背景下，但基本上适用于React应用程序。FP和不可变性的使用导致了与数组复制和O(n2)算法有关的糟糕性能。注意：通过使用ImmutableJS等lib内部使用的向量尝试和结构共享，也有可能获得更好的不变性性能。

Netlify Scheduled Functions

Quirrel（serverless cron jobs SaaS）及其创建者Simon（见他的帖子）都加入了Netlify，Netlify在测试版中引入了新的Scheduled Functions功能。这种功能在目前的无服务器领域显然是缺乏的。请注意，Blitz（Simon是贡献者之一）转向Blitz Toolkit，以提供类似的服务。我们对Vercel提出的建议不会感到惊讶😏

拓展阅读:

• Why Efficient Hydration in JavaScript Frameworks is so Challenging: Ryan Carniato（Solid）介绍了各种前端应用程序化策略的权衡，包括Remix、服务器组件、Astro、Qwik...
• Stately Editor public beta: 低代码工具，基于状态机和状态图可视化地创建应用逻辑。作者是XState的创造者。
• Babel 7.17.0: includes new decorators proposal (stage 2)
• @tsconfig/strictest: because strict mode is not strict enough
• Wordle with TypeScript types 😝
• Monitor Exports from Packages in Monorepos: 使用Jest快照+codeowners来监控libs公共API表面的变化 🤔
• Structuring your Storybook
• GitHub: New sponsors-only repositories, custom amounts, and more
• New option curl --json
• “Nobody at Facebook has worked on Jest for years” : some Hacker News drama
• Vercel - The evolution of the Web: 2021 retrospective
• Flutter 2.10
• Announcing Flutter for Windows
• Push Notifications, WebXR, and better PWA support coming to iOS
• A TypeScript Perspective on Go: the 2021 Advent of Code
• DesignSystem.tools
• Vue 3 as the New Default
• Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More
• Electron 17
• “Did ya know you probably should be using interface rather than type where possible?”
• Stackshare: Top 100+ Developer Tools 2021
• Use Streams to Build High-Performing Node.js Applications
• Using fetch(), AbortSignal, And setTimeout() To Apply Retry Mechanics In JavaScript
• Yes, I can connect to a DB in CSS
• Custom Highlight API
• Wolvic: AR/VR browser
• When should you leverage Module Federation, and how?

订阅原文：www.getrevue.co/profile/thi…