博客

docker.md

Thu, 02 Jul 2026 00:00:00 GMT

docker原理

1. 什么是docker

Docker是一种容器化平台，它将应用程序及其依赖项打包成轻量级、可移植的容器。与虚拟机不同，容器共享宿主机内核，启动速度快、资源占用低。Docker通过镜像实现应用的一致性交付，让开发、测试、生产环境保持一致，解决了"在我机器上能运行"的难题，大幅提升了部署效率和环境一致性。

2. 镜像与容器的类比

📦 镜像（Image）= 蛋糕模具

镜像就像是一个蛋糕模具——它包含了制作蛋糕所需的所有配方（代码、运行环境、依赖库、配置文件等），是一个静态的、只读的模板。一次制作，多次使用，不会自己"动"，只是一个蓝图，体积小、可复制、可分享。

🥧 容器（Container）= 烤好的蛋糕

容器是基于镜像"烤"出来的实际蛋糕——它是镜像的运行时实例，拥有独立的文件系统、进程空间和网络配置。可以启动、停止、暂停、删除，运行时状态是动态变化的，多个容器可以同时运行，互不干扰。

⚖️ 核心区别

特性	镜像 (Image)	容器 (Container)
状态	静态、只读	动态、可读写
作用	定义"做什么"	实际"运行什么"
生命周期	持久保存	随用随创建/销毁
类比	蛋糕模具	烤好的蛋糕

🎯 一句话总结

镜像就是"说明书"，容器就是"按说明书生产出来的产品"。一个镜像可以启动成百上千个容器，就像一个模具可以烤出无数个蛋糕一样！

3. Dockerfile与多阶段构建

Dockerfile是构建镜像的脚本文件，通过一系列指令（FROM、RUN、COPY、CMD等）定义镜像的构建过程。多阶段构建是Docker 17.05引入的特性，允许在一个Dockerfile中使用多个FROM指令，每个阶段可以使用不同的基础镜像。

优势：

减小镜像体积：只保留最终运行所需的文件，丢弃构建过程中的临时文件
提高安全性：构建环境和运行环境分离，避免将敏感信息带入生产镜像

示例：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4. Docker Compose编排

Docker Compose是用于定义和运行多容器Docker应用的工具。通过一个YAML文件（docker-compose.yml）配置应用的服务、网络、卷等，使用一条命令即可启动整个应用栈。

核心概念：

Service：定义一个容器服务
Network：容器间的网络通信
Volume：数据持久化存储

示例（docker-compose.yml）：

version: '3.8'
services:
  web:
    build: .
    ports:
      - "80:80"
    depends_on:
      - db
  db:
    image: mysql:8
    volumes:
      - mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  mysql-data:

5. 数据卷与持久化

容器的文件系统是临时的，容器删除后数据会丢失。数据卷（Volume）是Docker提供的持久化存储方案。

三种数据持久化方式：

方式	特点	适用场景
Named Volume	Docker管理，存储在宿主机特定目录	数据库、配置文件
Bind Mount	挂载宿主机任意目录	开发时代码热更新
tmpfs	内存中的临时文件系统	敏感数据、临时缓存

数据卷优势：

数据独立于容器生命周期
便于容器间共享数据
支持备份、恢复和迁移

6. Docker网络模式

Docker提供多种网络模式，满足不同场景的网络需求：

模式	说明
bridge	默认模式，容器间通过虚拟网桥通信
host	共享宿主机网络栈，性能最高
none	完全隔离，无网络连接
container	共享另一个容器的网络命名空间
自定义网络	用户创建的隔离网络，推荐用于多容器通信

最佳实践：

使用自定义网络隔离不同应用
通过服务名进行容器间通信
避免使用host网络模式

nginx.md

Tue, 30 Jun 2026 00:00:00 GMT

nginx原理

1. 什么是Nginx

Nginx是一款高性能的HTTP和反向代理服务器，由俄罗斯工程师Igor Sysoev开发。它以轻量级、高并发、低内存消耗著称，采用事件驱动模型处理请求，能够在单机上轻松应对数万级并发连接。Nginx不仅可以作为Web服务器直接提供静态资源服务，还广泛用于反向代理、负载均衡、缓存加速等场景，是现代Web架构中不可或缺的核心组件。

2. Nginx的核心类比

🏨 Nginx = 五星级酒店前台

把Nginx想象成一家五星级酒店的前台接待员，这个类比能帮你理解它的核心功能：

客人进门（客户端请求）： 所有客人（HTTP请求）都必须经过前台（Nginx），前台不会直接提供客房服务，而是负责引导和分配。

询问需求（请求解析）： 前台会询问客人的需求——是要办理入住（静态资源请求）、用餐（API请求），还是会议服务（WebSocket连接）。

分配房间（请求路由）： 根据需求，前台将客人引导到对应的楼层和房间：

静态资源 → 直接从前台旁边的储物架拿取（本地文件）
API请求 → 转交给客房服务员（后端应用服务器）
负载均衡 → 根据房间占用情况分配（轮询、权重等策略）

处理突发情况（高并发）： 即使同时来了大量客人，前台也能高效处理，因为它采用"非阻塞"方式——不需要每个客人都单独占用一个前台人员。

⚖️ 核心区别：正向代理 vs 反向代理

代理类型	类比场景	作用对象	典型用途
正向代理	旅行社帮游客订机票	代表客户端	翻墙、缓存、隐藏客户端IP
反向代理	酒店前台代表酒店	代表服务端	负载均衡、安全防护、SSL终止

3. 负载均衡策略

Nginx支持多种负载均衡算法，适用于不同场景：

算法	说明	适用场景
round_robin	默认轮询，依次分配	后端服务器性能相近
least_conn	分配给连接数最少的服务器	请求处理时间差异大
ip_hash	根据客户端IP哈希分配	需要会话保持
weight	按权重分配，权重越高分配越多	服务器性能差异大

配置示例：

upstream backend {
    server 192.168.1.10 weight=3;
    server 192.168.1.11 weight=2;
    server 192.168.1.12 backup;
}

server {
    location /api/ {
        proxy_pass http://backend;
    }
}

4. Nginx配置文件结构

Nginx配置文件（nginx.conf）采用模块化结构，主要包含以下层级：

main        # 全局配置（user、worker_processes、error_log）
├── events  # 事件驱动配置（worker_connections、use epoll）
└── http    # HTTP协议配置
    ├── upstream  # 上游服务器配置（负载均衡）
    └── server    # 虚拟主机配置
        └── location  # 路径匹配与处理规则

核心指令说明：

worker_processes: 工作进程数，通常设为CPU核心数
worker_connections: 每个进程最大连接数
proxy_pass: 反向代理到上游服务器
root: 设置静态文件根目录
try_files: 尝试按顺序查找文件

5. 性能优化技巧

1. 调整工作进程和连接数：

worker_processes auto;
worker_connections 10240;

2. 开启gzip压缩：

gzip on;
gzip_types text/plain text/css application/json;
gzip_min_length 1000;

3. 配置缓存：

location ~* \.(jpg|png|css|js)$ {
    expires 7d;
    add_header Cache-Control "public, no-transform";
}

4. 启用sendfile和tcp_nopush：

sendfile on;
tcp_nopush on;

6. 高可用方案

主备模式（Keepalived + Nginx）：

两台Nginx服务器，一台主服务器提供服务，一台备用
Keepalived通过VRRP协议实现自动故障切换
当主服务器宕机时，备用服务器自动接管VIP

集群模式（Nginx + Consul）：

多台Nginx组成集群，通过Consul实现服务发现
动态感知后端服务器状态，自动剔除故障节点
支持水平扩展，应对更高并发

React 18 并发特性：让你的应用像奶茶店一样高效运转

Wed, 24 Dec 2025 00:00:00 GMT

React 18 并发特性：让你的应用像奶茶店一样高效运转

想象一下：你去奶茶店点单，店员告诉你要等20分钟。你可能会想："这么久？那我去隔壁买个面包再来？"

但如果奶茶店采用了"并发处理"的方式呢？店员先给你点单，然后在做奶茶的同时，也接待其他顾客。等你买完面包回来，奶茶刚好做好。这样是不是效率高多了？

React 18引入的并发特性，就相当于给你的应用装上了这样一个智能的"奶茶店系统"。

什么是React并发？

简单来说，并发就是React可以"同时"处理多个任务，但这里的"同时"不是真的并行执行（毕竟JavaScript是单线程的），而是一种"交替处理"的艺术。

就像奶茶店的店员，虽然一次只能做一杯奶茶，但他可以在等待奶茶煮好的间隙，去接待其他顾客。

并发特性的核心：可中断渲染

在React 18之前，一旦React开始渲染，它就会"霸占"主线程，直到整个组件树渲染完成。这就像奶茶店的店员一旦开始做你的奶茶，就拒绝接待其他所有顾客，直到你的奶茶做好为止——这显然效率很低。

而React 18的并发特性允许渲染过程被"中断"。当有更重要的任务（比如用户点击按钮）进来时，React可以暂停当前的渲染，先处理用户的操作，然后再回来继续渲染。

实际应用：Suspense 和 lazy 加载

让我们看一个生活化的例子：你打开一个社交媒体应用，首先看到的是好友列表，然后是动态流。

在React 18之前，如果动态流加载很慢，整个页面都会卡住，直到动态流加载完成。

但使用React 18的Suspense和lazy加载，我们可以这样处理：

import React, { Suspense, lazy } from 'react';

// 懒加载动态流组件
const Feed = lazy(() => import('./Feed'));

function SocialApp() {
  return (
    <div className="social-app">
      <h1>我的社交应用</h1>
      {/* 好友列表立即渲染 */}
      <FriendsList />
      
      {/* 动态流加载时显示占位符 */}
      <Suspense fallback={<div className="loading">正在加载动态流...</div>}>
        <Feed />
      </Suspense>
    </div>
  );
}

这样，用户可以先看到好友列表并与之交互，而不必等待整个页面加载完成。就像你去餐厅吃饭，先上凉菜，热菜慢慢上——总比饿着肚子等所有菜一起上要舒服得多。

并发更新：优先级管理

React 18还引入了"优先级管理"的概念。不同的任务有不同的优先级：

用户交互（点击、输入）：高优先级
数据加载：中优先级
后台更新：低优先级

就像奶茶店会优先处理"马上要赶火车"的顾客，React也会优先处理用户的即时操作，确保应用响应迅速。

useTransition：让缓慢的操作"优雅降级"

有时候，我们需要执行一个比较耗时的操作，但又不想阻塞用户界面。这时候就可以使用useTransition钩子：

import { useState, useTransition } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(e) {
    const newQuery = e.target.value;
    setQuery(newQuery);
    
    // 使用transition包装耗时操作
    startTransition(() => {
      // 模拟搜索API调用
      const results = performSearch(newQuery);
      setSearchResults(results);
    });
  }

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="搜索..."
      />
      {isPending && <div>正在搜索...</div>}
      <ul>
        {searchResults.map(result => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

使用useTransition后，当用户输入时，输入框会立即更新（高优先级），而搜索结果的更新会被标记为低优先级，不会阻塞用户的输入体验。

就像你在奶茶店点了一杯复杂的奶茶，店员会先给你一个号码牌（立即响应），然后慢慢做奶茶（后台处理）——这样你就不会感觉被忽视了。

useDeferredValue：延迟更新非关键UI

useDeferredValue是另一个并发钩子，它可以延迟更新UI的一部分，直到其他更重要的更新完成：

import { useState, useDeferredValue } from 'react';

function SearchResults({ query }) {
  // 延迟查询的更新
  const deferredQuery = useDeferredValue(query);
  
  // 只有当deferredQuery稳定后才重新计算结果
  const results = useMemo(() => {
    return searchItems(deferredQuery);
  }, [deferredQuery]);

  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

这就像你在超市购物，收银员会先扫描你的商品（关键任务），然后再慢慢整理小票和找零（非关键任务）——这样可以让你更快地完成主要流程。

并发特性的未来：Server Components

React团队还在开发Server Components（服务端组件），这是并发特性的一个重要延伸。

简单来说，Server Components允许组件在服务器上渲染，然后将结果发送到客户端。这可以减少客户端的JavaScript体积，提高应用性能。

想象一下：你去餐厅吃饭，餐厅已经提前准备好了大部分食材（服务端渲染），厨师只需要在你点单后快速烹饪（客户端交互）——这样可以大大缩短等待时间。

总结

React 18的并发特性不是一个单一的API，而是一整套让应用更高效、更响应的机制。它让React应用可以像一个管理良好的奶茶店一样：

高效处理多个任务
优先响应重要请求
让用户感觉流畅、不卡顿

虽然并发特性听起来很高级，但它的核心思想其实很简单：让应用更懂用户，更在乎用户的体验。

所以，下次当你使用React 18开发应用时，不妨想想那个高效的奶茶店——你的用户会感谢你为他们提供的流畅体验。

React并发模式：让应用像手机APP一样流畅

Wed, 25 Dec 2024 00:00:00 GMT

React并发模式：让应用像手机APP一样流畅

你有没有遇到过这种情况？当你在手机上刷朋友圈时，即使图片还在加载，你依然可以顺畅地上下滑动；或者在使用高德地图时，即使路线还在计算，你也能继续缩放查看地图。这种「不卡」的体验，其实就是并发处理的功劳。

而React 18推出的并发模式（Concurrent Mode），就是要把这种手机APP级别的流畅体验，带到Web应用中。

什么是并发模式？

简单来说，并发模式就是让React能够「一心多用」。在传统模式下，React处理渲染任务时是「一根筋」的——一旦开始渲染，就必须完成，中间不能被打断。如果遇到复杂的计算或大量数据渲染，页面就会「卡」住，用户的点击、滚动等操作都会没有响应。

而并发模式下，React可以中断渲染，优先处理用户的交互操作，等用户操作完成后，再继续之前的渲染任务。就像你在写代码时，突然收到一条微信消息，你可以先回消息，然后再继续写代码一样。

Suspense：让异步加载更优雅

说到并发模式，就不得不提Suspense。这个功能可以让我们以同步的方式写异步代码，听起来是不是很神奇？

比如，以前我们加载图片或数据时，通常需要这样写：

// 传统的异步加载方式
function ImageComponent({ src }) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const img = new Image();
    img.onload = () => setIsLoading(false);
    img.onerror = () => setError('加载失败');
    img.src = src;
  }, [src]);
  
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>{error}</div>;
  
  return <img src={src} alt="" />;
}

代码看起来很繁琐，要处理加载中、错误等各种状态。而使用Suspense后，代码可以变得非常简洁：

// 使用Suspense的异步加载方式
const LazyImage = lazy(() => import('./ImageComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <LazyImage src="https://example.com/large-image.jpg" />
    </Suspense>
  );
}

Suspense帮我们处理了所有的加载状态，我们只需要关注核心逻辑即可。

并发模式的实际应用场景

1. 流畅的列表滚动

想象一下，你有一个包含上千条数据的列表，当用户快速滚动时，如果每条数据都需要复杂的计算和渲染，传统模式下页面肯定会卡顿。

而在并发模式下，React可以根据用户的滚动速度，动态调整渲染优先级。当用户快速滚动时，React会先渲染可见区域的内容，跳过不可见区域；当用户停止滚动时，再渲染剩余的内容。

2. 智能的表单输入

在复杂的表单中，我们经常需要实时验证用户输入。传统模式下，如果验证逻辑很复杂，用户在输入时可能会感到卡顿。

并发模式下，React可以将验证逻辑的优先级调低，确保用户的输入操作始终是流畅的。即使用户快速输入，界面也能及时响应，验证结果会在后台慢慢计算并更新。

3. 优雅的页面切换

使用React Router时，传统模式下页面切换是「瞬间替换」的。如果新页面需要加载大量数据，用户会看到一个空白页或加载动画。

而在并发模式下，我们可以实现「无缝切换」：旧页面保持显示，新页面在后台加载数据和渲染，加载完成后再平滑过渡。

如何开启并发模式？

在React 18中，并发模式已经成为默认选项。我们只需要使用createRoot API来替代原来的ReactDOM.render：

// 传统模式
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// 并发模式
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

就是这么简单！开启并发模式后，React会自动为我们处理很多性能优化。

注意事项

虽然并发模式很强大，但也有一些需要注意的地方：

副作用管理：在并发模式下，组件可能会被多次渲染或中断，所以要确保副作用（如API调用、DOM操作）的逻辑是「幂等」的，即多次执行不会产生不同的结果。
第三方库兼容性：有些旧的React库可能还没有适配并发模式，使用时需要注意测试。
性能测试：并发模式不是万能的，还是需要结合性能分析工具（如React DevTools的Profiler）来找出真正的瓶颈。

总结

React并发模式就像是给我们的Web应用装了一个「智能调度器」，它能根据用户的操作，动态调整渲染优先级，让应用变得更加流畅和响应迅速。

虽然并发模式的概念听起来有点复杂，但使用起来其实很简单——大多数情况下，我们只需要把ReactDOM.render换成createRoot，就能享受到并发模式带来的好处。

如果你还没有尝试过并发模式，不妨在你的下一个React项目中试试看，相信你会被它的流畅体验所惊艳！

React Hooks 入门指南

Mon, 23 Dec 2024 00:00:00 GMT

React Hooks 入门指南

React Hooks 是 React 16.8 引入的新特性，它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 让函数组件拥有了类组件的能力，同时代码更加简洁和易于维护。

什么是 Hooks

Hooks 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数。React 内置了一些常用的 Hooks，如 useState、useEffect、useContext 等。

useState Hook

useState 是最常用的 Hook，用于在函数组件中添加 state。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

useState 返回一个数组，第一个元素是当前的 state 值，第二个元素是更新该 state 的函数。

useEffect Hook

useEffect 用于处理副作用操作，如数据获取、订阅、手动修改 DOM 等。

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>加载中...</div>;

  return <div>欢迎, {user.name}!</div>;
}

useEffect 接受两个参数：一个函数和一个依赖数组。当依赖数组中的值发生变化时，effect 会重新执行。

useContext Hook

useContext 让你可以在函数组件中读取 context 的值，而无需使用 Consumer 组件。

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>点击我</button>;
}

自定义 Hooks

你可以创建自己的 Hooks 来复用状态逻辑。

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

function App() {
  const { width, height } = useWindowSize();
  return <div>窗口大小: {width} x {height}</div>;
}

Hooks 使用规则

使用 Hooks 时需要遵循以下规则：

只在函数最外层调用 Hook：不要在循环、条件判断或者子函数中调用
只在 React 函数中调用 Hook：在 React 函数组件或自定义 Hook 中调用

// 错误示例
function BadExample() {
  if (condition) {
    const [count, setCount] = useState(0); // 不要在条件语句中使用
  }
}

// 正确示例
function GoodExample() {
  const [count, setCount] = useState(0);
  if (condition) {
    // 在这里使用 count
  }
}

总结

React Hooks 为函数组件带来了强大的能力，让我们能够更优雅地编写 React 组件。掌握常用的 Hooks 和自定义 Hooks 的编写，将大大提升你的 React 开发效率。

React 组件性能优化技巧

Mon, 23 Dec 2024 00:00:00 GMT

React 组件性能优化技巧

在构建大型 React 应用时，性能优化是一个不可忽视的重要话题。本文将介绍几种常用的 React 组件性能优化技巧，帮助你构建更高效的应用。

使用 React.memo 避免不必要的渲染

React.memo 是一个高阶组件，它对函数组件进行记忆化处理。只有当 props 发生变化时，组件才会重新渲染。

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  console.log('渲染 ExpensiveComponent');
  return <div>{data.map(item => <div key={item.id}>{item.name}</div>)}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const data = [{ id: 1, name: 'Item 1' }];

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>点击: {count}</button>
      <ExpensiveComponent data={data} />
    </div>
  );
}

使用 useMemo 缓存计算结果

useMemo 可以缓存计算结果，避免在每次渲染时重复执行昂贵的计算。

function ExpensiveCalculation({ numbers }) {
  const sum = useMemo(() => {
    console.log('执行复杂计算');
    return numbers.reduce((acc, num) => acc + num, 0);
  }, [numbers]);

  return <div>总和: {sum}</div>;
}

使用 useCallback 缓存函数

useCallback 可以缓存函数引用，避免在每次渲染时创建新的函数实例，这对于传递给子组件的回调函数特别有用。

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('按钮被点击');
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

const ChildComponent = React.memo(function ChildComponent({ onClick }) {
  console.log('渲染 ChildComponent');
  return <button onClick={onClick}>子组件按钮</button>;
});

使用列表渲染时的 key 优化

在渲染列表时，为每个元素提供稳定的 key 属性，帮助 React 识别哪些元素发生了变化。

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

注意：不要使用数组索引作为 key，特别是在列表可能会重新排序的情况下。

代码分割和懒加载

使用 React.lazy 和 Suspense 实现组件的懒加载，减少初始加载体积。

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>加载中...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

虚拟化长列表

对于包含大量数据的列表，使用虚拟滚动技术只渲染可见区域的元素。

import { FixedSizeList as List } from 'react-window';

function Row({ index, style }) {
  return (
    <div style={style}>
      行 {index}
    </div>
  );
}

function VirtualList({ items }) {
  return (
    <List
      height={400}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}

避免内联对象和数组

避免在 JSX 中直接创建对象和数组，这会导致每次渲染都创建新的引用。

// 不好的做法
function BadComponent() {
  return <ChildComponent style={{ color: 'red' }} />;
}

// 好的做法
function GoodComponent() {
  const style = useMemo(() => ({ color: 'red' }), []);
  return <ChildComponent style={style} />;
}

使用生产版本构建

确保在生产环境中使用 React 的生产版本，它会移除开发时的警告和检查，性能更好。

# 构建生产版本
npm run build

总结

性能优化是一个持续的过程，需要根据实际场景选择合适的优化策略。记住一个重要原则：过早优化是万恶之源。先确保代码正确，再通过性能分析工具找出真正的瓶颈，然后针对性地进行优化。

React 18 新特性详解

Mon, 23 Dec 2024 00:00:00 GMT

React 18 新特性详解

React 18 是 React 的一个重要版本更新，带来了许多令人兴奋的新特性和改进。本文将详细介绍 React 18 的主要新特性，帮助你更好地理解和使用这些功能。

并发渲染（Concurrent Rendering）

并发渲染是 React 18 的核心特性，它允许 React 准备多个版本的 UI 同时进行。这意味着 React 可以中断渲染过程，优先处理更重要的更新，然后再恢复被中断的渲染。

// 启用并发模式
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

自动批处理（Automatic Batching）

React 18 改进了批处理机制，现在可以在更多场景下自动批处理状态更新，减少不必要的重新渲染。

// React 17: 会导致两次渲染
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

// React 18: 自动批处理，只渲染一次
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

// 即使在异步操作中也能自动批处理
function handleClick() {
  fetchSomething().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
  });
}

新的 Hooks

useTransition

useTransition 用于标记非紧急的状态更新，让 React 优先处理更重要的更新。

import { useTransition } from 'react';

function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);

    startTransition(() => {
      const filtered = largeList.filter(item => item.includes(value));
      setList(filtered);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />
      {isPending && <div>加载中...</div>}
      <ul>{list.map(item => <li key={item}>{item}</li>)}</ul>
    </div>
  );
}

useDeferredValue

useDeferredValue 用于延迟更新某个值，类似于防抖，但由 React 内部优化。

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <Results query={deferredQuery} />
    </div>
  );
}

useId

useId 用于生成唯一的 ID，特别适用于可访问性属性。

import { useId } from 'react';

function Form() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>邮箱</label>
      <input id={id} type="email" />
    </div>
  );
}

Suspense 改进

React 18 对 Suspense 进行了重要改进，现在支持服务端渲染。

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <DataComponent />
    </Suspense>
  );
}

严格模式变化

React 18 的严格模式会双重调用组件的 effects，帮助开发者发现副作用问题。

// 开发模式下，effect 会被调用两次
useEffect(() => {
  console.log('Effect 被调用');
  return () => {
    console.log('Cleanup 被调用');
  };
}, []);

新的客户端和服务器 API

createRoot

新的 createRoot API 替代了旧的 render 方法。

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

hydrateRoot

用于服务端渲染的 hydration。

import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root'), <App />);

移除的 API

React 18 移除了一些过时的 API：

ReactDOM.render → 使用 createRoot
ReactDOM.hydrate → 使用 hydrateRoot
unmountComponentAtNode → 使用 root.unmount()
render 的回调参数

流式服务端渲染（Streaming SSR）

React 18 支持流式服务端渲染，允许服务器逐步发送 HTML 片段。

import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
  });
});

总结

React 18 带来了许多重要的改进和新特性，特别是并发渲染和自动批处理，这些都将显著提升 React 应用的性能和用户体验。升级到 React 18 后，你可以逐步采用这些新特性，让应用更加高效和流畅。

注意：React 18 是向后兼容的，你可以逐步迁移，不必一次性更新所有代码。