Now vibe coding, so learning hammer FE ?
#React #文章 专治焦点管理问题,flushSync的用武之地。
https://www.epicreact.dev/mastering-focus-management-in-react-with-flush-sync-f5b38
https://www.epicreact.dev/mastering-focus-management-in-react-with-flush-sync-f5b38
#文章 本文详细介绍了如何使用 OpenAuth、React Router 和 SST 构建一个完整的用户认证系统,涵盖登录、回调处理、会话管理、新用户注册以及保护路由的实现,并提供了部署和测试的步骤。
https://seanpaulcampbell.com/blog/openauth-react-router/
https://seanpaulcampbell.com/blog/openauth-react-router/
#原理 #React #文章 React Context 并不会造成非必要重新渲染,实际上更严格的说法应该是使用同一个 Provider 的 context 会重新渲染。不推荐的原因更多是 Provider 的嵌套地狱。
关于`父组件重新渲染会导致所有子组件重新渲染`的说法也进行了重新验证,直接将组件引入作为子组件会随着父组件的 state 变化而重新渲染,但是通过 props.children 的形式引入并不会。
根据这两个特性,就会知道全局状态管理带来的好处,也可以了解为什么很多公司拆分组件并且代码行数有要求。因为子组件越多,如果父组件受控状态时常变化,会导致子组件的重新渲染。
https://blacksheepcode.com/posts/no_react_context_is_not_causing_too_many_renders
关于`父组件重新渲染会导致所有子组件重新渲染`的说法也进行了重新验证,直接将组件引入作为子组件会随着父组件的 state 变化而重新渲染,但是通过 props.children 的形式引入并不会。
根据这两个特性,就会知道全局状态管理带来的好处,也可以了解为什么很多公司拆分组件并且代码行数有要求。因为子组件越多,如果父组件受控状态时常变化,会导致子组件的重新渲染。
https://blacksheepcode.com/posts/no_react_context_is_not_causing_too_many_renders
#文章 文章通过对比Astro和React Server Components(RSC)的开发模式,指出二者在组件划分和数据流向上有相似之处,但RSC在学习难度、组件复用性、交互性、刷新机制等方面有其独特优势和挑战,同时强调RSC是全栈React的体现,其开发体验虽尚不成熟,但有值得探索的理念。
https://overreacted.io/rsc-for-astro-developers/
https://overreacted.io/rsc-for-astro-developers/
#CSS #文章 这篇文章通过介绍起源感知动画、合适的缓动函数、自定义缓动曲线、基于弹簧的交互以及选择合适的CSS属性等实用技巧,帮助UI开发者将动画从“好”提升到“优秀”,从而显著增强用户体验。
https://emilkowal.ski/ui/good-vs-great-animations
https://emilkowal.ski/ui/good-vs-great-animations
#文章 前端的下一次进化:人工智能驱动的状态管理:
https://thenewstack.io/frontends-next-evolution-ai-powered-state-management
https://thenewstack.io/frontends-next-evolution-ai-powered-state-management
#原理 #文章 理解 Promise 的工作原理对于编写高效且无错误的 JavaScript 代码非常重要。Promise 通过其内部状态管理和异步处理机制,使得 JavaScript 能够以单线程的方式处理复杂的异步任务。
https://deepintodev.com/blog/how-promises-work-in-javascript
https://deepintodev.com/blog/how-promises-work-in-javascript
- 只有
{}.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
#文章 文章探讨了现代前端部署的复杂性,分析了大型云服务提供商在支持现代前端框架方面的不足,并介绍了SST通过开源和创新方式更好地支持前端部署的新方法。
https://sst.dev/blog/frontends-are-hard/
https://sst.dev/blog/frontends-are-hard/
#文章 这篇文章探讨了在现代项目开发中,如何通过更细致的依赖分类(如测试、构建、前端等)以及PNPM的catalogs功能,来提高依赖管理的灵活性和可维护性,同时展望了这种分类方式在工具集成和安全方面的潜在价值。
https://antfu.me/posts/categorize-deps
https://antfu.me/posts/categorize-deps