姜姜姜姜的博客

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment

1. 前言本专题的研究缘起于能源计算器中的性能问题。在一个大组件中，如果包含多个频繁更新的小组件，每次状态变化都会触发整个组件树的重新渲染，导致页面出现卡顿。为解决这一问题，需要使用 React.memo、useMemo 和 useCallback 等性能优化手段。它们能够利用 React 渲染机制，通过避免不必要的重新计算和组件更新，减少 Fiber 树的遍历和真实 DOM 的操作，从而提升性能。因此，本专题将深入探究 React 的渲染原理，分析这些优化手段如何在内部机制中发挥作用，以理解性能优化的本质。 2. 基础知识2.1 浏览器渲染流程1、DNS解析：浏览器将接收到的域名转换为IP地址找到服务器的位置。 2、建立TCP连接：浏览器与服务器建立TCP连接用于传输数据。 3、发起HTTP请求：浏览器发送HTTP请求到服务器。 4、服务器响应请求并返回数据：服务器处理请求返回请求的HTML、CSS、JS等数据。 5、浏览器解析接收到的数据：浏览器开始解析接收到的HTML代码，并请求HTML中引用的资源文件。 6、构建DOM树：解析HTML代码构建DOM树。这一步的DOM树由R...

基础概念Git 是什么Git 是一个 分布式版本控制系统（DVCS），用于跟踪文件的修改记录，尤其适合团队协作开发代码。 核心概念仓库（Repository） 提交（Commit） 分支（Branch） 暂存区（Staging Area / Index） HEAD 指针 Git 与 GitHub / GitLab / Gitee 的关系 Git（核心工具） 定义：分布式版本控制系统（DVCS），用于在本地和远程管理代码的版本历史。 作用： 跟踪文件修改历史 支持分支管理、合并、回滚 提供本地仓库和远程仓库操作接口 GitHub / GitLab / Gitee（平台/服务） 定义：基于 Git 的 代码托管平台，提供远程仓库和协作功能。 功能： 远程仓库托管：保存 Git 仓库，可与团队成员共享代码 协作工具：Pull Request / Merge Request、代码评审、Issue 管理 CI/CD 集成：自动化构建、测试、部署 权限管理：控制谁可以访问和修改仓库 ...

服务器端渲染和客户端渲染效果对比为了更好的对比服务器端渲染和客户端渲染，开启低速模拟，来检验SSR对首屏加载速度的作用。 ❗️以下示例均已关闭缓存，开启慢速3G模拟环境。 服务器端渲染结果 服务器端渲染网络不佳的情况下，仍然能保证进入页面就可以获取首页的文章数据，用户体验较好。 20250820163813_rec_.mp4 客户端渲染结果 客户端渲染网络不佳的情况下，会有长达半分钟的首页白屏，会造成用户体验不佳。 20250820163858_rec_.mp4 上面的对比可以得出结论，在网络不佳的情况下，SSR是加载速度优化的重要手段，毕竟现在动辄几兆乃至几十兆的JS文件，在极端情况下可能造成长达数十秒的白屏时间，而SSR就可以通过体积较小的HTML来优化用户体验，让用户先看到一部分结果。 ❓那么为什么客户端渲染会出现长时间的白屏而浏览器渲染不会呢？ 服务器端渲染的历史早期服务器端渲染 早期服务器端渲染流程： 浏览器发起请求，用户访问页面 URL，向服务器端发送请求。 服务器端接收到请求后，开始处理页面请求。 服务器端查询数据库获取所需数据。 服务器端将获取到的数据填...

1. Context API1.1 核心概念通过Provider + useContext实现全局状态管理 useContext：用来在组件树中共享数据，避免多层 props 传递。 useReducer：用来管理复杂的状态逻辑（类似 Redux 的 reducer 思路）。 组合起来，你就能实现一个 小型 Redux，但更轻量，代码量也少。是一个局部可控的状态中心 Context（上下文对象） 作用：存储你希望在组件树中共享的状态或数据。 特点： defaultValue 是当组件树上层没有 Provider 时使用的默认值。 Context 本身只是一个容器，不管理状态的更新。 Provider（提供者） 作用：将状态传递给子孙组件。 特点： value 是共享的数据或状态。 Provider 可以嵌套，每个 Provider 都会覆盖上层 Provider 的值。 Consumer（消费者） 作用：在组件中获取 Context 的值。 特点： 函数子组件接收当前 Context 的值。 现代 React 更常用 useContext Hook 替...