新增 React 特性

<Activity />组件

<Activity />允许你将应用程序分解为可以控制和优先处理的”活动”部分。这个组件可以作为条件渲染页面部分的替代方案：

1
2
3
4
5
6
7
8
9

// 之前
{
  isVisible && <Page />;
}

// 之后
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>;

在React 19.2中，<Activity /> 支持两种模式：visible（可见）和 hidden（隐藏）：

• hidden: 隐藏子元素，卸载效果，并推迟所有更新，直到 React 没有其他工作要处理。
• visible: 显示子元素，挂载效果，并允许正常处理更新。

这意味着你可以预渲染并继续渲染应用程序中隐藏的部分，而不会影响屏幕上可见内容的性能。你可以使用 <Activity /> 渲染用户可能接下来会导航到的隐藏部分，或保存用户导航离开时部分的状态。这通过在后台加载数据、CSS和图像来帮助加快导航速度，并允许返回导航保持状态，如输入字段。

useEffectEvent

useEffectEvent 是解决 useEffect 中一个常见模式的工具，用于通知应用代码来自外部系统的某些”事件”。例如，当聊天室连接时，你可能想要显示通知。

传统方法的问题在于，内部”事件”使用的任何值的更改都会导致周围的 Effect 重新运行。例如，更改主题会导致聊天室重新连接。这对于与 Effect 逻辑本身相关的值（如 roomId）是有意义的，但对于 theme 则没有意义。

使用 useEffectEvent ，你可以将”事件”部分的逻辑从发出它的 Effect 中分离出来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ 所有依赖项已声明（Effect Events 不是依赖项）
  // ...
}

类似于DOM事件，Effect Events 始终”看到”最新的 props 和 state。

cacheSignal

cacheSignal 仅用于 React 服务器组件。它允许你知道 cache() 生命周期何时结束：

1
2
3
4
5
6

import { cache, cacheSignal } from 'react';
const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

这允许你在缓存不再使用结果时清理或中止工作，例如：

• React 已成功完成渲染
• 渲染被中止
• 渲染失败

性能追踪（Performance Tracks）

React 19.2 在 Chrome DevTools 性能配置文件中添加了一组新的自定义轨道，为你的 React 应用性能提供更多信息：

调度器（Scheduler）轨道

显示 React 正在处理的不同优先级的工作，如针对用户交互的 “blocking” 或针对 startTransition 内更新的 “transition” 。在每个轨道内部，你将看到正在执行的工作类型，如调度更新的事件以及该更新渲染发生的时间。

组件（Components）轨道

显示 React 正在处理以进行渲染或运行效果的组件树。在内部，你会看到诸如 “Mount” 标签表示子项挂载或效果被挂载，或 “Blocked” 表示由于让位于 React 之外的工作而阻塞渲染。

新增 React DOM 特性

部分预渲染（Partial Pre-rendering）

在 React 19.2 中，添加了一个新功能，允许提前预渲染应用程序的一部分，然后稍后恢复渲染。

这个功能被称为”部分预渲染”，允许你预渲染应用程序的静态部分并从 CDN 提供服务，然后稍后恢复渲染外壳以填充动态内容。

要预渲染稍后恢复的应用程序，首先使用 AbortController 调用 prerender：

1
2
3
4
5
6
7
8

const { prelude, postponed } = await prerender(<App />, {
  signal: controller.signal
});

// 保存延迟状态以供后续使用
await savePostponedState(postponed);

// 发送前奏到客户端或CDN

然后，你可以将前奏返回给客户端，随后调用 resume 以”恢复”到 SSR 流：

1
2
3
4

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);

// 将流发送到客户端

或者你可以调用 resumeAndPrerender 以恢复以获取静态 HTML 进行 SSG：

1
2
3
4

const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState);

// 将完整的HTML前奏发送到CDN

值得注意的变更

服务端渲染中的 Suspense 边界批处理

修复了一个行为错误，即 Suspense 边界的显示会根据它们是在客户端还是服务器端流式渲染时而有所不同。

从 React 19.2 开始，React 将短暂地批处理服务器渲染的 Suspense 边界的显示，以允许更多内容一起显示，并与客户端渲染行为对齐。

服务端渲染：Node 的 Web Streams 支持

增加了对 Node 环境 Web Streams API 的支持，使得服务端渲染更加高效。

eslint-plugin-react-hooks v6

更新了 React Hooks 的 ESLint 插件，以支持新的 useEffectEvent 语法，并确保不会将 Effect Events 误添加到依赖数组中。

更新默认 useId 前缀

调整了 useId 生成 ID 的默认前缀，使其更符合现代 Web 开发需求。

总结

React 19.2 的发布标志着 React 生态系统持续发展的又一重要里程碑。新加入的 <Activity /> 组件为应用状态管理提供了更精细的控制方式；useEffectEvent 解决了 Effect 依赖管理的经典问题；部分预渲染功能进一步提升了应用性能和用户体验；而性能追踪工具则为开发者提供了更深入的性能分析能力。

这些改进不仅提高了 React 应用的性能和可维护性，也为未来 React 的发展奠定了基础。特别是 <Activity /> 组件的设计理念，预示着 React 在应用架构方面的新方向，未来可能会增加更多模式以满足不同场景的需求。

‌模块联邦的核心概念‌

模块联邦通过去中心化的设计，允许不同应用在运行时直接共享模块，无需重复打包或依赖 NPM 安装。其核心特点包括：

1. ‌独立构建与部署‌：每个应用（容器或远程）可单独开发、部署，通过暴露（exposes）和引用（remotes）机制实现模块共享。‌‌‌‌

2. 运行时动态加载‌：模块按需异步加载，减少初始包体积，提升性能。‌‌

3. ‌依赖共享‌：通过 shared 配置（如React、ReactDOM）避免重复加载，确保单例模式。‌‌‌‌

‌典型应用场景‌

1. ‌微前端架构‌：将多个子应用集成到宿主容器中，实现技术栈解耦和独立部署。‌‌

2. ‌跨项目组件复用‌：通用组件（如按钮、表单）可被多个项目动态引用，减少重复开发。‌‌

3. 依赖优化‌：共享第三方库（如 Lodash ）以降低整体打包体积。‌‌

实现步骤与配置

1. 使用 ModuleFederationPlugin 声明远程模块入口（remotes）和共享依赖（shared）。‌‌

1
2
3
4
5
6
7
8
9
10

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: { app1: 'app1@http://example.com/remoteEntry.js' },
      shared: { react: { singleton: true } }
    })
  ]
};

2. 远程应用配置通过 exposes 暴露模块，并配置共享依赖

1
2
3
4
5
6

new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: { './Button': './src/Button' },
  shared: { react: { singleton: true } }
});

导入属性（Import Attributes）

解决的问题：
之前无法直接将 JSON 文件作为模块导入，需要借助 Node.js 的 require 或其他工具函数。这使得在不同环境中处理 JSON 数据缺乏统一的标准方式。
现在提供了一种标准化的方式在导入模块时指定附加信息，如类型断言，确保导入的内容符合预期格式。
例如可以使用 import 语句导入 JSON 文件，并使用 with 关键字指定模块类型为 json。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 使用 import attributes 特性导入JSON
import config from './config.json' with { type: 'json' };

// 动态导入时使用属性
const dynamicModule = await import('./data.json', {
  with: { type: 'json' }
});

console.log(config.environment); // 访问JSON内容
console.log(dynamicModule.default); // 访问动态导入的JSON内容

// 未来可能支持其他类型的模块
// import wasmModule from './module.wasm' with { type: 'webassembly' };
// import cssModule from './styles.css' with { type: 'css' };

迭代器辅助方法（Iterator Helpers）

解决的问题：
传统上，在处理迭代器时，如果想使用 map、filter 等方法，必须先转换为数组，这会消耗大量内存。
现在迭代器辅助方法提供了链式操作的能力，同时保持惰性求值的优势。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 旧方式 - 需要转换为数组，占用内存
const result1 = Array.from([1, 2, 3, 4, 5])
  .filter(x => x % 2 === 0)
  .map(x => x * 2);

// 新方式 - 直接在迭代器上操作，内存友好
const result2 = [1, 2, 3, 4, 5]
  .values()
  .filter(x => x % 2 === 0)
  .map(x => x * 2)
  .toArray();

// 使用其他迭代器方法
const filtered = [1, '', 2, null, 3, undefined, 4]
  .values()
  .filter(Boolean) // 过滤假值
  .map(x => x * 2)
  .take(3) // 只取前3个元素
  .toArray();

console.log(filtered); // [2, 6, 8]

// 无限序列示例
function* fibonacci() {
  let a = 0,
    b = 1;
  yield a;
  yield b;
  while (true) {
    [a, b] = [b, a + b];
    yield b;
  }
}

const fib10 = fibonacci()
  .drop(5) // 跳过前5个
  .take(10) // 取接下来的10个
  .toArray();

console.log(fib10); // [斐波那契数列中第5到15个数]

Set集合方法增强（New Set Methods）

解决的问题：
之前的 Set 对象缺少集合运算方法，开发者需要自己实现并集、交集、差集等操作，代码冗长且容易出错。
新增了7个集合方法包括：并集 union()、交集 intersection()、差集 difference()、对称差集 symmetricDifference()、子集判断 isSubsetOf()、超集判断 isSupersetOf()、不相交判断isDisjointFrom()，基于哈希表实现，性能高效。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

// 并集
const union = setA.union(setB);
console.log([...union]); // [1, 2, 3, 4, 5, 6]

// 交集
const intersection = setA.intersection(setB);
console.log([...intersection]); // [3, 4]

// 差集
const difference = setA.difference(setB);
console.log([...difference]); // [1, 2]

// 对称差集（异或）
const symmetricDiff = setA.symmetricDifference(setB);
console.log([...symmetricDiff]); // [1, 2, 5, 6]

// 子集判断
const setC = new Set([1, 2]);
console.log(setC.isSubsetOf(setA)); // true

// 超集判断
console.log(setA.isSupersetOf(setC)); // true

// 不相交判断
const setD = new Set([7, 8, 9]);
console.log(setA.isDisjointFrom(setD)); // true (没有共同元素)

正则表达式增强

解决的问题：
包括三个方面的增强：RegExp.escape() 防止特殊字符被误解释，重复命名捕获组，以及内联修饰符，解决了复杂正则表达式的构建和维护问题。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 1. RegExp.escape() - 安全地将字符串转换为正则表达式片段
const userInput = 'How much does it cost? $50.00!'; // 用户输入可能包含特殊字符
const escapedInput = RegExp.escape(userInput);
const regex1 = new RegExp(`.*${escapedInput}.*`);
console.log(regex1.test('Prefix How much does it cost? $50.00! Suffix')); // true

// 2. 重复命名捕获组
const dateRegex = /(?<year>\d{4})-(?<month>\d{2})|(?<month>\d{2})-(?<day>\d{2})/;
const dateStr = '2025-03-15';
const match = dateStr.match(dateRegex);
console.log(match.groups.year); // 2025
console.log(match.groups.month); // 03 (第一个匹配的月份)

// 3. 内联修饰符 - 在模式内部设置标志
const caseInsensitiveHello = /^x(?i:hello)x$/; // 局部设置忽略大小写
console.log(caseInsensitiveHello.test('xHELLOx')); // true
console.log(caseInsensitiveHello.test('xHeLLox')); // true

// 也可以嵌套使用
const mixedFlags = /start(?i:case(?-i:sensitive))end/;
console.log(mixedFlags.test('startCASEsensitiveend')); // false
console.log(mixedFlags.test('startcasesensitiveend')); // true

Promise.try()

解决的问题：
之前同步函数抛出的错误无法直接被 Promise.catch 捕获，开发者通常需要额外的 try/catch 包裹统一同步和异步错误处理。
现在可以使用 Promise.try() 当函数可能同步抛出错误或异步产生错误时，提供一致的错误处理方式。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 一个可能同步抛出错误也可能返回 Promise 的函数
function riskyOperation(value) {
  if (value < 0) {
    throw new Error('Value cannot be negative');
  }
  if (value > 100) {
    return Promise.resolve(value * 2);
  }
  return value * 2;
}

// 旧方式 - 需要额外处理同步错误
function handleWithTryCatch() {
  try {
    return Promise.resolve(riskyOperation(-5));
  } catch (error) {
    return Promise.reject(error);
  }
}

// 新方式 - 统一使用Promise.try
Promise.try(() => riskyOperation(-5))
  .then(result => console.log('Success:', result))
  .catch(error => console.log('Error:', error.message));

Promise.try(() => riskyOperation(150)) // 返回Promise
  .then(result => console.log('Async Success:', result))
  .catch(error => console.log('Async Error:', error.message));

// 实际应用场景
function validateAndProcess(userData) {
  // 可能同步验证失败
  if (!userData.email || !userData.email.includes('@')) {
    throw new Error('Invalid email');
  }

  // 或者异步处理
  return fetch('/api/process-user', {
    method: 'POST',
    body: JSON.stringify(userData)
  });
}

Promise.try(() => validateAndProcess({ email: 'invalid' }))
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Validation or API error:', error.message));

Float16支持（Float16Array, Math.f16round等）

解决的问题：
在图形处理、机器学习等领域，16位浮点数（半精度）比32位浮点数节省一半内存，提高了GPU操作和大数据处理的效率。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 创建Float16数组
const f16Array = new Float16Array([1.5, 2.7, 3.14, 4.0, 5.5]);
console.log(f16Array[2]); // 3.140625 (由于精度限制)

// 使用DataView进行精确读写
const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);

// 设置和获取Float16值
dataView.setFloat16(0, 3.14159, true); // 第三个参数表示是否小端序
const value = dataView.getFloat16(0, true);
console.log(value); // 3.140625

// 数学运算中的Float16舍入
const preciseValue = 3.141592653589793;
const roundedF16 = Math.f16round(preciseValue);
console.log(roundedF16); // 3.140625

// 在图像处理中的应用示例
function processImageData(imageData) {
  // 将RGB值存储在Float16中以节省内存
  const pixels = new Float16Array(imageData.length);

  for (let i = 0; i < imageData.length; i++) {
    pixels[i] = Math.f16round(imageData[i] / 255); // 归一化到[0,1]
  }

  return pixels;
}

Recoild 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

import React from 'react';
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// 将 RecoilRoot 设置为根组件
function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

// atom 代表一个状态。atom 可在任意组件中进行读写。读取 atom 值的组件隐式订阅了该 atom，因此任何 atom 的更新都将致使使用对应 atom 的组件重新渲染
const textState = atom({
  key: 'textState', // 唯一 ID (相对于其它 atoms/selectors)
  default: '' // 默认值 (也被称为初始值)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount userID={123} />
    </div>
  );
}

// 在需要使用的组件中，引入 atom 并使用 useRecoilState()
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = event => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type='text' value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

// selector 代表一个派生状态，派生状态是状态的转换。你可以将派生状态视为将状态传递给以某种方式修改给定状态的纯函数的输出
const charCountState = selector({
  key: 'charCountState', // 唯一 ID (相对于其它 atoms/selectors)
  get: ({ get }) => {
    const text = get(textState);

    return text.length;
  }
});

// 如果希望基于参数进行查询，而不仅仅是基于派生状态。例如，需要根据组件的 props 来查询时可以使用 selectorFamily helper 来实现
const userNameQuery = selectorFamily({
  key: 'UserName',
  get: userID => async () => {
    const response = await myDBQuery({ userID });
    if (response.error) {
      throw response.error;
    }
    return response.name;
  }
});

// 使用 useRecoilValue() 的 来读取 selector 的值
function CharacterCount({ userID }) {
  const count = useRecoilValue(charCountState);
  const userName = useRecoilValue(userNameQuery(userID));

  return (
    <>
      <div>Character Count: {count}</div>
      <div>{userName}</div>
    </>
  );
}

Zustand 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { create } from 'zustand';

// 使用 create 创建一个 store, store 包含了状态和修改状态的方法
const useStore = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
  // 通过 useStore 访问状态和更新方法
  const { count, inc } = useStore();
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  );
}

API

create

create 函数用于创建一个 store。

create 接受一个函数，这个函数接收一个 set 函数和 get 函数，用于更新状态和获取状态。返回一个 useStore hook，在组件中可以通过 useStore hook 来访问状态和调用状态更新函数。

1
2
3
4
5

const useStore = create((set, get) => ({
  count: 0,
  increase: () => set(() => ({ count: get().count + 1 })),
  decrease: () => set(() => ({ count: get().count - 1 }))
}));

subscribe

subscribe 函数用于订阅 store 的变化。

subscribe 方法允许订阅状态的变化。当状态发生变化时，订阅的回调函数会被调用。

1
2
3
4
5
6
7
8
9
10
11
12

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 }))
}));

const unsubscribe = useStore.subscribe(
  state => state.count,
  count => console.log('Count changed to', count)
);

// 取消订阅
unsubscribe();

destroy

destroy 函数用于销毁 store，清除所有订阅。

1
2
3
4
5
6

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 }))
}));

useStore.destroy();

setState

setState 函数用于直接更新 store 的状态，而不是通过定义的状态更新函数来更新状态。

1
2
3
4
5

const useStore = create(set => ({
  count: 0
}));

useStore.setState({ count: 10 });

getState

getState 函数用于直接获取 store 的状态。与 get 方法类似，但 getState 是在 store 上调用的。

1
2
3
4
5
6

const useStore = create(set => ({
  count: 0
}));

const currentState = useStore.getState();
console.log(currentState.count);

注意事项

1. 状态更新函数可以是异步的

1
2
3
4
5
6
7
8

const useStore = create(set => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data });
  }
}));

2. zustand 支持使用中间件来扩展功能，常用的中间件包括：

• devtools: 与 Redux DevTools 兼容的中间件，可以方便地调试状态变化

1
2
3
4
5
6
7
8
9
10

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(set => ({
    count: 0,
    increase: () => set(state => ({ count: state.count + 1 })),
    decrease: () => set(state => ({ count: state.count - 1 }))
  }))
);

• persist: 持久化中间件，可以使用中间件将状态持久化到 localStorage 或 sessionStorage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import create from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

const useStore = create(
  persist(
    set => ({
      count: 0,
      increase: () => set(state => ({ count: state.count + 1 })),
      decrease: () => set(state => ({ count: state.count - 1 }))
    }),
    {
      name: 'count-storage', // 存储的键名
      storage: createJSONStorage(() => sessionStorage) // (可选) 默认使用 localStorage
    }
  )
);

• redux: Redux 中间件，可以将状态管理库与 Redux 库结合使用

1
2
3
4
5

import { createStore, applyMiddleware } from 'redux';
import { createStore as createZustandStore } from 'zustand';
import { redux } from 'zustand/middleware';

const store = createZustandStore(redux(reducer, initialState, applyMiddleware(logger)));

3. 避免将所有状态放在一个大 store 中，建议将状态拆分成多个小的 store，根据不同的功能模块来管理各自的状态

4. 为状态提供合理的默认值，避免因状态未初始化而引起的错误。

5. 避免不必要的状态变化，以减少组件的重新渲染次数

6. 使用 useStore(state => state.count) 精确订阅状态的某一部分变化，避免 useStore.getState() 订阅所有状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}));

const useCount = () => useStore(state => state.count);

function Counter() {
  const count = useCount();
  const increase = useStore(state => state.increase);
  const decrease = useStore(state => state.decrease);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

JSDoc (Github地址) 是一种用于 JavaScript 代码的 API 文档生成工具，它允许开发者通过注释的方式为代码添加文档说明。JSDoc 可以解析这些注释，并生成 HTML 格式的文档，帮助开发者更好地理解和使用代码。JSDoc 采用了 Apache License 2.0 开源协议。VS Code 内置了对 JSDoc 风格注释的支持，在 Javascript 和 TypeScript 代码中书写 JSDoc 风格的注释会自动高亮。

JSDoc 的实现原理

JSDoc 的实现原理主要基于注释解析。开发者在 JavaScript 代码中使用特定格式的注释（通常是以 /** 开头的多行注释），JSDoc 工具会扫描这些注释并提取信息。提取的信息包括函数的参数、返回值、类型、描述等。然后，JSDoc 会将这些信息转换为结构化的文档格式（如 HTML），并生成相应的文档。

JSDoc 常见用法

1. 基本注释格式：

1
2
3
4
5
6
7
8

/**
 * 函数描述
 * @param {类型} 参数名 参数描述
 * @returns {类型} 返回值描述
 */
function example(param) {
  return param;
}

2. 类型注释：
   可以使用 {} 来指定参数和返回值的类型，例如：

1
2
3
4
5
6
7
8

/**
 * @param {string} name 用户名
 * @param {number} age 用户年龄
 * @returns {boolean} 是否成年
 */
function isAdult(name, age) {
  return age >= 18;
}

3. 模块和类注释：
   JSDoc 也支持模块和类的文档注释：

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * @class
 */
class Person {
  /**
   * @constructor
   * @param {string} name
   */
  constructor(name) {
    this.name = name;
  }
}

5. 使用名称路径
   如果涉及到一个 JavaScript 变量，这个变量在文档中的其他地方，你必须提供一个唯一标识符映射到该变量。名称路径提供了一种这样做的方法，并且消除实例成员，静态成员和内部变量之间的歧义

1
2
3
4
5
6
7
8

/**
 * Person#say  // 名为"say"的实例方法
 * Person.say  // 名为"say"的静态方法
 * Person~say  // 名为"say"的内部函数
 * @module foo/bar // 名为"foo/bar"的模块
 * @external String // 内置的 string 对象
 * @event module:foo/bar.event:MyEvent // 一个名为 module:foo/bar.event:MyEvent 的事件
 */

JSDoc 块标签与内联标签

JSDoc支持两种不同类型的标签：

· 块标签(Block): 这是在一个 JSDoc 注释的最高级别。
· 内联标签(inline): 块标签文本中的标签或说明。

块标签通常会提供有关代码的详细信息，如一个函数接受的参数。内联标签通常链接到文件的其他部分，类似于HTML中的锚（<a>）标记。

块标签总是以 @ 符号开头。除了 JSDoc 注释中最后一个块标记，每个块标签后面必须跟一个换行符。

内联标签也以 @ 符号开。然而，内联标签及其文本必须用花括号 { 与 } 括起来。 { 表示行内联标签的开始，而 } 表示内联标签的结束。如果标签文本中包含 }，则必须用 \ 进行转义。在内联标签后，你并不需要使用一个换行符。

大多数 JSDoc 标签是块标签。一般来说，当这个网站上说“JSDoc 标签”，我们真正的意思是“块标签”。block-tags 记录了在 JSDoc 中所有识别的块标签。

如下是一个示例，@param 是一个块标签，而 {@link} 是一个内联标签：

1
2
3
4
5
6
7
8

/**
 * Set the shoe's color. Use {@link Shoe#setSize} to set the shoe size.
 *
 * @param {string} color - The shoe's color.
 */
Shoe.prototype.setColor = function (color) {
  // ...
};

JSDoc 命令行

JSDoc 可以使用命令行工具生成文档：

1
2

npm install -g jsdoc
jsdoc yourfile.js

执行该命令后，JSDoc 会在 /out 目录下生成当前目录的文档。JSDoc 支持大量的命令行选项，其中许多选项有长和短两种形式。

JSDoc 配置文件

JSDoc 的命令行选项也可以在配置文件中指定。要使用配置文件运行 JSDoc，需要使用 -c 命令行选项（例如，jsdoc -c /path/to/conf.json 或 jsdoc -c /path/to/conf.js）。

默认配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "plugins": [], // 无插件加载
  "recurseDepth": 10, // 如果使用 -r 命令行标志启用递归，JSDoc 将搜索 10 层深的文件
  "source": { // 源代码配置
    "includePattern": ".+\\.js(doc|x)?$", // 只有以 .js、.jsdoc 和 .jsx 结尾的文件将会被处理
    "excludePattern": "(^|\\/|\\\\)_" // 任何文件或目录如果以 _ 开始将被忽略
  },
  "sourceType": "module", // "script"，表示脚本文件，"module" 表示模块文件
  "tags": { // 标签配置
    "allowUnknownTags": true, // 允许使用未知的标签
    "dictionaries": ["jsdoc", "closure"] // 允许使用 jsdoc 标签 和 [closure 标签](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler#jsdoc-tags)
  },
  "templates": { // 模板配置
    "cleverLinks": false, // 链接到源码
    "monospaceLinks": false // 源码行号
  }
}

JSDoc 插件

在 JSDoc 中，插件的作用是扩展 JSDoc 的功能，比如添加新的标签、解析新的语法等。首先，需要创建一个包含插件代码的 Javascript 模块，然后将该模块添加到 JSDoc 的配置文件 plugin 参数中，以启用插件。

一个 JSDoc 插件可以：
· 定义事件处理程序
· 定义自定义标签，如 @author、@version 等。
· 定义一个抽象的解析器，用于解析自定义标签。

JSDoc 插件的事件处理程序包括：
Event: parseBegin: JSDoc 开始加载和解析源文件之前，parseBegin 事件被触发。插件可以通过修改事件的内容，来控制哪些文件将被 JSDoc 解析。(>=JSDoc@3.2.0)
Event: fileBegin: 当解析器即将解析一个文件 fileBegin 事件触发。如果需要，插件可以使用此事件触发每个文件的初始化。
Event: beforeParse: beforeParse 事件在解析开始之前被触发。插件可以使用此方法来修改将被解析的源代码。
Event: jsdocCommentFound: 每当 JSDoc 注释被发现，jsdocCommentFound 事件就会被触发。注释可以或不与任何代码相关联。你可以在注释被处理之前使用此事件修改注释的内容。(>=JSDoc@3.5.0)
Event: symbolFound: 当解析器在代码中遇到一个可能需要被文档化的标识符时，symbolFound 事件就会被触发。
Event: newDoclet: newDoclet事件是最高级别的事件。新的 doclet 已被创建时，它就会被触发。这意味着一个 JSDoc 注释或标识符已被处理，并且实际传递给模板的 doclet 已被创建。
Event: fileComplete: 当解析器解析完一个文件时，fileComplete 事件就会被触发。插件可以使用这个事件来触发每个文件的清理。
Event: parseComplete: JSDoc 解析所有指定的源文件之后，parseComplete 事件就会被触发。(>=JSDoc@3.2.0)
Event: processingComplete: JSDoc 更新反映继承和借来的标识符的解析结果后，processingComplete 事件被触发。(>=JSDoc@3.2.1)

JSDoc 包含一个 Markdown 插件来自动将 Markdown 格式文本转换成 HTML。可以通过如下配置开启：

1
2
3
4
5
6
7
8
9

{
    "plugins": ["plugins/markdown"],
    "markdown": {
      "tags": ["foo", "bar"], // 扩展需解析 markdown 的标签
      "excludeTags": ["author"],  // 不解析 markdown 的标签
      "hardwrap": true, // 是否强制换行(>=JSDoc@3.4.0)
      "idInHeadings": true, // 是否在标题中添加 id(>=JSDoc@3.4.0)
    }
}

Markdown 插件默认只解析特定的 JSDoc 标签（@author,@classdesc,@description,@param,@property,@return,@see,@throws），可以通过在配置文件的 markdown.tags 字段中添加标签来扩展解析范围。可以通过 markdown.excludeTags 字段来排除默认标签的解析。

其他功能

· JSDoc 支持通过 --tutorials 或 -u 选项提供 JSDoc 要搜索的教程目录从而为 API 文档添加教程。
· JSDoc 支持通过 --package 或 -P 选项指定 package.json 文件的路径从而在生成文档的时候自动使用 package.json 的信息。(>=JSDoc@3.3.0)
· JSDoc 支持通过 --readme 或 -R 选项指定将 README 文件中的信息合并到文档中。(>=JSDoc@3.3.0)

alias 命令用于为命令创建别名，以便简化输入和提高效率。

用法示例

1

alias ll='ls -la'

这个命令会创建一个别名 ll，用于执行 ls -la 命令。

常见用法

• 创建简单别名：

1

alias gs='git status'

这个命令会创建一个别名 gs，用于快速查看 Git 状态。

• 创建带参数的别名：

1

alias rm='rm -i'

这个命令会创建一个别名 rm，在删除文件时提示确认。

• 查看当前所有别名：

1

alias

这个命令会列出当前会话中所有已定义的别名。

• 删除别名：

1

unalias ll

这个命令会删除别名 ll。

• 将别名永久保存：
  可以将别名添加到用户的 ~/.bashrc 或 ~/.bash_aliases 文件中，以便在每次登录时自动加载。

1
2

echo "alias ll='ls -la'" >> ~/.bashrc
source ~/.bashrc

• 创建复杂的别名（使用函数）：

1

alias mygrep='grep --color=auto'

这个命令会创建一个别名 mygrep，在使用 grep 时自动启用颜色高亮。

• 使用别名时显示帮助信息：

1

alias h='history'

这个命令会创建一个别名 h，用于快速查看命令历史。

awk

awk 是一个强大的文本处理工具，主要用于模式扫描和处理。它可以从文本文件中提取和处理数据。

用法示例

1

awk '{print $1}' filename.txt

这个命令会打印 filename.txt 文件中每一行的第一个字段。

常见用法

• 统计文件中的行数：

1

awk 'END {print NR}' filename.txt

• 计算某一列的总和：

1

awk '{sum += $1} END {print sum}' filename.txt

• 过滤特定模式的行：

1

awk '/pattern/' filename.txt

cat

cat 命令用于连接文件并打印到标准输出，常用于查看文件内容。

用法示例

1

cat filename.txt

这个命令会打印 filename.txt 文件的所有内容。

常见用法

• 查看多个文件的内容：

1

cat file1.txt file2.txt

• 将文件内容输出到另一个文件：

1

cat filename.txt > newfile.txt

• 追加文件内容到另一个文件：

1

cat filename.txt >> existingfile.txt

• 显示行号：

1

cat -n filename.txt

cd

cd 命令用于更改当前工作目录。

用法示例

1

cd /path/to/directory

这个命令会将当前工作目录更改为指定的目录。

常见用法

• 返回上一级目录：

1

cd ..

• 返回用户主目录：

1

cd ~

• 切换到上一次访问的目录：

1

cd -

• 使用相对路径切换目录：

1

cd subdirectory/

这个命令会切换到当前目录下的 subdirectory 目录。

• 切换到多个目录（使用 pushd 和 popd）：

1
2
3

pushd /path/to/directory
# ... 在新目录中工作 ...
popd

这个命令会将当前目录推入目录栈并切换到指定目录，popd 则会返回到之前的目录。

chmod

chmod 命令用于更改文件或目录的权限。

用法示例

1

chmod 755 filename.txt

这个命令会将 filename.txt 的权限更改为可读、可写和可执行（所有者），可读和可执行（组和其他用户）。

常见用法

• 递归更改目录及其内容的权限：

1

chmod -R 755 directory_name

• 仅添加执行权限：

1

chmod +x filename.sh

• 仅移除写权限：

1

chmod -w filename.txt

• 设置特定权限（如只读）：

1

chmod 444 filename.txt

• 使用符号模式更改权限：

1
2
3

chmod u+x filename.txt  # 为文件所有者添加执行权限
chmod g-w filename.txt  # 从组中移除写权限
chmod o=r filename.txt  # 设置其他用户为只读权限

chown

chown 命令用于更改文件或目录的所有者和所属组。

用法示例

1

chown user:group filename.txt

这个命令会将 filename.txt 的所有者更改为 user，所属组更改为 group。

常见用法

• 仅更改文件的所有者：

1

chown user filename.txt

• 仅更改文件的所属组：

1

chown :group filename.txt

• 递归更改目录及其内容的所有者和所属组：

1

chown -R user:group directory_name

• 显示当前文件的所有者和所属组：

1

ls -l filename.txt

• 更改多个文件的所有者：

1

chown user1:usergroup file1.txt file2.txt

cp

cp 命令用于复制文件和目录。

用法示例

1

cp source.txt destination.txt

这个命令会将 source.txt 文件复制到 destination.txt。

常见用法

• 复制文件到另一个目录：

1

cp filename.txt /path/to/directory/

• 复制目录及其内容（使用 -r 选项）：

1

cp -r sourcedir/ targetdir/

• 复制并重命名文件：

1

cp filename.txt newname.txt

• 交互式复制（在覆盖文件前提示确认）：

1

cp -i filename.txt destination.txt

• 复制文件并保留文件属性：

1

cp -p filename.txt destination.txt

curl

curl 是一个用于在命令行中进行数据传输的工具，支持多种协议，包括 HTTP、HTTPS、FTP 等。

用法示例

1

curl http://example.com

这个命令会从 http://example.com 下载内容并打印到标准输出。

常见用法

• 下载文件：

1

curl -O http://example.com/file.txt

• 发送 POST 请求：

1

curl -X POST -d "param1=value1&param2=value2" http://example.com/api

• 添加请求头：

1

curl -H "Authorization: Bearer TOKEN" http://example.com/api

• 显示请求和响应的详细信息：

1

curl -v http://example.com

• 保存输出到文件：

1

curl -o output.txt http://example.com

df

df 命令用于显示文件系统的磁盘空间使用情况。

用法示例

1

df

这个命令会显示所有挂载的文件系统的磁盘使用情况。

常见用法

• 以人类可读的格式显示（例如，KB、MB、GB）：

1

df -h

• 显示特定文件系统的信息：

1

df /path/to/directory

• 显示所有文件系统，包括虚拟文件系统：

1

df -a

• 显示 inode 使用情况：

1

df -i

这个命令会显示每个文件系统的 inode 使用情况。

du

du 命令用于显示目录或文件的磁盘使用情况。

用法示例

1

du /path/to/directory

这个命令会显示指定目录及其子目录的磁盘使用情况。

常见用法

• 显示指定目录的总大小：

1

du -sh /path/to/directory

这个命令会以人类可读的格式（如 KB、MB、GB）显示指定目录的总大小。

• 显示每个子目录的大小：

1

du -h /path/to/directory

这个命令会以人类可读的格式显示指定目录下每个子目录的大小。

• 递归显示所有子目录的大小：

1

du -ah /path/to/directory

这个命令会显示指定目录及其所有子目录和文件的大小。

• 按大小排序显示：

1

du -sh /path/to/directory/* | sort -h

这个命令会显示指定目录下每个文件和子目录的大小，并按大小排序。

• 显示特定深度的目录大小：

1

du -h --max-depth=1 /path/to/directory

这个命令会显示指定目录下的每个子目录的大小，但只显示到第一层深度。

• 显示文件系统的使用情况：

1

du -x /path/to/directory

这个命令会限制 du 只计算指定目录所在的文件系统的大小。

echo

echo 命令用于在终端输出文本或变量的值。

用法示例

1

echo "Hello, World!"

这个命令会在终端打印 Hello, World!。

常见用法

• 输出变量的值：

1
2

name="Alice"
echo "Hello, $name!"

• 输出带有换行符的文本：

1

echo -e "Line 1\nLine 2"

• 不输出换行符：

1

echo -n "This is on the same line."

• 输出带有特殊字符的文本：

1

echo "This is a dollar sign: \$"

find

find 命令用于在目录中查找文件和目录，支持多种搜索条件。

用法示例

1

find /path/to/directory -name "filename.txt"

这个命令会在指定目录中查找名为 filename.txt 的文件。

常见用法

• 查找特定类型的文件：

1

find /path/to/directory -type f -name "*.txt"

这个命令会查找所有以 .txt 结尾的文件。

• 按文件大小查找：

1

find /path/to/directory -size +10M

这个命令会查找大于 10MB 的文件。

• 按修改时间查找：

1

find /path/to/directory -mtime -7

这个命令会查找最近 7 天内修改过的文件。

• 查找并执行命令：

1

find /path/to/directory -name "*.log" -exec rm {} \;

这个命令会查找所有 .log 文件并删除它们。

• 查找并显示详细信息：

1

find /path/to/directory -name "*.txt" -print

这个命令会查找所有 .txt 文件并打印其路径。

• 查找空文件：

1

find /path/to/directory -type f -empty

这个命令会查找所有空文件。

• 查找特定用户的文件：

1

find /path/to/directory -user username

这个命令会查找属于指定用户的文件。

grep

grep 命令用于在文件中搜索指定的模式，并打印匹配的行。

用法示例

1

grep "pattern" filename.txt

这个命令会在 filename.txt 文件中搜索包含 pattern 的行并打印出来。

常见用法

• 忽略大小写搜索：

1

grep -i "pattern" filename.txt

• 显示行号：

1

grep -n "pattern" filename.txt

• 递归搜索目录中的文件：

1

grep -r "pattern" /path/to/directory/

• 只显示匹配的部分：

1

grep -o "pattern" filename.txt

• 反向匹配（显示不包含模式的行）：

1

grep -v "pattern" filename.txt

head

head 命令用于显示文件的开头部分，默认情况下显示前 10 行。

用法示例

1

head filename.txt

这个命令会打印 filename.txt 文件的前 10 行。

常见用法

• 显示指定行数的开头部分：

1

head -n 5 filename.txt

这个命令会打印 filename.txt 文件的前 5 行。

• 显示多个文件的开头部分：

1

head file1.txt file2.txt

• 显示文件的字节数：

1

head -c 20 filename.txt

这个命令会打印 filename.txt 文件的前 20 个字节。

history

history 命令用于显示用户在当前会话中输入的命令历史记录。

用法示例

1

history

这个命令会列出当前用户在终端中输入的所有命令。

常见用法

• 显示最近的命令数量：

1

history 10

这个命令会显示最近输入的 10 条命令。

• 重新执行某条命令：

1

!n

其中 n 是命令在历史记录中的编号。例如，!5 会重新执行历史记录中编号为 5 的命令。

• 清空命令历史：

1

history -c

这个命令会清空当前会话的命令历史记录。

• 将历史记录保存到文件：

1

history > history.txt

这个命令会将当前会话的命令历史保存到 history.txt 文件中。

• 使用 grep 搜索历史记录：

1

history | grep "pattern"

这个命令会在历史记录中搜索包含 pattern 的命令。

• 在命令行中使用上一个命令：

1

!!

这个命令会重新执行上一个输入的命令。

kill/killall

kill 命令用于向进程发送信号，通常用于终止进程。

用法示例

1

kill PID

这个命令会向指定的进程 ID（PID）发送终止信号。

常见用法

• 强制终止进程：

1

kill -9 PID

这个命令会强制终止指定的进程。

• 发送其他信号（如停止进程）：

1

kill -STOP PID

• 查看所有进程并找到 PID：

1

ps aux | grep process_name

• 终止所有匹配的进程：

1

killall process_name

ls

ls 命令用于列出目录中的文件和子目录。

用法示例

1

ls

这个命令会列出当前目录中的所有文件和子目录。

常见用法

• 列出详细信息（包括权限、所有者、大小等）：

1

ls -l

• 列出所有文件，包括隐藏文件（以点开头的文件）：

1

ls -a

• 以人类可读的格式显示文件大小：

1

ls -lh

• 按时间排序列出文件：

1

ls -lt

• 递归列出所有子目录中的文件：

1

ls -R

• 列出特定类型的文件（例如，只列出目录）：

1

ls -d */

man

man 命令用于查看其他命令的手册页，提供命令的详细信息和用法。

用法示例

1

man command_name

这个命令会显示 command_name 的手册页。

常见用法

• 查看特定命令的手册页：

1

man ls

• 搜索手册页中的关键字：

1

man -k keyword

这个命令会列出所有包含 keyword 的手册页。

• 查看手册页的特定部分（例如，用户命令、系统调用等）：

1
2
3

man 1 command_name  # 用户命令
man 2 command_name  # 系统调用
man 3 command_name  # 库函数

• 在手册页中向上或向下滚动：
  使用 ↑ 和 ↓ 键进行滚动，使用 q 键退出手册页。

• 查看手册页的帮助信息：

1

man man

这个命令会显示 man 命令本身的手册页。

mv

mv 命令用于移动或重命名文件和目录。

用法示例

1

mv oldname.txt newname.txt

这个命令会将 oldname.txt 文件重命名为 newname.txt。

常见用法

• 移动文件到另一个目录：

1

mv filename.txt /path/to/directory/

• 移动并重命名文件：

1

mv filename.txt /path/to/directory/newname.txt

• 交互式移动（在覆盖文件前提示确认）：

1

mv -i filename.txt /path/to/directory/

• 强制移动（不提示确认）：

1

mv -f filename.txt /path/to/directory/

ps

ps 命令用于显示当前运行的进程信息。

用法示例

1

ps

这个命令会列出当前用户的所有进程。

常见用法

• 显示所有进程，包括其他用户的进程：

1

ps -e

• 显示详细信息：

1

ps -f

• 显示进程树：

1

ps -ejH

• 显示特定用户的进程：

1

ps -u username

• 显示与特定命令相关的进程：

1

ps -C command_name

pwd

pwd 命令用于显示当前工作目录的完整路径。

用法示例

1

pwd

这个命令会打印当前工作目录的绝对路径。

常见用法

• 在脚本中使用 pwd 获取当前目录：

1
2

current_dir=$(pwd)
echo "当前目录是: $current_dir"

• 与其他命令结合使用：

1

cd /path/to/directory && pwd

这个命令会切换到指定目录并显示该目录的路径。

rm

rm 命令用于删除文件和目录。

用法示例

1

rm filename.txt

这个命令会删除 filename.txt 文件。

常见用法

• 删除多个文件：

1

rm file1.txt file2.txt

• 递归删除目录及其内容（使用 -r 选项）：

1

rm -r directory_name

• 强制删除文件（不提示确认）：

1

rm -f filename.txt

• 交互式删除（在删除前提示确认）：

1

rm -i filename.txt

• 删除空目录：

1

rmdir directory_name

scp

scp 命令用于在本地和远程主机之间安全地复制文件。

用法示例

1

scp localfile.txt user@remotehost:/path/to/destination

这个命令会将本地的 localfile.txt 文件复制到远程主机的指定路径。

常见用法

• 从远程主机复制文件到本地：

1

scp user@remotehost:/path/to/remotefile.txt /local/path

• 递归复制整个目录：

1

scp -r localdir user@remotehost:/path/to/destination

• 使用特定端口进行连接：

1

scp -P 2222 localfile.txt user@remotehost:/path/to/destination

• 复制文件并保留文件属性：

1

scp -p localfile.txt user@remotehost:/path/to/destination

• 显示详细的传输过程：

1

scp -v localfile.txt user@remotehost:/path/to/destination

sed

sed 是一个流编辑器，用于对文本进行基本的转换和处理。

用法示例

1

sed 's/old/new/' filename.txt

这个命令会将 filename.txt 文件中每一行的第一个 old 替换为 new。

常见用法

• 替换文件中的所有匹配项：

1

sed 's/old/new/g' filename.txt

• 在特定行进行替换：

1

sed '2s/old/new/' filename.txt

这个命令会在第二行中将 old 替换为 new。

• 删除特定行：

1

sed '3d' filename.txt

这个命令会删除 filename.txt 文件的第三行。

• 直接修改文件（使用 -i 选项）：

1

sed -i 's/old/new/g' filename.txt

• 显示行号：

1

sed = filename.txt | sed 'N;s/\n/ /'

ssh

ssh 命令用于安全地远程登录到另一台计算机。

用法示例

1

ssh user@remotehost

这个命令会以 user 用户身份登录到 remotehost。

常见用法

• 使用特定端口进行连接：

1

ssh -p 2222 user@remotehost

• 在登录时执行命令：

1

ssh user@remotehost 'command_to_run'

• 使用密钥文件进行身份验证：

1

ssh -i /path/to/private_key user@remotehost

• 进行端口转发：

1

ssh -L local_port:remotehost:remote_port user@remotehost

• 复制文件到远程主机（使用 scp）：

1

scp localfile.txt user@remotehost:/path/to/destination

tail

tail 命令用于显示文件的结尾部分，默认情况下显示最后 10 行。

用法示例

1

tail filename.txt

这个命令会打印 filename.txt 文件的最后 10 行。

常见用法

• 显示指定行数的结尾部分：

1

tail -n 5 filename.txt

这个命令会打印 filename.txt 文件的最后 5 行。

• 实时查看文件的新增内容（类似于日志文件）：

1

tail -f filename.txt

• 显示多个文件的结尾部分：

1

tail file1.txt file2.txt

• 显示文件的字节数：

1

tail -c 20 filename.txt

这个命令会打印 filename.txt 文件的最后 20 个字节。

tar

tar 命令用于打包和压缩文件，常用于备份和传输文件。

用法示例

• 创建一个 tar 包：

1

tar -cvf archive.tar /path/to/directory

这个命令会将指定目录打包成 archive.tar 文件。

常见用法

• 创建一个压缩的 tar.gz 包：

1

tar -czvf archive.tar.gz /path/to/directory

这个命令会将指定目录打包并压缩成 archive.tar.gz 文件。

• 解压 tar 包：

1

tar -xvf archive.tar

这个命令会解压 archive.tar 文件。

• 解压 tar.gz 包：

1

tar -xzvf archive.tar.gz

这个命令会解压 archive.tar.gz 文件。

• 查看 tar 包内容：

1

tar -tvf archive.tar

这个命令会列出 archive.tar 文件中的内容。

top

top 命令用于实时显示系统中正在运行的进程和系统资源的使用情况。

用法示例

1

top

这个命令会打开一个动态更新的界面，显示当前系统的进程信息和资源使用情况。

常见用法

• 显示进程的详细信息：
  在 top 界面中，可以按 Shift + M 按内存使用量排序，按 Shift + P 按 CPU 使用量排序。

• 结束进程：
  在 top 界面中，按 k 键，然后输入要结束的进程 ID（PID），最后按 Enter。

• 刷新间隔：
  在 top 界面中，按 d 键可以设置刷新间隔（以秒为单位）。

• 显示帮助信息：
  在 top 界面中，按 h 键可以查看帮助信息。

• 退出 top：
  在 top 界面中，按 q 键可以退出。

touch

touch 命令用于创建空文件或更新文件的时间戳。

用法示例

1

touch filename.txt

这个命令会创建一个名为 filename.txt 的空文件，如果文件已存在，则更新其最后修改时间。

常见用法

• 创建多个空文件：

1

touch file1.txt file2.txt file3.txt

• 更新文件的时间戳：

1

touch existingfile.txt

• 创建带有特定时间戳的文件：

1

touch -t 202301010101 filename.txt

这个命令会将 filename.txt 的时间戳设置为 2023 年 1 月 1 日 01:01。

• 使用当前时间戳创建文件：

1

touch -a filename.txt

这个命令会更新 filename.txt 的访问时间为当前时间。

vi

vi 是一个强大的文本编辑器，广泛用于 Unix 和 Linux 系统中。

用法示例

打开文件：

1

vi filename.txt

这个命令会打开 filename.txt 文件进行编辑。

常见用法

• 进入插入模式：
  在命令模式下，按 i 进入插入模式，可以开始编辑文本。

• 保存并退出：
  在命令模式下，输入 :wq 保存文件并退出 vi。

• 仅保存：
  在命令模式下，输入 :w 仅保存文件而不退出。

• 退出不保存：
  在命令模式下，输入 :q! 强制退出而不保存更改。

• 删除行：
  在命令模式下，输入 dd 删除当前行。

• 撤销操作：
  在命令模式下，输入 u 撤销上一步操作。

• 查找文本：
  在命令模式下，输入 /pattern 查找指定的 pattern。

• 替换文本：
  在命令模式下，输入 :%s/old/new/g 将文件中的所有 old 替换为 new。

vim

vim 是 vi 的增强版，提供了更多功能和更好的用户体验。

用法示例

打开文件：

1

vim filename.txt

这个命令会打开 filename.txt 文件进行编辑。

常见用法

• 进入插入模式：
  在命令模式下，按 i 进入插入模式，可以开始编辑文本。

• 保存并退出：
  在命令模式下，输入 :wq 保存文件并退出 vim。

• 仅保存：
  在命令模式下，输入 :w 仅保存文件而不退出。

• 退出不保存：
  在命令模式下，输入 :q! 强制退出而不保存更改。

• 删除行：
  在命令模式下，输入 dd 删除当前行。

• 撤销操作：
  在命令模式下，输入 u 撤销上一步操作。

• 查找文本：
  在命令模式下，输入 /pattern 查找指定的 pattern。

• 替换文本：
  在命令模式下，输入 :%s/old/new/g 将文件中的所有 old 替换为 new。

• 显示行号：
  在命令模式下，输入 :set number 显示行号。

• 语法高亮：
  在命令模式下，输入 :syntax on 启用语法高亮。

wget

wget 是一个用于从网络下载文件的命令行工具，支持 HTTP、HTTPS 和 FTP 协议。

用法示例

1

wget http://example.com/file.txt

这个命令会从指定的 URL 下载 file.txt 文件。

常见用法

• 下载文件并指定输出文件名：

1

wget -O newname.txt http://example.com/file.txt

• 递归下载整个网站：

1

wget -r http://example.com

• 限制下载速度：

1

wget --limit-rate=200k http://example.com/file.txt

• 继续未完成的下载：

1

wget -c http://example.com/file.txt

• 下载时不显示进度条：

1

wget -q http://example.com/file.txt

• 下载多个文件：

1

wget -i filelist.txt

这个命令会从 filelist.txt 文件中读取 URL 并下载。

xargs

xargs 命令用于将标准输入的数据转换为命令行参数，常用于处理大量数据。

用法示例

1

echo "file1.txt file2.txt file3.txt" | xargs rm

这个命令会删除 file1.txt、file2.txt 和 file3.txt 文件。

常见用法

• 从文件中读取参数：

1

xargs -a filelist.txt rm

这个命令会从 filelist.txt 文件中读取文件名并删除它们。

• 限制每次执行的命令参数数量：

1

find . -name "*.txt" | xargs -n 2 rm

这个命令会每次删除两个 .txt 文件。

• 使用自定义分隔符：

1

echo "file1.txt,file2.txt,file3.txt" | xargs -d ',' rm

这个命令会使用逗号作为分隔符来删除文件。

• 与其他命令结合使用：

1

find . -name "*.log" | xargs grep "error"

这个命令会在所有 .log 文件中搜索包含 “error” 的行。

主要新功能

Actions

React 19引入了”Actions”的概念，这是一个重要的数据突变处理模式。在以前的版本中，当用户提交表单或执行数据修改操作时，开发者需要手动处理等待状态(pending states)、错误处理、乐观更新和连续请求等问题。

例如，在React 19之前，处理表单提交需要这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    redirect('/path');
  };
  return (
    <div>
      <input value={name} onChange={event => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

在React 19中，通过使用异步转换(Actions)，可以自动处理这些状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();
  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect('/path');
    });
  };
  return (
    <div>
      <input value={name} onChange={event => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Actions自动管理以下方面：

• 待定状态(Pending state)：在请求开始时自动设置待定状态，并在最终状态更新提交后自动重置
• 乐观更新：支持useOptimistic钩子，可在请求提交期间向用户提供即时反馈
• 错误处理：提供错误处理功能，可以在请求失败时显示错误边界，并自动将乐观更新恢复到原始值
• 表单：
  元素现在支持将函数传递给action和formAction属性

useActionState 钩子

为了简化 Actions 的常见用法，React 19 引入了 useActionState 钩子：

1
2
3
4
5
6
7
8
9
10

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
  const error = await updateName(newName);
  if (error) {
    // 可以返回操作的任何结果
    // 这里，我们只返回错误
    return error;
  }
  // 处理成功情况
  return null;
}, null);

React DOM 中的表单 Actions

Actions 还集成了 React 19 中 react-dom 的新表单功能。现在支持将函数作为 <form>、<input> 和 <button> 元素的 action 和 formAction 属性值，以自动使用 Actions 提交表单：

1

<form action={actionFunction}>

当表单 Action 成功时，React 将自动为非受控组件重置表单。

useFormStatus 钩子

在设计系统中，通常需要编写需要访问其所在表单信息的设计组件，而不需要将 props 层层传递下去。为此，React 19 引入了 useFormStatus 钩子：

1
2
3
4
5
6

import { useFormStatus } from 'react-dom';

function DesignButton() {
  const { pending } = useFormStatus();
  return <button type='submit' disabled={pending} />;
}

useOptimistic 钩子

另一个常见的 UI 模式是在执行数据变更时，在异步请求进行的同时显示最终状态。React 19 引入了 useOptimistic 钩子来简化这一过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);
  const submitAction = async formData => {
    const newName = formData.get('name');
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };
  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input type='text' name='name' disabled={currentName !== optimisticName} />
      </p>
    </form>
  );
}

use API

React 19 引入了新的 use API 来读取渲染中的资源。例如，可以使用 use 读取 Promise，React 将暂停直到 Promise 解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { use } from 'react';
function Comments({ commentsPromise }) {
  // `use`将暂停直到Promise解析
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
function Page({ commentsPromise }) {
  // 当Comments中的`use`暂停时，
  // 将显示此Suspense边界
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

use API 还可以读取上下文，允许有条件地读取 Context，例如在早期返回之后：

1
2
3
4
5
6
7
8
9
10
11

import { use } from 'react';
import ThemeContext from './ThemeContext';
function Heading({ children }) {
  if (children == null) {
    return null;
  }
  // 这不能与useContext一起使用
  // 因为有早期返回
  const theme = use(ThemeContext);
  return <h1 style={{ color: theme.color }}>{children}</h1>;
}

重要改进

React编译器

React 19 的明星功能是新的 React 编译器。这个编译器将 React 代码转换为纯 JavaScript，提升性能，并免除手动优化的麻烦。编译器能够自动优化重新渲染，减少手动使用 useMemo、useCallback 和 memo API的需求。

性能改进

React 19 引入了新的性能优化，包括对 React 组件和 React DOM 的优化。这些改进包括：

• 更好的并发渲染
• 改进的协调算法
• 选择性水合(Selective hydration)
• 预热暂停树(Pre-warming for suspended trees)

服务器端渲染(SSR)改进

React 19 增强了服务器端渲染功能，包括：

• 更好的Web Streams支持
• 改进的水合过程
• 更快的初始加载时间

错误处理改进

React 19 改进了错误处理机制，包括改进的错误信息和错误处理方式。引入了新的错误处理方法，使调试更加容易。

静态API改进

React 19 引入了新的 React DOM 静态API，这些 API 有助于在构建时预渲染应用的部分内容。

迁移注意事项

React 19 引入了一些重大变更，需要注意：

1. JSX 转换要求：React 19 强制使用新的 JSX 转换
2. 旧版 API 删除：ReactDOM.render 和 ReactDOM.hydrate 等API已被删除，替换为 ReactDOM.createRoot 和 ReactDOM.hydrateRoot
3. 错误处理变化：React 19 引入了新的错误处理方法

总结

React 19 是一个重要的更新，它专注于简化开发过程并提升性能。通过引入 Actions、新的 Hooks 和改进的 API，React 19 使得数据突变处理、表单管理和状态管理变得更加直观和高效。

此外，React 编译器的引入标志着 React 在自动优化方面的重大进步，有望显著提升应用性能，同时减少开发者手动优化的工作量。

总的来说，React 19 继续贯彻了 React 团队的承诺——在不增加复杂性的情况下提供更多功能，让开发者能够构建更高效、更可靠的 Web 应用程序。

开发用：
big.js: A small, fast, easy-to-use library for arbitrary-precision decimal arithmetic
brace: browserify compatible version of the ace editor.
classnames: A simple utility for conditionally joining classNames together
pako: zlib port to javascript - fast, modularized, with browser support
crypto-js: JavaScript library of crypto standards.
day.js: 2KB immutable date time library alternative to Moment.js with the same modern API
dom-to-image: Generates an image from a DOM node using HTML5 canvas and SVG
echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browser
echarts-gl: Extension pack of ECharts providing 3D plots and globe visualization
encryptlong: js encrypt
file-saver: An HTML5 saveAs() FileSaver implementation
handsontable: Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
immutability-helper: https://github.com/kolodny/immutability-helper#readme
localForage: Offline storage, improved.
lodash: Lodash modular utilities.

编译用：

cross-env: Run scripts that set and use environment variables across platforms
eslint: An AST-based pattern checker for JavaScript.
husky: Modern native Git hooks made easy
prettier: Prettier is an opinionated code formatter
stylelint: A mighty CSS linter that helps you avoid errors and enforce conventions.
cssnano: A modular minifier, built on top of the PostCSS ecosystem.
autoprefixer: Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
assert: The assert module from Node.js, for the browser.
buffer: Node.js Buffer API, for the browser
chalk: Terminal string styling done right
crypto-browserify: implementation of crypto for the browser
browserify-zlib: Full zlib module for the browser
fs-extra: fs-extra contains methods that aren’t included in the vanilla Node.js fs package. Such as recursive mkdir, copy, and remove.
get-port: Get an available port
glob: the most correct and second fastest glob implementation in JavaScript
ip: IP address tools for node.js
minimist: parse argument options
path-browserify: the path module from node core for browsers
stream-browserify: the stream module from node core for browsers
url: The core url packaged standalone for use with Browserify.
util: Node.js’s util module for all engines
vm: vm module for the browser
inquirer: A collection of common interactive command line user interfaces.
unzipper: Unzip cross-platform streaming API
rimraf: The UNIX command rm -rf for node.

Homebrew 是 macOS 上最流行的软件包管理工具，允许用户轻松安装和管理软件包。
Homebrew

优点

• 简单易用，命令直观。
• 拥有丰富的软件库。
• 社区活跃，更新频繁。

缺点

• 主要针对 macOS，Windows 支持有限。
• 某些软件包可能不够稳定。

Chocolatey

Chocolatey 是 Windows 平台上的软件包管理工具，基于 NuGet。
Chocolatey