From 3f0f8a841da8689d199e03dc3c4f3a53c772935d Mon Sep 17 00:00:00 2001
From: HoikanChen <hoikan.chen@gmail.com>
Date: Tue, 16 Jan 2024 19:38:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E4=B8=80=E4=B8=AAinula-react?=
 =?UTF-8?q?ive=E5=8C=85=EF=BC=8C=E4=B8=93=E9=97=A8=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/inula-reactive/.prettierrc.js        |  32 ++
 packages/inula-reactive/babel.config.js       |  25 ++
 packages/inula-reactive/jest.config.js        |  31 ++
 packages/inula-reactive/package.json          |   9 +
 packages/inula-reactive/src/RNode.ts          | 333 ++++++++++++++++++
 packages/inula-reactive/src/RNodeAccessor.ts  | 269 ++++++++++++++
 packages/inula-reactive/src/RNodeCreator.ts   |  69 ++++
 packages/inula-reactive/src/Reactive.ts       |  16 +
 packages/inula-reactive/src/Types.ts          |  95 +++++
 packages/inula-reactive/src/Utils.ts          |  38 ++
 .../src/comparison/DiffUtils.ts               | 181 ++++++++++
 .../inula-reactive/src/proxy/RProxyHandler.ts | 147 ++++++++
 .../inula-reactive/tests/reactive.test.ts     |  66 ++++
 13 files changed, 1311 insertions(+)
 create mode 100644 packages/inula-reactive/.prettierrc.js
 create mode 100644 packages/inula-reactive/babel.config.js
 create mode 100644 packages/inula-reactive/jest.config.js
 create mode 100644 packages/inula-reactive/package.json
 create mode 100644 packages/inula-reactive/src/RNode.ts
 create mode 100644 packages/inula-reactive/src/RNodeAccessor.ts
 create mode 100644 packages/inula-reactive/src/RNodeCreator.ts
 create mode 100644 packages/inula-reactive/src/Reactive.ts
 create mode 100644 packages/inula-reactive/src/Types.ts
 create mode 100644 packages/inula-reactive/src/Utils.ts
 create mode 100644 packages/inula-reactive/src/comparison/DiffUtils.ts
 create mode 100644 packages/inula-reactive/src/proxy/RProxyHandler.ts
 create mode 100644 packages/inula-reactive/tests/reactive.test.ts

diff --git a/packages/inula-reactive/.prettierrc.js b/packages/inula-reactive/.prettierrc.js
new file mode 100644
index 00000000..c2622eaa
--- /dev/null
+++ b/packages/inula-reactive/.prettierrc.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+'use strict';
+
+module.exports = {
+  printWidth: 120, // 一行120字符数，如果超过会进行换行
+  tabWidth: 2, // tab等2个空格
+  useTabs: false, // 用空格缩进行
+  semi: true, // 行尾使用分号
+  singleQuote: true, // 字符串使用单引号
+  quoteProps: 'as-needed', // 仅在需要时在对象属性添加引号
+  jsxSingleQuote: false, // 在JSX中使用双引号
+  trailingComma: 'es5', // 使用尾逗号(对象、数组等)
+  bracketSpacing: true, // 对象的括号间增加空格
+  bracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾
+  arrowParens: 'avoid', // 在唯一的arrow函数参数周围省略括号
+  vueIndentScriptAndStyle: false, // 不缩进Vue文件中的<script>和<style>标记内的代码
+  endOfLine: 'lf', // 仅限换行（\n）
+};
diff --git a/packages/inula-reactive/babel.config.js b/packages/inula-reactive/babel.config.js
new file mode 100644
index 00000000..9fd8d3d1
--- /dev/null
+++ b/packages/inula-reactive/babel.config.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+    ],
+    [
+      '@babel/preset-typescript',
+    ]
+  ]
+};
diff --git a/packages/inula-reactive/jest.config.js b/packages/inula-reactive/jest.config.js
new file mode 100644
index 00000000..ab451afc
--- /dev/null
+++ b/packages/inula-reactive/jest.config.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+module.exports = {
+  coverageDirectory: 'coverage',
+  resetModules: true,
+
+  rootDir: process.cwd(),
+
+  testEnvironment: 'jest-environment-jsdom-sixteen',
+
+  testMatch: [
+    '<rootDir>/tests/**/*.test.js',
+    '<rootDir>/tests/**/*.test.ts',
+    '<rootDir>/tests/**/*.test.tsx',
+  ],
+
+  timers: 'fake',
+};
diff --git a/packages/inula-reactive/package.json b/packages/inula-reactive/package.json
new file mode 100644
index 00000000..c46935e1
--- /dev/null
+++ b/packages/inula-reactive/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "inula-reactive",
+  "version": "0.0.1",
+  "description": "reactive core",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --config=jest.config.js"
+  }
+}
diff --git a/packages/inula-reactive/src/RNode.ts b/packages/inula-reactive/src/RNode.ts
new file mode 100644
index 00000000..55ae4141
--- /dev/null
+++ b/packages/inula-reactive/src/RNode.ts
@@ -0,0 +1,333 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { createProxy } from './proxy/RProxyHandler';
+import { getRNodeVal, preciseCompare, setRNodeVal } from './RNodeAccessor';
+import { isObject } from './Utils';
+
+/** current capture context for identifying @reactive sources (other reactive elements) and cleanups
+ * - active while evaluating a reactive function body  */
+let CurrentReaction: RNode<any> | undefined = undefined;
+let CurrentGets: RNode<any>[] | null = null;
+let CurrentGetsIndex = 0;
+
+/** A list of non-clean 'effect' nodes that will be updated when stabilize() is called */
+const EffectQueue: RNode<any>[] = [];
+
+export const CacheClean = 0; // reactive value is valid, no need to recompute
+export const CacheCheck = 1; // reactive value might be stale, check parent nodes to decide whether to recompute
+export const CacheDirty = 2; // reactive value is invalid, parents have changed, valueneeds to be recomputed
+export type CacheState = typeof CacheClean | typeof CacheCheck | typeof CacheDirty;
+type CacheNonClean = typeof CacheCheck | typeof CacheDirty;
+
+export interface RNodeOptions {
+  root?: Root<any> | null;
+  isSignal?: boolean;
+  isEffect?: boolean;
+  isComputed?: boolean;
+  isProxy?: boolean;
+  parent?: RNode<any> | null;
+  key?: KEY | null;
+  equals?: (a: any, b: any) => boolean;
+}
+
+export interface Root<T> {
+  $?: T;
+}
+
+export type KEY = string | symbol;
+
+function defaultEquality(a: any, b: any) {
+  return a === b;
+}
+
+export class RNode<T = any> {
+  private _value: T;
+  private fn?: () => T;
+
+  root: Root<T> | null;
+
+  parent: RNode | null = null;
+  key: KEY | null;
+  children: Map<KEY, RNode> | null = null;
+
+  proxy: any = null;
+
+  private observers: RNode[] | null = null; // 被谁用
+  private sources: RNode[] | null = null; // 使用谁
+
+  private state: CacheState;
+  private isSignal = false;
+  private isEffect = false;
+  private isComputed = false;
+  private isProxy = false;
+
+  cleanups: ((oldValue: T) => void)[] = [];
+  equals = defaultEquality;
+
+  constructor(fnOrValue: (() => T) | T, options?: RNodeOptions) {
+    this.isSignal = options?.isSignal || false;
+    this.isEffect = options?.isEffect || false;
+    this.isProxy = options?.isProxy || false;
+    this.isComputed = options?.isComputed || false;
+
+    if (typeof fnOrValue === 'function') {
+      this.fn = fnOrValue as () => T;
+      this._value = undefined as any;
+      this.state = CacheDirty;
+
+      if (this.isEffect) {
+        EffectQueue.push(this);
+      }
+    } else {
+      this.fn = undefined;
+      this._value = fnOrValue;
+      this.state = CacheClean;
+    }
+
+    // large object scene
+    if (this.isProxy) {
+      this.proxy = createProxy(this);
+      this.parent = options?.parent || null;
+      this.key = options?.key as KEY;
+      this.root = options?.root || null;
+
+      if (this.parent && !this.parent.children) {
+        this.parent.children = new Map();
+        this.parent.children.set(this.key, this);
+      }
+    }
+  }
+
+  get value(): T {
+    return this.get();
+  }
+
+  set value(v: T) {
+    this.set(v);
+  }
+
+  get(): T {
+    if (CurrentReaction) {
+      if (!CurrentGets && CurrentReaction.sources && CurrentReaction.sources[CurrentGetsIndex] == this) {
+        CurrentGetsIndex++;
+      } else {
+        if (!CurrentGets) {
+          CurrentGets = [this];
+        } else {
+          CurrentGets.push(this);
+        }
+      }
+    }
+
+    if (this.fn) {
+      this.updateIfNecessary();
+    }
+
+    return this.getValue();
+  }
+
+  set(fnOrValue: T | (() => T)): void {
+    if (typeof fnOrValue === 'function') {
+      const fn = fnOrValue as () => T;
+      if (fn !== this.fn) {
+        this.stale(CacheDirty);
+      }
+      this.fn = fn;
+    } else {
+      if (this.fn) {
+        this.removeParentObservers(0);
+        this.sources = null;
+        this.fn = undefined;
+      }
+
+      const value = fnOrValue as T;
+      const prevValue = this.getValue();
+
+      const isObj = isObject(value);
+      const isPrevObj = isObject(prevValue);
+
+      // 新旧数据都是 对象或数组
+      if (isObj && isPrevObj) {
+        preciseCompare(this, value, prevValue, false);
+
+        this.setValue(value);
+      } else {
+        if (!this.equals(prevValue, value)) {
+          this.setDirty();
+
+          this.setValue(value);
+        }
+      }
+    }
+
+    // 运行EffectQueue
+    runEffects();
+  }
+
+  setDirty() {
+    if (this.observers) {
+      for (let i = 0; i < this.observers.length; i++) {
+        const observer = this.observers[i];
+        observer.stale(CacheDirty);
+      }
+    }
+  }
+
+  private stale(state: CacheNonClean): void {
+    if (this.state < state) {
+      // If we were previously clean, then we know that we may need to update to get the new value
+      if (this.state === CacheClean && this.isEffect) {
+        EffectQueue.push(this);
+      }
+
+      this.state = state;
+      if (this.observers) {
+        for (let i = 0; i < this.observers.length; i++) {
+          this.observers[i].stale(CacheCheck);
+        }
+      }
+    }
+  }
+
+  private update(): void {
+    const prevValue = this.getValue();
+
+    /* Evalute the reactive function body, dynamically capturing any other reactives used */
+    const prevReaction = CurrentReaction;
+    const prevGets = CurrentGets;
+    const prevIndex = CurrentGetsIndex;
+
+    CurrentReaction = this;
+    CurrentGets = null as any; // prevent TS from thinking CurrentGets is null below
+    CurrentGetsIndex = 0;
+
+    try {
+      if (this.cleanups.length) {
+        this.cleanups.forEach(c => c(this._value));
+        this.cleanups = [];
+      }
+
+      if (this.isComputed) {
+        this.root = { $: this.fn!() };
+      } else {
+        this._value = this.fn!();
+      }
+
+      // if the sources have changed, update source & observer links
+      if (CurrentGets) {
+        // remove all old sources' .observers links to us
+        this.removeParentObservers(CurrentGetsIndex);
+        // update source up links
+        if (this.sources && CurrentGetsIndex > 0) {
+          this.sources.length = CurrentGetsIndex + CurrentGets.length;
+          for (let i = 0; i < CurrentGets.length; i++) {
+            this.sources[CurrentGetsIndex + i] = CurrentGets[i];
+          }
+        } else {
+          this.sources = CurrentGets;
+        }
+
+        for (let i = CurrentGetsIndex; i < this.sources.length; i++) {
+          // Add ourselves to the end of the parent .observers array
+          const source = this.sources[i];
+          if (!source.observers) {
+            source.observers = [this];
+          } else {
+            source.observers.push(this);
+          }
+        }
+      } else if (this.sources && CurrentGetsIndex < this.sources.length) {
+        // remove all old sources' .observers links to us
+        this.removeParentObservers(CurrentGetsIndex);
+        this.sources.length = CurrentGetsIndex;
+      }
+    } finally {
+      CurrentGets = prevGets;
+      CurrentReaction = prevReaction;
+      CurrentGetsIndex = prevIndex;
+    }
+
+    // handles diamond depenendencies if we're the parent of a diamond.
+    if (!this.equals(prevValue, this.getValue()) && this.observers) {
+      // We've changed value, so mark our children as dirty so they'll reevaluate
+      for (let i = 0; i < this.observers.length; i++) {
+        const observer = this.observers[i];
+        observer.state = CacheDirty;
+      }
+    }
+
+    // We've rerun with the latest values from all of our sources.
+    // This means that we no longer need to update until a signal changes
+    this.state = CacheClean;
+  }
+
+  /** update() if dirty, or a parent turns out to be dirty. */
+  private updateIfNecessary(): void {
+    if (this.state === CacheCheck) {
+      for (const source of this.sources!) {
+        source.updateIfNecessary(); // updateIfNecessary() can change this.state
+        if ((this.state as CacheState) === CacheDirty) {
+          // Stop the loop here so we won't trigger updates on other parents unnecessarily
+          // If our computation changes to no longer use some sources, we don't
+          // want to update() a source we used last time, but now don't use.
+          break;
+        }
+      }
+    }
+
+    // If we were already dirty or marked dirty by the step above, update.
+    if (this.state === CacheDirty) {
+      this.update();
+    }
+
+    // By now, we're clean
+    this.state = CacheClean;
+  }
+
+  private removeParentObservers(index: number): void {
+    if (!this.sources) return;
+    for (let i = index; i < this.sources.length; i++) {
+      const source: RNode<any> = this.sources[i]; // We don't actually delete sources here because we're replacing the entire array soon
+      const swap = source.observers!.findIndex(v => v === this);
+      source.observers![swap] = source.observers![source.observers!.length - 1];
+      source.observers!.pop();
+    }
+  }
+
+  private getValue() {
+    return this.isProxy ? getRNodeVal(this) : this._value;
+  }
+
+  private setValue(value: any) {
+    this.isProxy ? setRNodeVal(this, value) : (this._value = value);
+  }
+}
+
+export function onCleanup<T = any>(fn: (oldValue: T) => void): void {
+  if (CurrentReaction) {
+    CurrentReaction.cleanups.push(fn);
+  } else {
+    console.error('onCleanup must be called from within a @reactive function');
+  }
+}
+
+/** run all non-clean effect nodes */
+export function runEffects(): void {
+  for (let i = 0; i < EffectQueue.length; i++) {
+    EffectQueue[i].get();
+  }
+  EffectQueue.length = 0;
+}
diff --git a/packages/inula-reactive/src/RNodeAccessor.ts b/packages/inula-reactive/src/RNodeAccessor.ts
new file mode 100644
index 00000000..9e79ee12
--- /dev/null
+++ b/packages/inula-reactive/src/RNodeAccessor.ts
@@ -0,0 +1,269 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { RNode } from './RNode';
+import { isFunction, isObject} from './Utils';
+import { isArray } from './Utils';
+import { arrayDiff, DiffOperator, Operation } from './comparison/DiffUtils';
+import { ArrayState } from './types';
+import { getOrCreateChildRNode } from './RNodeCreator';
+
+export function getRNodeVal(node: RNode<any>): any {
+  let currentNode = node;
+  const keys: (string | symbol)[] = [];
+  while (currentNode.key !== null && currentNode.parent !== null) {
+    keys.push(currentNode.key);
+    currentNode = currentNode.parent;
+  }
+
+  let rawObj = node.root?.$;
+  for (let i = keys.length - 1; i >= 0; i--) {
+    if (keys[i] !== undefined && rawObj) {
+      rawObj = rawObj[keys[i]];
+    }
+  }
+
+  return rawObj;
+}
+
+export function setRNodeVal(rNode: RNode<any>, value: unknown): void {
+  const parent = rNode.parent;
+  const key = rNode.key!;
+  const isRoot = parent === null;
+  let prevValue: unknown;
+  let newValue: unknown;
+
+  if (isRoot) {
+    prevValue = rNode.root!.$;
+    newValue = isFunction<(...prev: any) => any>(value) ? value(prevValue) : value;
+    rNode.root!.$ = newValue;
+  } else {
+    const parentVal = getRNodeVal(parent!);
+    prevValue = parentVal[key];
+    newValue = isFunction<(...prev: any) => any>(value) ? value(prevValue) : value;
+    parentVal[key] = newValue;
+  }
+}
+
+// 递归触发依赖这reactive数据的所有RContext
+export function preciseCompare(rNode: RNode<any>, value: any, prevValue: any, isFromArrModify?: boolean) {
+  preciseCompareChildren(rNode, value, prevValue, isFromArrModify);
+
+  // 触发父数据的RContext，不希望触发组件刷新（只触发computed和watch）
+  // TODO 暂时删除
+  // triggerParents(reactive.parent);
+}
+
+// 当value和prevValue都是对象或数组时，才触发
+function preciseCompareChildren(rNode: RNode, value: any, prevValue: any, isFromArrModify?: boolean): boolean {
+  // 可以精准更新
+  let canPreciseUpdate = true;
+
+  const isArr = isArray(value);
+  const isPrevArr = isArray(prevValue);
+
+  // 1、变化来自数组的Modify方法（某些行可能完全不变）
+  if (isFromArrModify) {
+    // // 获取数组间差异，RNode只能增删不能修改，修改会导致Effect不会随数据的位置变化
+    // const diffOperator = arrayDiff(prevValue, value);
+    // const states: ArrayState[] = [];
+    //
+    // let childIndex = 0;
+    //
+    // for (const opt of diffOperator.opts) {
+    //   const idx = String(opt.index);
+    //   switch (opt.action) {
+    //     // 从已有RNode中取值
+    //     case Operation.Nop: {
+    //       const childRNode = rNode.children?.get(idx);
+    //
+    //       // children没有使用时，可以为undefined或没有该child
+    //       if (childRNode !== undefined) {
+    //         childRNode.key = String(childIndex);
+    //         states.push(ArrayState.Fresh);
+    //         childIndex++;
+    //
+    //         // 删除旧的，重设新值。处理场景：元素还在，但是在数组中的位置变化了。
+    //         rNode.children?.delete(String(opt.index));
+    //         rNode.children?.set(childRNode.key, childRNode);
+    //       }
+    //       break;
+    //     }
+    //     // 从Value中新建RNode
+    //     case Operation.Insert: {
+    //       getOrCreateChildRNode(rNode, idx);
+    //       states.push(ArrayState.NotFresh);
+    //       childIndex++;
+    //       break;
+    //     }
+    //     case Operation.Delete: {
+    //       rNode.children?.delete(idx);
+    //       break;
+    //     }
+    //   }
+    // }
+    //
+    // rNode.diffOperator = diffOperator;
+    // if (!rNode.diffOperators) {
+    //   rNode.diffOperators = [];
+    // }
+    // rNode.diffOperators.push(diffOperator);
+    // // 记录：新数据，哪些需要处理，哪些不需要
+    // rNode.states = states;
+    // // 数组长度不同，确定会产生变化，调用callDependents一次
+    // callRContexts(rNode);
+    //
+    // return canPreciseUpdate;
+  }
+
+  // 2、都是数组
+  if (isArr && isPrevArr) {
+    const minLen = Math.min(value.length, prevValue.length);
+
+    // 遍历数组或对象，触发子数据的Effects
+    const canPreciseUpdates = updateSameLengthArray(rNode, value, prevValue, minLen);
+
+    const maxLen = Math.max(value.length, prevValue.length);
+    if (maxLen !== minLen || canPreciseUpdates.includes(false)) {
+      canPreciseUpdate = false;
+    }
+
+    // 在reactive中保存opts
+    const diffOperator: DiffOperator = {
+      isOnlyNop: false,
+      opts: [],
+    };
+    const states: ArrayState[] = [];
+
+    // 相同长度的部分
+    for (let i = 0; i < minLen; i++) {
+      diffOperator.opts.push({ action: Operation.Nop, index: i });
+      // 如果该行数据无法精准更新，设置为NotFresh
+      states.push(canPreciseUpdates[i] ? ArrayState.Fresh : ArrayState.NotFresh);
+    }
+
+    // 超出部分：新增
+    if (value.length > prevValue.length) {
+      for (let i = minLen; i < maxLen; i++) {
+        diffOperator.opts.push({ action: Operation.Insert, index: i });
+        states.push(ArrayState.NotFresh);
+        getOrCreateChildRNode(rNode, String(i));
+      }
+    } else if (value.length < prevValue.length) {
+      // 减少部分：删除
+      for (let i = minLen; i < maxLen; i++) {
+        diffOperator.opts.push({ action: Operation.Delete, index: i });
+        states.push(ArrayState.NotFresh);
+      }
+    }
+
+    diffOperator.isOnlyNop = !states.includes(ArrayState.NotFresh);
+    rNode.diffOperator = diffOperator;
+    rNode.states = states;
+
+    return canPreciseUpdate;
+  }
+
+  // 都是对象
+  if (!isArr && !isPrevArr) {
+    const keys = Object.keys(value);
+    const prevKeys = Object.keys(prevValue);
+
+    // 合并keys和prevKeys
+    const keySet = new Set(keys.concat(prevKeys));
+
+    keySet.forEach(key => {
+      const val = value[key];
+      const prevVal = prevValue[key];
+      const isChanged = val !== prevVal;
+
+      // 如果数据有变化，就触发Effects
+      if (isChanged) {
+        const childRNode = rNode.children?.get(key);
+
+        const isObj = isObject(val);
+        const isPrevObj = isObject(prevVal);
+        // val和prevVal都是对象或数组
+        if (isObj) {
+          // 1、如果上一个属性无法精准更新，就不再递归下一个属性了
+          // 2、如果childRNode为空，说明这个数据未被引用过，也不需要调用RContexts
+          if (canPreciseUpdate && childRNode !== undefined) {
+            canPreciseUpdate = preciseCompareChildren(childRNode as RNode, val, prevVal);
+          }
+        } else if (!isObj && !isPrevObj) {
+          // val和prevVal都不是对象或数组
+          canPreciseUpdate = true;
+        } else {
+          // 类型不同（一个是对象或数组，另外一个不是）
+          canPreciseUpdate = false;
+        }
+
+        // 有childRNode，说明这个数据被使引用过
+        if (childRNode) {
+          childRNode.setDirty();
+        }
+      }
+    });
+
+    return canPreciseUpdate;
+  }
+
+  // 一个是对象，一个是数组
+  canPreciseUpdate = false;
+
+  return canPreciseUpdate;
+}
+
+// 对于数组的变更，尽量尝试精准更新，会记录每行数据是否能够精准更新
+function updateSameLengthArray(rNode: RNode, value: any, prevValue: any, len: number): boolean[] {
+  const canPreciseUpdates: boolean[] = [];
+
+  // 遍历数组或对象，触发子数据的RContexts
+  for (let i = 0; i < len; i++) {
+    const val = value[i];
+    const prevVal = prevValue[i];
+    const isChanged = val !== prevVal;
+
+    // 如果数据有变化，就触发RContexts
+    if (isChanged) {
+      const childRNode = rNode.children?.get(String(i));
+
+      const isObj = isObject(val);
+      const isPrevObj = isObject(prevVal);
+      // val和prevVal都是对象或数组时
+      if (isObj && isPrevObj) {
+        // 如果childRNode为空，说明这个数据未被引用过，也不需要调用RContexts
+        if (childRNode !== undefined) {
+          canPreciseUpdates[i] = preciseCompareChildren(childRNode, val, prevVal);
+        }
+      } else if (!isObj && !isPrevObj) {
+        // val和prevVal都不是对象或数组
+        canPreciseUpdates[i] = true;
+      } else {
+        // 类型不同（一个是对象或数组，另外一个不是）
+        canPreciseUpdates[i] = false;
+      }
+
+      // 有childRNode，说明这个数据被使引用过
+      if (childRNode) {
+        childRNode.setDirty();
+      }
+    } else {
+      canPreciseUpdates[i] = true;
+    }
+  }
+
+  return canPreciseUpdates;
+}
diff --git a/packages/inula-reactive/src/RNodeCreator.ts b/packages/inula-reactive/src/RNodeCreator.ts
new file mode 100644
index 00000000..3e7f5d36
--- /dev/null
+++ b/packages/inula-reactive/src/RNodeCreator.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { isPrimitive } from './Utils';
+import { RNode } from './RNode';
+
+export type Reactive<T = any> = RNode<T> | Atom<T>;
+
+export function createReactive<T extends any>(raw?: T): ReactiveProxy<T> {
+  if (isPrimitive(raw) || raw === null || raw === undefined) {
+    return new RNode(raw, { isSignal: true });
+  } else {
+    const node = new RNode(null, {
+      isProxy: true,
+      root: { $: raw },
+    });
+    return node.proxy as ReactiveProxy<T>;
+  }
+}
+
+export function createComputed<T>(fn: T) {
+  const rNode = new RNode(fn, { isProxy: true, isComputed: true });
+  return rNode.proxy;
+}
+
+export function createWatch<T>(fn: T) {
+  const rNode = new RNode(fn, {
+    isEffect: true,
+  });
+
+  rNode.get();
+}
+
+export function getOrCreateChildProxy(
+  value: unknown,
+  parent: RNode<any>,
+  key: string | symbol
+): Atom | ProxyRNode<any> {
+  const child = getOrCreateChildRNode(parent, key);
+
+  return child.proxy;
+}
+
+export function getOrCreateChildRNode(node: RNode<any>, key: string | symbol): RNode<any> {
+  let child = node.children?.get(key);
+
+  if (!child) {
+    child = new RNode(null, {
+      isProxy: true,
+      parent: node,
+      key: key,
+      root: node.root,
+    });
+  }
+
+  return child;
+}
diff --git a/packages/inula-reactive/src/Reactive.ts b/packages/inula-reactive/src/Reactive.ts
new file mode 100644
index 00000000..3ab9e8e9
--- /dev/null
+++ b/packages/inula-reactive/src/Reactive.ts
@@ -0,0 +1,16 @@
+import { createComputed, createReactive, createWatch } from './RNodeCreator';
+import { RNode } from './RNode';
+
+export interface Reactive {
+  reactive<T>(initialValue: T): RNode<T>;
+
+  watch(fn: () => void): void;
+
+  computed<T>(fn: () => T): RNode<T>;
+}
+
+export const reactive: Reactive = {
+  reactive: createReactive,
+  watch: createWatch,
+  computed: createComputed,
+};
diff --git a/packages/inula-reactive/src/Types.ts b/packages/inula-reactive/src/Types.ts
new file mode 100644
index 00000000..c6cc9a11
--- /dev/null
+++ b/packages/inula-reactive/src/Types.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export enum ArrayState {
+  Fresh = 0,
+  NotFresh = 1,
+}
+
+export type PrimitiveType = string | number | boolean;
+
+export type ValueType<T> = { [K in keyof T]: any } | Record<string, any> | PrimitiveType;
+
+export interface BaseNodeFns<T> {
+  /**
+   * 返回响应式对象的值，自动追踪依赖
+   */
+  get(): T;
+
+  /**
+   * 返回响应式对象的值，不追踪依赖
+   */
+  read(): T;
+}
+
+export interface ProxyRNodeFn<T> extends BaseNodeFns<T> {
+  set<V = ValueType<T>>(value: V | ((prev: T) => V));
+}
+
+export interface AtomNodeFn<T> extends BaseNodeFns<T> {
+  set<V extends PrimitiveType>(value: V | ((prev: T) => V));
+}
+
+type PropsRecursive<T, K extends keyof T, RecurseType> = T[K] extends PrimitiveType
+  ? AtomNode<T[K]>
+  : T[K] extends any[]
+  ? any[] & ProxyRNodeFn<T[K]>
+  : T extends Record<string, any>
+  ? RecurseType
+  : T[K];
+
+export type ProxyRNodeProps<T> = {
+  [K in keyof T]: PropsRecursive<T, K, ProxyRNode<T[K]>>;
+};
+
+export type ComputedProps<T> = {
+  [K in keyof T]: PropsRecursive<T, K, BaseNodeFns<T[K]>>;
+};
+
+export type ProxyRNode<T> = ProxyRNodeFn<T> & ProxyRNodeProps<T>;
+
+export type AtomNode<T> = AtomNodeFn<T>;
+
+export type Computed<T> = BaseNodeFns<T> & ComputedProps<T>;
+
+export type ReactiveProxy<T> = T extends PrimitiveType ? AtomNode<T> : ProxyRNode<T>;
+
+export interface BaseRNode<T> {
+  // 标识Node类型 atomSymbol,nodeSymbol,computedSymbol
+  type: symbol;
+  root: Root<T>;
+  children?: Map<string | symbol, RNode<T> | Atom<T>>;
+  usedRContexts?: RContextSet;
+  proxy?: any;
+
+  diffOperator?: DiffOperator;
+  diffOperators?: DiffOperator[];
+  states?: ArrayState[];
+}
+
+export interface RootRNode<T> extends BaseRNode<T> {
+  parentKey: null;
+  parent: null;
+}
+
+export interface ChildrenRNode<T> extends BaseRNode<T> {
+  parentKey: string | symbol;
+  parent: RNode;
+}
+
+export type RNode<T = any> = RootRNode<T> | ChildrenRNode<T>;
+
+export type Reactive<T = any> = RNode<T> | Atom<T>;
+
diff --git a/packages/inula-reactive/src/Utils.ts b/packages/inula-reactive/src/Utils.ts
new file mode 100644
index 00000000..ceabb15f
--- /dev/null
+++ b/packages/inula-reactive/src/Utils.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { RNode } from './RNode';
+
+export function isReactively(obj: any) {
+  return obj instanceof RNode;
+}
+
+export function isObject(obj: unknown): boolean {
+  const type = typeof obj;
+  return obj != null && (type === 'object' || type === 'function');
+}
+
+export function isPrimitive(obj: unknown): boolean {
+  const type = typeof obj;
+  return obj != null && type !== 'object' && type !== 'function';
+}
+
+export function isFunction<T extends (...prev: any) => any>(obj: unknown): obj is T {
+  return typeof obj === 'function';
+}
+
+export function isArray(obj: any): boolean {
+  return Object.prototype.toString.call(obj) === '[object Array]';
+}
diff --git a/packages/inula-reactive/src/comparison/DiffUtils.ts b/packages/inula-reactive/src/comparison/DiffUtils.ts
new file mode 100644
index 00000000..e81b363d
--- /dev/null
+++ b/packages/inula-reactive/src/comparison/DiffUtils.ts
@@ -0,0 +1,181 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export enum Operation {
+  // 数组长度不同
+  Nop = 0,
+  Insert = 1,
+  Delete = 2,
+  // 数组长度相同
+  Update = 3,
+  Exchange = 4,
+}
+
+export interface Diff {
+  action: Operation;
+  index: number;
+}
+
+export interface DiffOperator {
+  isOnlyNop: boolean;
+  opts: Diff[];
+}
+
+function longestCommonPrefix<T>(arr1: T[], arr2: T[]): number {
+  if (!arr1.length || !arr2.length || arr1[0] !== arr1[0]) {
+    return 0;
+  }
+
+  let low = 0;
+  let start = 0;
+  // 最短数组的长度
+  let high = Math.min(arr1.length, arr2.length);
+  while (low <= high) {
+    const mid = (high + low) >> 1;
+    if (isArrayEqual(arr1, arr2, start, mid)) {
+      low = mid + 1;
+      start = mid;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return low - 1;
+}
+
+function isArrayEqual<T>(str1: T[], str2: T[], start: number, end: number): boolean {
+  for (let j = start; j < end; j++) {
+    if (str1[j] !== str2[j]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * @param origin 原始数组
+ * @param target 目标数组
+ * @returns 返回一个 Diff 数组，表示从原始数组转换为目标数组需要进行的操作
+ */
+export function arrayDiff<T>(origin: T[], target: T[]): DiffOperator {
+  // 使用二分查找计算共同前缀与后缀
+  const prefixLen = longestCommonPrefix(origin, target);
+  const suffixLen = longestCommonPrefix([...origin].reverse(), [...target].reverse());
+  // 删除原数组与目标数组的共同前缀与后缀
+  const optimizedOrigin = origin.slice(prefixLen, origin.length - suffixLen);
+  const optimizedTarget = target.slice(prefixLen, target.length - suffixLen);
+
+  const originLen = optimizedOrigin.length;
+  const targetLen = optimizedTarget.length;
+
+  const dp: number[][] = Array.from(Array(originLen + 1), () => {
+    return Array(targetLen + 1).fill(0);
+  });
+  const pathMatrix: Operation[][] = Array.from(Array(originLen + 1), () => {
+    return Array(targetLen + 1).fill('');
+  });
+
+  let diffs: Diff[] = [];
+
+  // 计算最长公共子序列
+  for (let i = 1; i < originLen + 1; i++) {
+    for (let j = 1; j < targetLen + 1; j++) {
+      if (optimizedOrigin[i - 1] === optimizedTarget[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+        // 如果相等，则表示不需要进行任何操作
+        pathMatrix[i][j] = Operation.Nop;
+      } else if (dp[i - 1][j] > dp[i][j - 1]) {
+        dp[i][j] = dp[i - 1][j];
+        // 如果不相等，则需要进行删除操作
+        pathMatrix[i][j] = Operation.Delete;
+      } else {
+        dp[i][j] = dp[i][j - 1];
+        // 如果不相等，则需要进行插入操作
+        pathMatrix[i][j] = Operation.Insert;
+      }
+    }
+  }
+
+  let hasDelete = false;
+  let hasInsert = false;
+
+  // 计算操作序列
+  function diff(oLen: number, tLen: number) {
+    const stack: Record<string, number>[] = [{ i: oLen, j: tLen }];
+
+    while (stack.length > 0) {
+      const obj = stack.pop();
+      const { i, j } = obj!;
+      if (i === 0 || j === 0) {
+        if (i !== 0) {
+          diffs.unshift(
+            ...optimizedOrigin.slice(0, i).map((item, idx) => ({
+              action: Operation.Delete,
+              index: idx,
+            }))
+          );
+          hasDelete = true;
+        }
+        if (j !== 0) {
+          diffs.unshift(
+            ...optimizedTarget.slice(0, j).map((item, idx) => ({
+              action: Operation.Insert,
+              index: idx,
+            }))
+          );
+          hasInsert = true;
+        }
+      }
+
+      if (pathMatrix[i][j] === Operation.Nop) {
+        stack.push({ i: i - 1, j: j - 1 });
+        // 如果不需要进行任何操作，则表示是公共元素，将其添加到 diffs 中
+        diffs.unshift({ action: Operation.Nop, index: i - 1 });
+      } else if (pathMatrix[i][j] === Operation.Delete) {
+        stack.push({ i: i - 1, j });
+        // 如果需要进行删除操作，则将其添加到 diffs 中
+        diffs.unshift({ action: Operation.Delete, index: i - 1 });
+        hasDelete = true;
+      } else if (pathMatrix[i][j] === Operation.Insert) {
+        stack.push({ i, j: j - 1 });
+        // 如果需要进行插入操作，则将其添加到 diffs 中
+        diffs.unshift({ action: Operation.Insert, index: j - 1 });
+        hasInsert = true;
+      }
+    }
+  }
+
+  // 计算操作序列
+  diff(originLen, targetLen);
+
+  diffs.map(i => (i.index += prefixLen));
+
+  const prefixOpts = Array.from(Array(prefixLen), (_, index) => index).map(idx => ({
+    action: Operation.Nop,
+    index: idx,
+  }));
+
+  const suffixOpts = Array.from(Array(suffixLen), (_, index) => index).map(idx => ({
+    action: Operation.Nop,
+    index: origin.length - suffixLen + idx,
+  }));
+
+  diffs = prefixOpts.concat(diffs, suffixOpts);
+
+  return {
+    isOnlyNop: !hasDelete && !hasInsert,
+    opts: diffs,
+  };
+}
+
diff --git a/packages/inula-reactive/src/proxy/RProxyHandler.ts b/packages/inula-reactive/src/proxy/RProxyHandler.ts
new file mode 100644
index 00000000..850f1a01
--- /dev/null
+++ b/packages/inula-reactive/src/proxy/RProxyHandler.ts
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { getOrCreateChildProxy } from '../RNodeCreator';
+import { getRNodeVal } from '../RNodeAccessor';
+import { isArray } from '../Utils';
+import { RNode } from '../RNode';
+
+const GET = 'get';
+const SET = 'set';
+const READ = 'read';
+const DELETE = 'delete';
+const ONCHANGE = 'onChange';
+export const GET_R_NODE = '$$getRNode';
+const PROTOTYPE = 'prototype';
+
+// 数组的修改方法
+const MODIFY_ARR_FNS = new Set<string | symbol>([
+  'push',
+  'pop',
+  'splice',
+  'shift',
+  'unshift',
+  'reverse',
+  'sort',
+  'fill',
+  'from',
+  'copyWithin',
+]);
+
+// 数组的遍历方法
+const LOOP_ARR_FNS = new Set<string | symbol>(['forEach', 'map', 'every', 'some', 'filter', 'join']);
+
+export function createProxy<T extends any>(proxyNode: RNode) {
+  return new Proxy(proxyNode, {
+    get,
+    set,
+  });
+}
+
+const FNS: Record<typeof GET | typeof READ | typeof DELETE | typeof ONCHANGE, (args: RNode) => any> = {
+  [GET]: getFn,
+  [READ]: readFn,
+  [DELETE]: deleteFn,
+  [ONCHANGE]: onChangeFn,
+};
+
+function get(rNode: RNode, key: string | symbol): any {
+  // 处理 get, read, delete, onchange 方法
+  const fn = FNS[key];
+  if (fn) {
+    return () => fn(rNode);
+  }
+
+  // 调用set()方法
+  if (key === SET) {
+    return function (val: any) {
+      rNode.set(val);
+    };
+  }
+
+  if (key === GET_R_NODE) {
+    return rNode;
+  }
+
+  const rawObj = getRNodeVal(rNode);
+
+  // const value = rawObj !== undefined ? Reflect.get(rawObj, key) : rawObj;
+  const value = rawObj !== undefined ? rawObj[key] : rawObj;
+
+  // 对于prototype不做代理
+  if (key === PROTOTYPE) {
+    return value;
+  }
+
+  if (isArray(rawObj) && key === 'length') {
+    // 标记依赖
+    // trackReactiveData(rNode);
+    return value;
+  }
+
+  // 处理数组的方法
+  if (typeof value === 'function') {
+    if (isArray(rawObj)) {
+      // 处理数组的修改方法
+      if (MODIFY_ARR_FNS.has(key)) {
+        return (...args: any[]) => {
+          // 调用数组方法的时候，前后是相同的引用，所以需要先浅拷贝数组,并在浅拷贝的数组上进行操作
+          const value = rawObj.slice();
+          const ret = value[key](...args);
+          // 调用了数组的修改方法，默认值有变化
+          // setRNodeVal(rNode, value, true, true);
+
+          return ret;
+        };
+      } else if (LOOP_ARR_FNS.has(key)) {
+        // 处理数组的遍历方法
+        // 标记被使用了
+        // trackReactiveData(rNode);
+
+        return function (callBackFn: any, thisArg?: any) {
+          function cb(_: any, index: number, array: any[]) {
+            const idx = String(index);
+            const itemProxy = getOrCreateChildProxy(array[idx], rNode, idx);
+            return callBackFn(itemProxy, index, array);
+          }
+
+          return rawObj[key](cb, thisArg);
+        };
+      }
+    }
+    return value.bind(rawObj);
+  }
+
+  return getOrCreateChildProxy(value, rNode, key);
+}
+
+function set(proxyNode: any, key: string, value: any, receiver: any): boolean {
+  return true;
+}
+
+// get()调用的处理
+function getFn(node: RNode) {
+  return node.get();
+}
+
+function readFn(node: RNode) {
+  return getRNodeVal(node);
+}
+
+// delete()调用的处理
+function deleteFn() {}
+
+// onChange()调用的处理
+function onChangeFn() {}
diff --git a/packages/inula-reactive/tests/reactive.test.ts b/packages/inula-reactive/tests/reactive.test.ts
new file mode 100644
index 00000000..ba659187
--- /dev/null
+++ b/packages/inula-reactive/tests/reactive.test.ts
@@ -0,0 +1,66 @@
+import {reactive as r} from '../src/Reactive';
+
+describe('test reactive', () => {
+  it('two signals, one computed', () => {
+    const a = r.reactive(7);
+    const b = r.reactive(1);
+    let callCount = 0;
+
+    const c = r.computed(() => {
+      callCount++;
+      return a.get() * b.get();
+    });
+
+    r.watch(() => {
+      console.log(a.get());
+    });
+
+    a.set(2);
+    expect(c.get()).toBe(2);
+
+    b.set(3);
+    expect(c.get()).toBe(6);
+
+    expect(callCount).toBe(2);
+    c.read();
+    expect(callCount).toBe(2);
+  });
+
+  it('reactive is a obj', () => {
+    const rObj = r.reactive({count: 1});
+
+    const double = r.computed(() => {
+      return 2 * rObj.count.get();
+    });
+
+    r.watch(() => {
+      console.log('count: ', rObj.count.get(), 'double: ', double.get());
+    });
+
+    expect(double.read()).toBe(2);
+
+    rObj.count.set(2);
+
+    expect(rObj.count.read()).toBe(2);
+    expect(double.read()).toBe(4);
+  });
+
+  it('reactive is a array', () => {
+    const rObj = r.reactive({
+      items: [
+        {name: 'p1', id: 1},
+        {name: 'p2', id: 2},
+      ],
+    });
+
+    const doubleId = r.computed(() => {
+      return 2 * rObj.items[0].id.get();
+    });
+
+    expect(doubleId.get()).toBe(2);
+
+    rObj.items.set([{name: 'p11', id: 11}]);
+
+    expect(doubleId.get()).toBe(22);
+  });
+});