成长经历生于1990年，陕西省安康市一个小康家庭，求学于西安理工大学，毕业后曾在上海从事路由器相关开发两年时间，后移动互联网时代兴起，懵懵懂懂开始Android开发，后续又用Python开发爬虫，React/Vue开发前端页面，一直从事技术开发工作，今日转头回望，黄粱一梦，恍如昨日，已过十年。
一个软件工程师的自白从事软件工作以逾十年，自觉职业生涯已到了一个瓶颈期，随着技术经验累积，面对当前的工作内容已驾轻就熟，面临的挑战越来越少。无论是对更复杂技术的追求还是对商业成功的期待，不管外界还是内心对职业转型的需求都都迫在眉睫。
是时候需要总结过往，规划未来。
过往以往的工作经历中从未主导过一个商业产品的诞生与成长。在商业这出大戏中，一直以一个演员或者幕后工作人员的角色存在，长此以往积累了很多想法，想要却未实施的遗憾。现在这些火花累积，也让我内心更加强烈的迸发出一个心愿，成为一个产品的主导者，把更多的想法带入现实，创造大家喜欢的产品，创造改变生活的产品。
未来伴随着这些期许与憧憬，我深知现在的我还没有完全的能力，但我希望以热爱的火星为源，以创造创新为本，坚持不懈，一步步成长，直到可 ...
Next.Js 学习教程探索 Next.js：构建现代 Web 应用的新篇章
Vercel 使用教程探索Vercel：前端开发的加速器
PostgreSQL 学习教程Supabase 学习教程陆续更新中…
构建你的应用程序：路由路由基础每个应用程序的骨架是路由。本文将向你介绍网络路由的基本概念以及如何在Next.js中处理路由。
术语首先，你会在文档中看到这些术语的使用。这里是一个快速参考：
Tree（树）：用于可视化层次结构的约定，例如组件树、父组件和子组件、文件夹结构等。
Subtree（子树）：树的一部分，从新的根节点开始（第一）到叶子节点结束（最后）。
Root（根）：树或子树的第一个节点，例如根布局。
Leaf（叶）：子树中没有子节点的节点，例如URL路径中的最后一个段。
URL Segment（URL段）：由斜杠分隔的URL路径的一部分。
URL Path（URL路径）：URL中域名之后的部分（由多个段组成）。
app路由在版本13中，Next.js引入了新的App Router，它建立在React Server Components之上，支持共享布局、嵌套路由、加载状态、错误处理等。
App Router在名为app的新目录中工作。app目录与pages目录一起工作，允许逐步采用。这允许你选择应用程序中的一些路由采用新的行为，同时保持其他路由在pages目录 ...
原文链接A Chain Reaction
中文翻译我在编辑器中写下了一些JSX代码：
123<p className="text-2xl font-sans text-purple-400 dark:text-purple-500"> Hello, <i>Alice</i>!</p>
目前，这段信息只存在于我的设备上。但凭借一些运气，它将穿越时空到达你的设备，并呈现在你的屏幕上。
这一功能的实现是工程学的一个奇迹。在你的浏览器内部，有代码片段知道如何显示一个段落或者以斜体绘制文本。这些代码片段在不同的浏览器之间是不同的，甚至在同一浏览器的不同版本之间也有所不同。在不同操作系统上，屏幕的渲染方式也各不相同。
然而，因为这些概念已经有了公认的名称（例如<p>代表段落，<i>代表斜体），我可以不担心它们在你的设备上如何真正工作而引用它们。我不能直接访问它们的内部逻辑，但我知道我可以传递哪些信息给它们（例如CSS的className）。多亏了网络标准，我可以合理地确信我的问候将按我的意图显示。
像 ...
引言在当今快速发展的网络世界中，前端开发不仅仅是关于编写代码，更是关于如何高效地部署和管理这些代码。Vercel，一个领先的前端开发平台，以其卓越的性能和用户体验，已经成为许多开发者的首选。
传统前端项目部署：流程、工具与费用解析在Vercel等现代前端部署平台出现之前，部署一个前端项目是一个复杂且耗时的过程。
传统部署流程概览
准备工作
代码编写：使用本地开发环境编写前端代码。
构建过程：通过Webpack、Gulp或其他构建工具编译和优化前端资源。
选择部署方案
虚拟私服（VPS）：购买并配置虚拟私服，如DigitalOcean、Linode等。
云服务提供商：使用AWS、Azure、Google Cloud等云服务提供商的计算服务。
服务器配置
操作系统：安装Linux或Windows服务器操作系统。
Web服务器：配置Nginx、Apache或其他Web服务器。
环境依赖：安装Node.js、PHP等运行时环境。
部署代码- FTP/SFTP：使用文件传输协议上传代码到服务器。- CI/CD：配置Jenkins、Travis CI等持续集 ...
在React应用开发中，我们经常遇到需要处理事件冒泡的场景，尤其是在组件嵌套的情况下。本文将介绍事件冒泡的基本概念，以及如何在React中有效阻止它。
事件传播的两个阶段：捕获与冒泡DOM事件的传播分为两个阶段：捕获（capturing）和冒泡（bubbling）。这两个阶段的顺序如下：
12345678 | | / \---------------| |----------------- ---------------| |-----------------| element1 | | | | element1 | | || -----------| |----------- | | -----------| |----------- || |element2 \ / | | | |element2 | | | ...
在React开发过程中，我们经常需要对现有的组件进行修改，以适应不断变化的需求。一个常见的场景是为现有的组件添加新的属性（props）。本文将介绍几种方法来实现这一目标。
问题背景假设我们有一个已经定义好的React组件，如下所示：
1this.mainContent = <Hello message="Hello world!" />;
现在，我们希望在不修改原始组件的情况下，为这个组件添加一个新的属性anotherMessage。
使用React.cloneElementReact提供了一个非常有用的API——React.cloneElement，它可以用来克隆一个元素，并添加或修改属性。以下是如何使用React.cloneElement来实现我们的需求：
1234const ClonedElementWithMoreProps = React.cloneElement( this.mainContent, { anotherMessage: "nice to meet ya!" });
通过这种方式， ...
引言在React的应用中，useEffect钩子是一个让我们能够“跳出”React体系，与外部系统如非React组件、网络请求或浏览器DOM等同步的机制。如果没有任何外部系统参与（例如，当一些props或state变化时你想要更新组件的状态），你就不应该需要Effect。移除不必要的Effect将使你的代码更容易理解、运行更快，并且更少出错。
你将学到
为什么要以及如何从你的组件中移除不必要的Effect
如何在没有Effect的情况下缓存昂贵的计算
如何在没有Effect的情况下重置和调整组件状态
如何在事件处理器之间共享逻辑
哪些逻辑应该移动到事件处理器
如何通知父组件关于变化的信息
如何移除不必要的Effect你不需要Effect的两种常见情况：
你不需要Effect来转换渲染数据。 例如，假设你想要在显示之前过滤一个列表。你可能会想要写一个Effect，在列表变化时更新状态变量。然而，这是低效的。当你更新状态时，React首先会调用你的组件函数来计算屏幕上应该显示什么。然后React会将这些变更“提交”到DOM，更新屏幕。然后React会运行你的Effect。如果你的Eff ...
引言在使用React开发组件时，我们经常会遇到需要根据props的变化来更新组件状态的情况。然而，React的useState钩子并不会自动根据props的变化来更新状态。本文将探讨这一问题，并提供几种解决方案。
问题描述在Stack Overflow的一个热门问题React.useState does not reload state from props中，用户遇到了这样的问题：他期望在props变化时，组件的状态能够重新加载，但实际上user变量并没有在下一次useState调用时更新。
示例代码以下是问题的原始代码示例：
123456function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>);}
问题分析useState的参数 ...
在当今快速发展的 Web 开发领域，React 以其组件化和声明式的特性，已经成为构建用户界面的首选技术之一。然而，React 本身并不提供路由、服务器端渲染（SSR）等高级功能。这就是 Next.js 框架的用武之地——它不仅扩展了 React 的能力，还为开发者提供了一整套构建高性能、全栈 Web 应用的工具和优化。
什么是 Next.js？Next.js 是一个基于 React 的框架，专为构建用户友好、快速且富有交互性的 Web 应用而设计。它自动处理了许多繁琐的配置任务，如打包、编译等，让开发者能够专注于创造出色的用户体验。
Next.js 的核心特性
路由系统Next.js 提供了一个基于文件系统的路由系统，它不仅支持传统的页面路由，还能够实现复杂的布局和嵌套路由。这种设计让路由的管理和维护变得异常简单。
渲染能力Next.js 支持客户端和服务器端渲染，这意味着它可以在服务器上生成完整的 HTML 内容，然后将其发送到客户端，从而加快首屏加载速度并提高 SEO 效果。此外，Next.js 还提供了静态和动态渲染优化，以及在边缘和 Node.js 运行时的流式传输能力。
...
