锤子前端 - Now vibe coding, so learning hammer FE ?

11:54 · 2025年5月1日 · 周四

#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

Understanding how parent and owner components affect context updates can help you write more performant context providers

React 原理文章

11:46 · 2025年5月1日 · 周四

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

https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/

Frontend Masters

React Internals: Which useEffect runs first?

useEffect is one of the most commonly used hooks in the React community. Regardless of how much experience you have with React, you’ve probably used it before.

React 原理文章

11:40 · 2025年5月1日 · 周四

#React #文章如何序列化一个Promise

https://twofoldframework.com/blog/you-can-serialize-a-promise-in-react

Twofoldframework

You can serialize a promise in React

Use React to create a promise on the server and later finish it on the client.

React 文章

11:21 · 2025年5月1日 · 周四

#React 制作react组件的技巧

https://youtu.be/SlW2FFBQjt8?si=AKPlpIMiKfDxCzrA

YouTube

Make great React Components in 2025 with these tips!

Today I go over everything I know about building react components for the last 8 years. How to make them great and extensible and composable, and everything in between.

👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join…

React

09:51 · 2025年5月1日 · 周四

#React #文章 'use client' 和 'use server' 不仅仅是 React 的特性，它们代表了一种新的编程范式，可能会对未来的前端和后端开发产生深远影响。通过这两个指令，开发者可以更自然地构建跨网络的应用程序，同时保持代码的清晰性和可维护性。

https://overreacted.io/what-does-use-client-do/

overreacted.io

What Does "use client" Do? — overreacted

Two worlds, two doors.

React 文章

11:16 · 2025年4月30日 · 周三

#文章品牌故事不仅仅是营销活动，用户体验设计也不仅仅是创造漂亮的界面。它们是共同的力量，塑造着用户体验以及与品牌的联系。通过精心设计的字体、色彩和图像，到流畅的导航和动态交互，用户体验设计讲述着品牌的故事，吸引用户并建立持久的关系。

https://mp.weixin.qq.com/s/87ZMd8sISld-Y5IingLURw

文章

16:09 · 2025年4月29日 · 周二

#AI TS 版本的 Fast MCP

https://github.com/punkpeye/fastmcp

GitHub