锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    #原理 #React #文章 React Context 并不会造成非必要重新渲染，实际上更严格的说法应该是使用同一个 Provider 的 context 会重新渲染

    #原理 #React #文章 React Context 并不会造成非必要重新渲染，实际上更严格的说法应该是使用同一个 Provider 的 context 会重新渲染。不推荐的原因更多是 Provider 的嵌套地狱。
    关于`父组件重新渲染会导致所有子组件重新渲染`的说法也进行了重新验证，直接将组件引入作为子组件会随着父组件的 state 变化而重新渲染，但是通过 props.children 的形式引入并不会。

    根据这两个特性，就会知道全局状态管理带来的好处，也可以了解为什么很多公司拆分组件并且代码行数有要求。因为子组件越多，如果父组件受控状态时常变化，会导致子组件的重新渲染。

    https://blacksheepcode.com/posts/no_react_context_is_not_causing_too_many_renders
    Black Sheep Code
    No, react context is not causing too many renders
    No, react context is not causing too many renders
    A lot of people are under the impression that context shouldn't be used to store state, because it'll cause the entire application tree to re-render. This is a misnomer.

    原理React文章

  4. 锤子前端

    #文章 文章通过对比Astro和React Server Components（RSC）的开发模式，指出二者在组件划分和数据流向上有相似之处，但RSC在学习难度、组件复用性、交互性、刷新机制等方面有其独特优势和挑战，同时强调RSC是全栈React的体现，其开发体验虽尚不成熟，但有值得探索的理念

    #文章 文章通过对比Astro和React Server Components（RSC）的开发模式，指出二者在组件划分和数据流向上有相似之处，但RSC在学习难度、组件复用性、交互性、刷新机制等方面有其独特优势和挑战，同时强调RSC是全栈React的体现，其开发体验虽尚不成熟，但有值得探索的理念。

    https://overreacted.io/rsc-for-astro-developers/
    overreacted.io
    RSC for Astro Developers — overreacted
    RSC for Astro Developers — overreacted
    Islands, but make it fractal.

    文章

  5. 锤子前端

    #CSS #文章 这篇文章通过介绍起源感知动画、合适的缓动函数、自定义缓动曲线、基于弹簧的交互以及选择合适的CSS属性等实用技巧，帮助UI开发者将动画从“好”提升到“优秀”，从而显著增强用户体验

    #CSS #文章 这篇文章通过介绍起源感知动画、合适的缓动函数、自定义缓动曲线、基于弹簧的交互以及选择合适的CSS属性等实用技巧，帮助UI开发者将动画从“好”提升到“优秀”，从而显著增强用户体验。

    https://emilkowal.ski/ui/good-vs-great-animations
    Emil Kowalski
    Good vs Great Animations
    Good vs Great Animations
    Practical tips on how to go from good to great animations.

    CSS文章

  7. 锤子前端

    #原理 #文章 理解 Promise 的工作原理对于编写高效且无错误的 JavaScript 代码非常重要

    #原理 #文章 理解 Promise 的工作原理对于编写高效且无错误的 JavaScript 代码非常重要。Promise 通过其内部状态管理和异步处理机制，使得 JavaScript 能够以单线程的方式处理复杂的异步任务。​

    https://deepintodev.com/blog/how-promises-work-in-javascript
    DeepIntoDev
    Your go-to source for deep development insights.

    原理文章

  9. 锤子前端

    #文章 #原理 js转换字符串并不简单🌚

    #文章 #原理 js转换字符串并不简单🌚。
    - 只有 {}.toString.call(v) 能够处理所有特殊值。​
    - 如果不需要 100% 安全且希望代码更简洁，可以使用 String(v) 。​
    - {}.toString.call(v) 的含义​​ {}.toString.call(v) 等价于 Object.prototype.toString.call(v) 。​

    https://2ality.com/2025/04/stringification-javascript.html

    文章原理

  10. 锤子前端

    #文章 #Node 通过案例介绍Node.js里面各种流Stream以及处理方案

    #文章 #Node 通过案例介绍Node.js里面各种流Stream以及处理方案

    https://www.sitepoint.com/node-js-streams-with-typescript/
    Sitepoint
    Node.js Streams with TypeScript — SitePoint
    Node.js Streams with TypeScript — SitePoint
    Learn how to leverage Node.js streams with TypeScript for efficient data processing. This guide covers all stream types with practical examples for handling large files and real-time data.

    文章Node

  11. 锤子前端

    #文章 文章探讨了现代前端部署的复杂性，分析了大型云服务提供商在支持现代前端框架方面的不足，并介绍了SST通过开源和创新方式更好地支持前端部署的新方法

    #文章 文章探讨了现代前端部署的复杂性，分析了大型云服务提供商在支持现代前端框架方面的不足，并介绍了SST通过开源和创新方式更好地支持前端部署的新方法。

    https://sst.dev/blog/frontends-are-hard/
    SST
    Frontends are hard
    Frontends are hard
    Modern serverless frontends are hard to deploy and here's why.

    文章

  12. 锤子前端

    #文章 这篇文章探讨了在现代项目开发中，如何通过更细致的依赖分类（如测试、构建、前端等）以及PNPM的catalogs功能，来提高依赖管理的灵活性和可维护性，同时展望了这种分类方式在工具集成和安全方面的潜在价值

    #文章 这篇文章探讨了在现代项目开发中，如何通过更细致的依赖分类（如测试、构建、前端等）以及PNPM的catalogs功能，来提高依赖管理的灵活性和可维护性，同时展望了这种分类方式在工具集成和安全方面的潜在价值。

    https://antfu.me/posts/categorize-deps
    Anthony Fu
    Categorize Your Dependencies
    Categorize Your Dependencies
    When building a project, it’s very likely that we will install third-party packages from npm to offload some tasks. On that topic, we know there are two major types of dependencies: dependencies (prod) and devDependencies (dev). In our package.json, it might…

    文章

  14. 锤子前端

    #React #原理 #文章 《理解React中父组件（parent）和拥有者组件（owner）的区别来优化上下文（Context）提供者的性能》

    #React #原理 #文章 《理解React中父组件（parent）和拥有者组件（owner）的区别来优化上下文（Context）提供者的性能》

    1.父组件与拥有者组件的区别

    • 父组件是嵌套结构中包含其他组件的组件，而拥有者组件是实际渲染另一个组件的组件，理解两者的区别是优化React性能的关键。


    2.React组件更新的三种原因

    • 组件更新可能由自身状态变化、消费的上下文值变化或其拥有者组件重新渲染引起。


    3.上下文提供者的优化

    • 通过分离状态和上下文提供者到独立的自定义组件中，可以避免不必要的组件重新渲染，从而提高性能。


    4.自定义上下文提供者的实现

    • 使用children属性将子组件传递到自定义上下文提供者中，确保只有依赖上下文的组件才会重新渲染。


    5.优化效果

    • 通过合理的组件结构，可以减少不必要的更新，提高应用性能，而无需依赖显式的记忆化工具。


    6.其他好处

    • 这种模式不仅能优化上下文更新，还能使数据流更清晰、支持服务器组件，并且适用于其他优化场景。

    https://julesblom.com/writing/parent-owners-context
    JulesBlom.com
    Parents & Owners in React: Context Providers | JulesBlom.com
    Parents & Owners in React: Context Providers | JulesBlom.com
    Understanding how parent and owner components affect context updates can help you write more performant context providers

    React原理文章

  15. 锤子前端

    #React #原理 #文章 子组件的 useEffect 会在父组件的 useEffect 之前执行，这是由于 React 的深度优先遍历算法

    #React #原理 #文章 子组件的 useEffect 会在父组件的 useEffect 之前执行，这是由于 React 的深度优先遍历算法。​

    https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/
    master.dev
    React Internals: Which useEffect runs first?
    React Internals: Which useEffect runs first?
    It's not particularly obvious, but a child's useEffect will run before a parent's will. Let's look at why.

    React原理文章