# @fluixi/reactive 中文文档

规范地址：https://npmcn.com/package/%40fluixi/reactive/

版本：1\.0\.0-alpha\.108
npm 元数据更新时间：2026-11-07T01:10:52.824Z
中文译文更新时间：2026-11-15T02:13:37.422Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fluixi/reactive
原文对照：https://npmcn.com/package/%40fluixi/reactive/?lang=original
项目主页：https://github.com/fluixi/core#readme
源码仓库：https://github.com/fluixi/core

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.1 MB，216 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-07-10T03:17:10.358Z
- 最新版本发布：2026-11-07T01:10:02.202Z
- 近 30 天下载量：7024（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：56（近 12 个月 56 个）

## 中文简介

执行TC39 零运行时间依赖的信号建议; RxJS 的可观测层, 包含信号、 备忘录、 效果、 存储

## 安装

```sh
npm install @fluixi/reactive
```

也可以使用：`pnpm add @fluixi/reactive`、`yarn add @fluixi/reactive`、`bun add @fluixi/reactive`

## README

![Fluixi](https://raw.githubusercontent.com/fluixi/assets/main/logos/128x128.png)

# @fluixi/反应

**精致的信号,备忘录,效果和存储在TC39信号核心上:独立,不需要框架.**

[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e.svg)](https://npmcn.com/package/%40fluixi/reactive/LICENSE) ![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white) [![npm](https://img.shields.io/npm/v/@fluixi/reactive?logo=npm)](https://www.npmjs.com/package/@fluixi/reactive) ![Inspired by SolidJS](https://img.shields.io/badge/inspired%20by-SolidJS-2c4f7c)

* * *

一个精细的反射系统 **TC39 信号** 图表:无故障,懒惰, 推-推. 它没有DOM依赖性,也没有框架依赖性,因此在 浏览器,在服务器上,或者自己操作.

## 特征

### 核心

-   **信号、备忘录、效果**: 细纹状态,衍生值,自动跟踪
-   **存储**: 在读取属性时嵌入的反应对象 _实值_ 读取
-   **资源**: 与悬念结合的同步值
-   **击打**数字 : `batch()` 收藏会写成依赖者运行一次

### 超越基础

-   **过渡**数字 : `startTransition` 推迟非关键效果, 视图保持交互性
-   **暂停和出错边界**:作为平面值,任何视图层都可以被包起来
-   **A. 背景情况**: 提供通话期间的值,不进行道具钻探
-   **拥有者**:明确所有权和处置权,所以一个图表完全崩溃了
-   **被抛弃的原始人**: 信号、资源和函数变体
-   **可观察接口**数字 : `Observable`编号 :`Subject` rxJS 形状代码
-   **类型脚本**: 全套安全和推断

## 安装

```bash
npm install @fluixi/reactive
```

## 快速启动

### 基本用途

```typescript
import { signal, memo, effect, batch } from '@fluixi/reactive';

// Reactive state — call it to read, .set() to write
const count = signal(0);

// Derived state (cached)
const doubled = memo(() => count() * 2);

// Side effects (auto-tracking)
effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(1); // Effect runs: "Count: 1, Doubled: 2"

// Batch multiple updates
batch(() => {
  count.set(2);
  count.set(3);
}); // Effect runs once: "Count: 3, Doubled: 6"
```

### 二重体形态

`createSignal` 返回与 a 相同的信号 `[read, write]` 组合,和 `createMemo` 编号 : `createEffect` 为: `memo` 编号 : `effect` 原名为:

```typescript
import { createSignal, createMemo, createEffect } from '@fluixi/reactive';

const [count, setCount] = createSignal(0);
const doubled = createMemo(() => count() * 2);
createEffect(() => console.log(count(), doubled()));
setCount(1);
```

`signal` **实值** 访问者 `createSignal` 返回并附带设置器,因此读取为 无论是哪种方式,同一个电话。 他们互相跟踪,自由混合在一个模块中: 选择 无论哪一个读得更好, 并保持tiple 当你想要一半分开.

### 储存和资源

```typescript
import { store } from '@fluixi/reactive/store';
import { resource } from '@fluixi/reactive/signal';

const cart = store({ items: [], total: 0 });
cart.total;                 // reading a property IS the reactive read
cart.set('total', 42);      // only readers of `total` re-run

const user = resource(() => fetch('/api/me').then((r) => r.json()));
user();        // the value — suspends under a Suspense boundary
user.loading;  // boolean
user.refetch();
```

### 过渡、背景和边界

```typescript
import {
  startTransition, useTransition,
  createContext, useContext, provide,
  createErrorBoundary, provideErrorBoundary,
} from '@fluixi/reactive';

// Non-blocking updates — `isPending` is a signal you can read while it runs
const [isPending, start] = useTransition();
start(() => setLargeDataSet(expensiveComputation()));

// Context: create it, provide a value for the duration of a call, consume inside
const ThemeContext = createContext({ mode: 'light' });
provide(ThemeContext, { mode: 'dark' }, () => {
  useContext(ThemeContext); // { mode: 'dark' }
});

// Boundaries are values here, not components. A view layer wraps these into
// <ErrorBoundary> / <Suspense>; on their own they are plain functions.
const boundary = createErrorBoundary();
provideErrorBoundary(boundary, () => risky());
boundary.error();  // the thrown value, or undefined
boundary.reset();
```

### 调试

```typescript
import { createDebounce, createDebouncedSignal, createDebouncedResource } from '@fluixi/reactive';

const [term, setTerm, controls] = createDebouncedSignal('', 300);
term();                // settles 300ms after the last write
controls.immediate();  // the value as written — bind the input to this one
controls.pending();    // a write is waiting (not the same as a request in flight)
controls.flush();      // settle now

// Search-as-you-type as one primitive: the query debounces, the fetch follows it,
// and an empty query doesn't fetch at all.
const [results, search] = createDebouncedResource('', (q) => fetchResults(q), { delay: 300 });
search.setQuery('fluix');
results.loading;

// Or debounce any function
const save = createDebounce((draft) => persist(draft), 500);
```

## 击打

写作会给其依附者留下污秽的印记并安排时间;备忘录会保持懒惰并重算 读取,所以图表是无故障的:没有看到半应用更新.

```typescript
batch(() => {
  a.set(1);
  b.set(2);
  c.set(3);
}); // dependents run once, after the batch closes

await flush(); // await the pending queue — mostly useful in tests
```

`startTransition` 是另一半: 它运行 `fn` 同步并捕获非纯度 所以昂贵的更新不会挡住 当前视图。 纯粹的计算仍然立即解决.

## API 参考

### 核心 API

-   `createSignal(initialValue, options?)` - 创建反应状态
-   `createEffect(fn, options?)` - 运行副作用
-   `createMemo(fn, initialValue?, options?)` - 创建衍生状态
-   `batch(fn)` - 批次多个更新
-   `untrack(fn)` - 不跟踪读取信号
-   `createRoot(fn)` - 创建处理根

### 过渡

-   `startTransition(fn)` - 将更新列为低优先级
-   `useTransition()` - 轨迹过渡状态

### 边界

-   `createSuspenseBoundary()` 编号 : `provideSuspense(boundary, fn)` - 作为值的自动边界
-   `createErrorBoundary()` 编号 : `provideErrorBoundary(boundary, fn)` - 作为值的错误边界
-   `trackResourcePromise(promise)` - 将承诺与所附悬念一起登记

### A. 背景情况

-   `createContext(defaultValue)` - 创建上下文
-   `provide(context, value, fn)` - 在电话通话期间提供价值
-   `useContext(context)` - 假设上下文

### 其他影响

-   `createRenderEffect(fn)` - 涂料前跑步,为DOM写作
-   `createComputed(fn)` - 跑得很急 不像备忘录
-   `on(deps, fn, options?)` - 明显依赖性

### 意见

-   `observeReactiveNodes(observer)` - 观察节点的建立、重算和处理。 @fluixi/devtools 所附带的内容; 未经观察, 每个节点花费一个无效检查 .

### 所有者管理

-   `getOwner()` - 获取当前被动的主人
-   `runWithOwner(owner, fn)` - 和特定主人一起跑

### 名单

-   `mapArray(list, fn)` - 按身份键的地图;一行活过重排
-   `indexArray(list, fn)` - 按指数键的地图
-   `keyArray(list, key, fn)` - 由明确密钥键入地图

### 公用事业

-   `createSelector(source, fn)` - 键入选择器;只有修改了重运行的行
-   `createResource(fetcher, source?)` 编号 : `resource(...)` - 同步资源
-   `createStore(initial)` 编号 : `store(initial)` - 嵌入式反应物体
-   `createDeferred(source, options?)` - 一个落后于负载的值
-   `createDebounce(fn, ms)` 编号 : `createDebouncedSignal(initial, ms)` 编号 : `createDebouncedResource(...)`
-   `flush()` - 等待待决效果队列
-   `unwrap(store)` 编号 : `untrackStore(fn)` - 从商店代理中逃出
-   `onCleanup(fn)` 编号 : `disposeScope(owner)` - 撕毁

## 文档

-   [信号](https://docs.fluixi.com/v1/en/signals): 状态、读取和写作
-   [衍生值](https://docs.fluixi.com/v1/en/derived-values): 备忘录和选择器
-   [效果](https://docs.fluixi.com/v1/en/effects):副作用和清理
-   [存储](https://docs.fluixi.com/v1/en/stores): 嵌入式反应对象
-   [自动同步](https://docs.fluixi.com/v1/en/async):资源、暂记、过渡
-   [TC39 信号](https://docs.fluixi.com/v1/en/tc39-signals): 下面的模型

## 编译器内在

在编译的应用程序内 `@fluixi/compiler`这些原始人 `$`\-前置双胞胎 不需要导入 : `$signal`, (中文(简体) ), `$memo`, (中文(简体) ), `$effect`, (中文(简体) ), `$store`, (中文(简体) ), `$resource`它们汇编到 以上调用,所以有一个反应图,行为上没有区别. 这个包 完全可以导入到此处的文档中, 这就是一个从未运行过 编译器需要.

## 绩效提示

1.  **批次相关的更新**数字 : `batch(() => { a.set(1); b.set(2); })` 运行依赖者一次.
2.  **昂贵更新的过渡**数字 : `startTransition(() => list.set(compute()))` 在准备下一个视图时保持当前视图的交互性.
3.  **纪念昂贵的部分**: 备忘录需要节点 计算重于簿记.
4.  **缩小读取**: 读取整个对象会订阅每个对象的写作. 到达 你的财产,或获得它.
5.  **按键列表**数字 : `mapArray` 保持一行的节点穿过重排顺序; `indexArray` 重建他们.

## 大楼

```bash
nx build reactive
```

## 运行测试

```bash
nx test reactive
```

## 许可证

麻省理工学院

## 贷项

图表执行 **TC39 信号** 型号。 人类基因组很亏欠前作: 精细原始物和排程的固态JS, 过渡反应和悬念为 概念,用于反应设计的Vue 3。 这些都不是在这里发明的.

## 常见问题

### @fluixi/reactive 是什么？

执行TC39 零运行时间依赖的信号建议; RxJS 的可观测层, 包含信号、 备忘录、 效果、 存储

### 如何安装 @fluixi/reactive？

在项目目录运行 npm install @fluixi/reactive，或使用 pnpm add / yarn add / bun add。

### @fluixi/reactive 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fluixi/reactive 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fluixi/reactive 可以商用吗？

@fluixi/reactive 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fluixi/reactive 的下载量有多少？

根据 npm 官方下载统计，@fluixi/reactive 在 2026/10/15 – 2026/11/13 这 30 天内被下载 7,024 次，日均约 234 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fluixi/reactive 还在维护吗？

最新版本 1\.0\.0-alpha\.108 发布于 2026/11/07（8 天前）；至今共发布 56 个版本，其中过去 12 个月发布了 56 个；首次发布于 2026/07/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。