diff --git a/packages/inula-reactive/.editorconfig b/packages/inula-reactive/.editorconfig
new file mode 100644
index 00000000..5a51806d
--- /dev/null
+++ b/packages/inula-reactive/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+
diff --git a/packages/inula-reactive/.gitignore b/packages/inula-reactive/.gitignore
new file mode 100644
index 00000000..f7f1a3cd
--- /dev/null
+++ b/packages/inula-reactive/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.idea
+.vscode
+package-lock.json
+scripts/*.ejs
+build
diff --git a/packages/inula-reactive/README.md b/packages/inula-reactive/README.md
new file mode 100644
index 00000000..2a553e60
--- /dev/null
+++ b/packages/inula-reactive/README.md
@@ -0,0 +1,174 @@
+# 欢迎使用 InulaJS!
+
+## 项目介绍：
+
+InulaJS 是一款用于构建用户界面的Javascript库。
+InulaJS 提供响应式API，相比virtual dom方式，提升渲染效率30%以上。
+InulaJS 提供了5大常用核心组件：状态管理器、路由、国际化、请求组件、应用脚手架，帮助开发者高效、高质量的构筑产品前端。
+InulaJS 同时兼容了React API和相关生态（react-redux、react-router、react-intl、axios等）。
+
+## 安装指南
+
+欢迎使用响应式前端框架 InulaJS！本指南将为您提供详细的安装步骤，以便您可以开始在前端项目中使用该框架。
+
+### 步骤1：安装InulaJS
+
+您可以通过以下几种方式安装InulaJS
+
+#### 使用npm安装
+
+首先，确保您已经安装了 Node.js。你可以在终端中运行以下命令来检查是否已经安装：
+
+```shell
+node -v
+```
+
+如果成功显示 Node.js 的版本号，则说明已经安装。
+
+在命令行中运行以下命令来通过npm安装 InulaJS：
+
+```shell
+npm install inulaJS
+```
+
+#### 使用yarn安装
+
+首先，确保您已经安装了 Node.js。具体操作可参考使用 npm 安装第一步
+
+借来确保您已经安装了 yarn，您可以通过以下命令来安装 Yarn（全局安装）：
+
+```shell
+npm install -g yarn
+```
+
+安装完成后，你可以在终端中运行以下命令来验证 yarn 是否成功安装：
+
+```shell
+yarn --version
+```
+
+如果成功显示 yarn 的版本号，则说明安装成功。
+
+最后，在命令行中运行以下命令来通过yarn安装InulaJS：
+
+```shell
+yarn add inulaJS
+```
+
+注意：yarn 和 npm 是两个独立的包管理器，您可以根据自己的喜好选择使用哪个。它们可以在同一个项目中共存，但建议在一个项目中只使用其中一个来管理依赖。
+
+### 步骤2：开始使用InulaJS
+
+恭喜！您已经成功安装了InulaJS。现在您可以根据您的项目需求自由使用InulaJS提供的组件和功能。
+
+请查阅InulaJS的用户使用指南文档以了解更多关于如何使用和配置框架的详细信息。
+
+## 贡献指南
+
+本指南会指导你如何为InulaJS贡献自己的一份力量，请你在提出issue或pull request前花费几分钟来了解InulaJS社区的贡献指南。
+
+### 行为准则
+
+我们有一份**行为准则**，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保你能明白哪些是可以做的，哪些是不可以做的。
+
+#### 我们的承诺
+
+身为社区成员、贡献者和领袖，我们承诺使社区参与者不受骚扰，无论其年龄、体型、可见或不可见的缺陷、族裔、性征、性别认同和表达、经验水平、教育程度、社会与经济地位、国籍、相貌、种族、种姓、肤色、宗教信仰、性倾向或性取向如何。
+
+我们承诺以有助于建立开放、友善、多样化、包容、健康社区的方式行事和互动。
+
+#### 我们的准则
+
+**有助于为我们的社区创造积极环境的行为例子包括但不限于：**
+
+- 表现出对他人的同情和善意
+- 尊重不同的主张、观点和感受
+- 提出和大方接受建设性意见
+- 承担责任并向受我们错误影响的人道歉
+- 注重社区共同诉求，而非个人得失
+
+**不当行为例子包括：**
+
+- 使用情色化的语言或图像，及性引诱或挑逗
+- 嘲弄、侮辱或诋毁性评论，以及人身或政治攻击
+- 公开或私下的骚扰行为
+- 未经他人明确许可，公布他人的私人信息，如物理或电子邮件地址
+- 其他有理由认定为违反职业操守的不当行为
+
+#### 责任和权力
+
+社区领袖有责任解释和落实我们所认可的行为准则，并妥善公正地对他们认为不当、威胁、冒犯或有害的任何行为采取纠正措施。
+
+社区领导有权力和责任删除、编辑或拒绝或拒绝与本行为准则不相符的评论（comment）、提交（commits）、代码、维基（wiki）编辑、议题（issues）或其他贡献，并在适当时机知采取措施的理由。
+
+#### 适用范围
+
+本行为准则适用于所有社区场合，也适用于在公共场所代表社区时的个人。
+
+代表社区的情形包括使用官方电子邮件地址、通过官方社交媒体帐户发帖或在线上或线下活动中担任指定代表。
+
+#### 监督
+
+辱骂、骚扰或其他不可接受的行为可通过 XX@XXX.com 向负责监督的社区领袖报告。 所有投诉都将得到及时和公平的审查和调查。
+
+所有社区领袖都有义务尊重任何事件报告者的隐私和安全。
+
+#### 参见
+
+本行为准则改编自 Contributor Covenant 2.1 版, 参见 https://www.contributor-covenant.org/version/2/1/code_of_conduct.html。
+
+### 公正透明的开发流程
+
+我们所有的工作都会放在 [Gitee](https://www.gitee.com) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要经过同样流程的 review。
+
+### 分支管理
+
+InulaJS长期维护XX分支。如果你要修复一个Bug或增加一个新的功能，那么请Pull Request到XX分支上
+
+### Bug提交
+
+我们使用 Gitee Issues来进行Bug跟踪。在你发现Bug后，请通过我们提供的模板来提Issue，以便你发现的Bug能被快速解决。
+在你报告一个 bug 之前，请先确保不和已有Issue重复以及查阅了我们的用户使用指南。
+
+### 新增功能
+
+如果你有帮助我们改进API或者新增功能的想法，我们同样推荐你使用我们提供Issue模板来新建一个添加新功能的 Issue。
+
+### 第一次贡献
+
+如果你还不清楚怎么在 Gitee 上提交 Pull Request，你可以通过[这篇文章](https://oschina.gitee.io/opensource-guide/guide/%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%EF%BC%9A%E5%B0%9D%E8%AF%95%E5%8F%82%E4%B8%8E%E5%BC%80%E6%BA%90/%E7%AC%AC%207%20%E5%B0%8F%E8%8A%82%EF%BC%9A%E6%8F%90%E4%BA%A4%E7%AC%AC%E4%B8%80%E4%B8%AA%20Pull%20Request/#%E4%BB%80%E4%B9%88%E6%98%AF-pull-request)学习
+
+当你想开始处理一个 issue 时，先检查一下 issue 下面的留言，确保没有其他人正在处理。如果没有，你可以留言告知其他人你将处理这个 issue，避免重复劳动。
+
+### 开发指南
+
+InulaJS团队会关注所有Pull Request，我们会review以及合入你的代码，也有可能要求你做一些修改或者告诉你我们我们为什么不能接受你的修改。
+
+在你发送 Pull Request 之前，请确认你是按照下面的步骤来做的：
+
+1. 确保基于正确的分支进行修改，详细信息请参考[这里](#分支管理)。
+2. 在项目根目录下运行了 `npm install`。
+3. 如果你修复了一个 bug 或者新增了一个功能，请确保新增或完善了相应的测试，这很重要。
+4. 确认所有的测试都是通过的 `npm run test`
+5. 确保你的代码通过了 lint 检查 `npm run lint`.
+
+#### 常用命令介绍
+
+1. `npm run build` 同时构建InulaJS UMD的prod版本和dev版本
+2. `build-types` 单独构建InulaJS的类型提示@types目录
+
+#### 配套开发工具
+
+- [InulaJS-devtool](https://www.XXXX.com)： 可视化InulaJS项目页面的vDom树
+
+## 开源许可协议
+
+请查阅 License 获取开源许可协议的更多信息.
+
+版权说明：
+
+InulaJS 前端框架，版权所有 © 2023-，InulaJS开发团队。保留一切权利。
+
+除非另有明示，本网站上的内容采用以下许可证进行许可：Creative Commons Attribution 4.0 International License。
+
+如需了解更多信息，请查看完整的许可证协议：https://creativecommons.org/licenses/by/4.0/legalcode
diff --git a/packages/inula-reactive/babel.config.js b/packages/inula-reactive/babel.config.js
new file mode 100644
index 00000000..ce217777
--- /dev/null
+++ b/packages/inula-reactive/babel.config.js
@@ -0,0 +1,49 @@
+/*
+ * 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-typescript', ['@babel/preset-env', { targets: { node: 'current' } }]],
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        pragma: 'Inula.createElement',
+        pragmaFrag: 'Inula.Fragment',
+      },
+    ],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    '@babel/plugin-transform-object-assign',
+    '@babel/plugin-transform-object-super',
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+    ['@babel/plugin-transform-template-literals', { loose: true }],
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-for-of',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-classes',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-spread', { loose: true, useBuiltIns: true }],
+    ['@babel/plugin-transform-block-scoping', { throwIfClosureRequired: false }],
+    ['@babel/plugin-transform-destructuring', { loose: true, useBuiltIns: true }],
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining',
+  ],
+};
diff --git a/packages/inula-reactive/global.d.ts b/packages/inula-reactive/global.d.ts
new file mode 100644
index 00000000..ebb0bfd0
--- /dev/null
+++ b/packages/inula-reactive/global.d.ts
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+/*
+  区分是否开发者模式
+ */
+declare var isDev: boolean;
+declare var isTest: boolean;
+declare const __VERSION__: string;
+declare var setImmediate: Function;
+declare var __INULA_DEV_HOOK__: any;
diff --git a/packages/inula-reactive/jest.config.js b/packages/inula-reactive/jest.config.js
new file mode 100644
index 00000000..87f24bf7
--- /dev/null
+++ b/packages/inula-reactive/jest.config.js
@@ -0,0 +1,36 @@
+/*
+ * 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(),
+
+  setupFiles: [require.resolve('./scripts/__tests__/jest/jestEnvironment.js')],
+
+  setupFilesAfterEnv: [require.resolve('./scripts/__tests__/jest/jestSetting.js')],
+
+  testEnvironment: 'jest-environment-jsdom-sixteen',
+
+  testMatch: [
+    // '<rootDir>/scripts/__tests__/InulaXTest/edgeCases/deepVariableObserver.test.tsx',
+    // '<rootDir>/scripts/__tests__/InulaXTest/StateManager/StateMap.test.tsx',
+    '<rootDir>/scripts/__tests__/**/*.test.js',
+    '<rootDir>/scripts/__tests__/**/*.test.tsx',
+  ],
+
+  timers: 'fake',
+};
diff --git a/packages/inula-reactive/npm/index.js b/packages/inula-reactive/npm/index.js
new file mode 100644
index 00000000..56a07fcb
--- /dev/null
+++ b/packages/inula-reactive/npm/index.js
@@ -0,0 +1,22 @@
+/*
+ * 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';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/inula.production.min.js');
+} else {
+  module.exports = require('./cjs/inula.development.js');
+}
diff --git a/packages/inula-reactive/package.json b/packages/inula-reactive/package.json
new file mode 100644
index 00000000..5700fecb
--- /dev/null
+++ b/packages/inula-reactive/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "inulajs-reactive",
+  "description": "Inulajs is a JavaScript framework library.",
+  "keywords": [
+    "inulajs"
+  ],
+  "version": "0.0.11",
+  "homepage": "",
+  "bugs": "",
+  "main": "index.js",
+  "repository": {},
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "rollup --config ./scripts/rollup/rollup.config.js",
+    "build-types": "tsc -p tsconfig.build.json || echo \"WARNING: TSC exited with status $?\" && rollup -c ./scripts/rollup/build-types.js",
+    "build:watch": "rollup --watch --config ./scripts/rollup/rollup.config.js",
+    "debug-test": "yarn test --debug",
+    "lint": "eslint . --ext .ts --fix",
+    "prettier": "prettier -w libs/**/*.ts",
+    "test": "jest --config=jest.config.js",
+    "watch-test": "yarn test --watch --dev"
+  },
+  "types": "@types/index.d.ts"
+}
diff --git a/packages/inula-reactive/scripts/__tests__/ActTest/act.test.js b/packages/inula-reactive/scripts/__tests__/ActTest/act.test.js
new file mode 100644
index 00000000..6b012c89
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ActTest/act.test.js
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, useState, act, useEffect } from '../../../src/index';
+
+describe('Inula.act function Test', () => {
+  it('The act can wait for the useEffect update to complete.', function () {
+    const Parent = props => {
+      const [buttonOptions, setBtn] = useState([]);
+      const [checkedRows, setCheckedRows] = useState([]);
+
+      useEffect(() => {
+        setBtn([1, 2, 3]);
+      }, [checkedRows.length]);
+
+      return (
+        <div>
+          <Child buttonOptions={buttonOptions}></Child>
+        </div>
+      );
+    };
+
+    const Child = props => {
+      const { buttonOptions } = props;
+      const [btnList, setBtnList] = useState(0);
+
+      useEffect(() => {
+        setBtnList(buttonOptions.length);
+      }, [buttonOptions]);
+
+      return <div id="childDiv">{btnList}</div>;
+    };
+
+    act(() => {
+      render(<Parent />, container);
+    });
+
+    // act能够等待useEffect触发的update完成
+    expect(container.querySelector('#childDiv').innerHTML).toEqual('3');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/ClassRefs.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/ClassRefs.test.js
new file mode 100644
index 00000000..14c7db23
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/ClassRefs.test.js
@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Class refs Test', () => {
+  it('Parent can get Child instance by refs', function () {
+    let pInst;
+
+    class Parent extends Inula.Component {
+      componentDidMount() {
+        pInst = this;
+      }
+
+      render() {
+        return (
+          <div>
+            <Child ref="child">
+              <div ref="childDiv">childDiv</div>
+            </Child>
+          </div>
+        );
+      }
+    }
+
+    class Child extends Inula.Component {
+      state = { y: 0 };
+
+      render() {
+        return <div>{this.props.children}</div>;
+      }
+    }
+
+    Inula.render(<Parent />, container);
+
+    expect(pInst.refs['child'].state.y).toEqual(0);
+    expect(pInst.refs['childDiv'].innerHTML).toEqual('childDiv');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/ComponentError.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/ComponentError.test.js
new file mode 100644
index 00000000..edee5d9c
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/ComponentError.test.js
@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Component Error Test', () => {
+  const LogUtils = getLogUtils();
+  it('createElement不能为null或undefined', () => {
+    const NullElement = null;
+    const UndefinedElement = undefined;
+
+    jest.spyOn(console, 'error').mockImplementation();
+    expect(() => {
+      Inula.render(<NullElement />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: null');
+
+    expect(() => {
+      Inula.render(<UndefinedElement />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: undefined');
+
+    const App = () => {
+      return <AppChild />;
+    };
+
+    let AppChild = () => {
+      return <NullElement />;
+    };
+
+    expect(() => {
+      Inula.render(<App />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: null');
+
+    AppChild = () => {
+      return <UndefinedElement />;
+    };
+
+    expect(() => {
+      Inula.render(<App />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: undefined');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/Context.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/Context.test.js
new file mode 100644
index 00000000..f6de0274
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/Context.test.js
@@ -0,0 +1,414 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Context Test', () => {
+  const LogUtils = getLogUtils();
+  it('Provider及其内部consumer组件都不受制于shouldComponentUpdate函数或者Inula.memo()', () => {
+    const LanguageTypes = {
+      JAVA: 'Java',
+      JAVASCRIPT: 'JavaScript',
+    };
+    const defaultValue = { type: LanguageTypes.JAVASCRIPT };
+    const SystemLanguageContext = Inula.createContext(defaultValue);
+    const SystemLanguageConsumer = SystemLanguageContext.Consumer;
+    const SystemLanguageProvider = props => {
+      LogUtils.log('SystemLanguageProvider');
+      return <SystemLanguageContext.Provider value={props.type}>{props.children}</SystemLanguageContext.Provider>;
+    };
+
+    const Consumer = () => {
+      LogUtils.log('Consumer');
+      return (
+        <SystemLanguageConsumer>
+          {type => {
+            LogUtils.log('Consumer DOM mutations');
+            return <p>{type}</p>;
+          }}
+        </SystemLanguageConsumer>
+      );
+    };
+
+    class Middle extends Inula.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        LogUtils.log('Middle');
+        return this.props.children;
+      }
+    }
+
+    const App = props => {
+      LogUtils.log('App');
+      return (
+        <SystemLanguageProvider type={props.value}>
+          <Middle>
+            <Middle>
+              <Consumer />
+            </Middle>
+          </Middle>
+        </SystemLanguageProvider>
+      );
+    };
+
+    Inula.render(<App value={LanguageTypes.JAVA} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Java');
+    expect(LogUtils.getAndClear()).toEqual([
+      'App',
+      'SystemLanguageProvider',
+      'Middle',
+      'Middle',
+      'Consumer',
+      'Consumer DOM mutations',
+    ]);
+
+    // 组件不变，Middle没有更新，消费者也不会执行
+    Inula.render(<App value={LanguageTypes.JAVA} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Java');
+    expect(LogUtils.getAndClear()).toEqual(['App', 'SystemLanguageProvider']);
+
+    Inula.render(<App value={LanguageTypes.JAVASCRIPT} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('JavaScript');
+    // 组件更新，但是Middle没有更新，会绕过Middle
+    expect(LogUtils.getAndClear()).toEqual(['App', 'SystemLanguageProvider', 'Consumer DOM mutations']);
+  });
+
+  it('嵌套consumer provider', () => {
+    const Num = {
+      ONE: 1,
+      TWO: 2,
+    };
+    const NumberContext = Inula.createContext(0);
+    const NumberConsumer = NumberContext.Consumer;
+    const NumberProvider = props => {
+      LogUtils.log(`SystemLanguageProvider: ${props.type}`);
+      return <NumberContext.Provider value={props.type}>{props.children}</NumberContext.Provider>;
+    };
+
+    const Consumer = () => {
+      LogUtils.log('Consumer');
+      return (
+        <NumberConsumer>
+          {type => {
+            LogUtils.log('Consumer DOM mutations');
+            return <p>{type}</p>;
+          }}
+        </NumberConsumer>
+      );
+    };
+
+    class Middle extends Inula.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        LogUtils.log('Middle');
+        return this.props.children;
+      }
+    }
+
+    const App = props => {
+      LogUtils.log('App');
+      return (
+        <NumberProvider type={props.value}>
+          <NumberProvider type={props.value + 1}>
+            <Middle>
+              <Consumer />
+            </Middle>
+          </NumberProvider>
+        </NumberProvider>
+      );
+    };
+
+    // Consumer决定于距离它最近的provider
+    Inula.render(<App value={Num.ONE} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('2');
+    expect(LogUtils.getAndClear()).toEqual([
+      'App',
+      'SystemLanguageProvider: 1',
+      'SystemLanguageProvider: 2',
+      'Middle',
+      'Consumer',
+      'Consumer DOM mutations',
+    ]);
+    // 更新
+    Inula.render(<App value={Num.TWO} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('3');
+    expect(LogUtils.getAndClear()).toEqual([
+      'App',
+      'SystemLanguageProvider: 2',
+      'SystemLanguageProvider: 3',
+      'Consumer DOM mutations',
+    ]);
+  });
+
+  it('设置defaultValue', () => {
+    const Num = {
+      ONE: 1,
+      TWO: 2,
+    };
+    const NumberContext = Inula.createContext(0);
+    const NewNumberContext = Inula.createContext(1);
+    const NumberConsumer = NumberContext.Consumer;
+    const NumberProvider = props => {
+      return <NumberContext.Provider value={props.type}>{props.children}</NumberContext.Provider>;
+    };
+    const NewNumberProvider = props => {
+      return <NewNumberContext.Provider value={props.type}>{props.children}</NewNumberContext.Provider>;
+    };
+
+    class Middle extends Inula.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    const NewApp = props => {
+      return (
+        <NewNumberProvider value={props.value}>
+          <Middle>
+            <NumberConsumer>
+              {type => {
+                LogUtils.log('Consumer DOM mutations');
+                return <p>{type}</p>;
+              }}
+            </NumberConsumer>
+          </Middle>
+        </NewNumberProvider>
+      );
+    };
+
+    const App = props => {
+      return (
+        <NumberProvider value={props.value}>
+          <Middle>
+            <NumberConsumer>
+              {type => {
+                LogUtils.log('Consumer DOM mutations');
+                return <p>{type}</p>;
+              }}
+            </NumberConsumer>
+          </Middle>
+        </NumberProvider>
+      );
+    };
+
+    Inula.render(<NewApp value={Num.ONE} />, container);
+    // 没有匹配到Provider,会使用defaultValue
+    expect(container.querySelector('p').innerHTML).toBe('0');
+
+    // 更新,设置value为undefined
+    Inula.render(<App value={undefined} />, container);
+    // 设置value为undefined时，defaultValue不生效
+    expect(container.querySelector('p').innerHTML).toBe('');
+  });
+
+  it('不同provider下的多个consumer', () => {
+    const NumContext = Inula.createContext(1);
+    const Consumer = NumContext.Consumer;
+
+    function Provider(props) {
+      return (
+        <Consumer>
+          {value => <NumContext.Provider value={props.value || value * 2}>{props.children}</NumContext.Provider>}
+        </Consumer>
+      );
+    }
+
+    class Middle extends Inula.Component {
+      shouldComponentUpdate() {
+        return false;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    const App = props => {
+      return (
+        <Provider value={props.value}>
+          <Middle>
+            <Middle>
+              <Provider>
+                <Consumer>{value => <p>{value}</p>}</Consumer>
+              </Provider>
+            </Middle>
+            <Middle>
+              <Consumer>{value => <p id="p">{value}</p>}</Consumer>
+            </Middle>
+          </Middle>
+        </Provider>
+      );
+    };
+
+    Inula.render(<App value={2} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('4');
+    expect(container.querySelector('#p').innerHTML).toBe('2');
+
+    Inula.render(<App value={3} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('6');
+    expect(container.querySelector('#p').innerHTML).toBe('3');
+  });
+
+  it('consumer里的child更新是不会重新渲染', () => {
+    const NumContext = Inula.createContext(1);
+    const Consumer = NumContext.Consumer;
+
+    let setNum;
+    const ReturnDom = props => {
+      const [num, _setNum] = Inula.useState(0);
+      setNum = _setNum;
+      LogUtils.log('ReturnDom');
+      return <p>{`Context: ${props.context}, Num: ${num}`}</p>;
+    };
+
+    const App = props => {
+      return (
+        <NumContext.Provider value={props.value}>
+          <Consumer>
+            {value => {
+              LogUtils.log('Consumer');
+              return <ReturnDom context={value} />;
+            }}
+          </Consumer>
+        </NumContext.Provider>
+      );
+    };
+
+    Inula.render(<App value={2} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Context: 2, Num: 0');
+    expect(LogUtils.getAndClear()).toEqual(['Consumer', 'ReturnDom']);
+    setNum(3);
+    expect(container.querySelector('p').innerHTML).toBe('Context: 2, Num: 3');
+    expect(LogUtils.getAndClear()).toEqual(['ReturnDom']);
+  });
+
+  it('consumer可以拿到其他context的值', () => {
+    const NumContext = Inula.createContext(1);
+    const TypeContext = Inula.createContext('typeA');
+
+    const NumAndType = () => {
+      const type = Inula.useContext(TypeContext);
+      return (
+        <NumContext.Consumer>
+          {value => {
+            LogUtils.log('Consumer');
+            return <p>{`Num: ${value}, Type: ${type}`}</p>;
+          }}
+        </NumContext.Consumer>
+      );
+    };
+
+    const App = props => {
+      return (
+        <NumContext.Provider value={props.num}>
+          <TypeContext.Provider value={props.type}>
+            <NumAndType />
+          </TypeContext.Provider>
+        </NumContext.Provider>
+      );
+    };
+
+    Inula.render(<App num={2} type={'typeB'} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Num: 2, Type: typeB');
+
+    Inula.render(<App num={2} type={'typeR'} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Num: 2, Type: typeR');
+
+    Inula.render(<App num={8} type={'typeR'} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('Num: 8, Type: typeR');
+  });
+
+  // antd menu 级连context场景，menu路径使用级联context实现
+  it('nested context', () => {
+    const NestedContext = Inula.createContext([]);
+    let updateContext;
+
+    function App() {
+      const [state, useState] = Inula.useState([]);
+      updateContext = useState;
+      return (
+        <NestedContext.Provider value={state}>
+          <Sub1 />
+          <Sub2 />
+        </NestedContext.Provider>
+      );
+    }
+
+    const div1Ref = Inula.createRef();
+    const div2Ref = Inula.createRef();
+
+    let updateSub1;
+    function Sub1() {
+      const path = Inula.useContext(NestedContext);
+      const [_, setState] = Inula.useState({});
+      updateSub1 = () => setState({});
+      return (
+        <NestedContext.Provider value={[...path, 1]}>
+          <Son divRef={div1Ref} />
+        </NestedContext.Provider>
+      );
+    }
+
+    function Sub2() {
+      const path = Inula.useContext(NestedContext);
+
+      return (
+        <NestedContext.Provider value={[...path, 2]}>
+          <Sub3 />
+        </NestedContext.Provider>
+      );
+    }
+
+    function Sub3() {
+      const path = Inula.useContext(NestedContext);
+
+      return (
+        <NestedContext.Provider value={[...path, 3]}>
+          <Son divRef={div2Ref} />
+        </NestedContext.Provider>
+      );
+    }
+
+    function Son({ divRef }) {
+      const path = Inula.useContext(NestedContext);
+      return (
+        <NestedContext.Provider value={path}>
+          <div ref={divRef}>{path.join(',')}</div>
+        </NestedContext.Provider>
+      );
+    }
+
+    Inula.render(<App />, container);
+    updateSub1();
+    expect(div1Ref.current.innerHTML).toEqual('1');
+    expect(div2Ref.current.innerHTML).toEqual('2,3');
+
+    updateContext([0]);
+    expect(div1Ref.current.innerHTML).toEqual('0,1');
+    expect(div2Ref.current.innerHTML).toEqual('0,2,3');
+
+    // 局部更新Sub1
+    updateSub1();
+    expect(div1Ref.current.innerHTML).toEqual('0,1');
+    expect(div2Ref.current.innerHTML).toEqual('0,2,3');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/DiffAlgorithm.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/DiffAlgorithm.test.js
new file mode 100644
index 00000000..54e102dc
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/DiffAlgorithm.test.js
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Diff Algorithm', () => {
+  it('null should diff correctly', () => {
+    const fn = jest.fn();
+
+    class C extends Inula.Component {
+      constructor() {
+        super();
+        fn();
+      }
+
+      render() {
+        return 1;
+      }
+    }
+
+    let update;
+
+    function App() {
+      const [current, setCurrent] = Inula.useState(1);
+      update = setCurrent;
+      return (
+        <>
+          {current === 1 ? <C /> : null}
+          {current === 2 ? <C /> : null}
+          {current === 3 ? <C /> : null}
+        </>
+      );
+    }
+
+    Inula.render(<App text="app" />, container);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    update(2);
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    update(3);
+    expect(fn).toHaveBeenCalledTimes(3);
+
+    update(1);
+    expect(fn).toHaveBeenCalledTimes(4);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/ForwardRef.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/ForwardRef.test.js
new file mode 100644
index 00000000..2e861595
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/ForwardRef.test.js
@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('ForwardRef', () => {
+  const LogUtils = getLogUtils();
+  it('ForwardRef包裹的函数组件应该正常触发effect', () => {
+    function App(props, ref) {
+      Inula.useEffect(() => {
+        LogUtils.log('effect');
+        return () => {
+          LogUtils.log('effect remove');
+        };
+      });
+      return <button ref={ref}></button>;
+    }
+
+    const Wrapper = Inula.forwardRef(App);
+
+    Inula.act(() => {
+      Inula.render(<Wrapper />, container);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['effect']);
+    Inula.act(() => {
+      Inula.render(<Wrapper />, container);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['effect remove', 'effect']);
+  });
+
+  it('memo组件包裹的类组件', () => {
+    class Component extends Inula.Component {
+      render() {
+        return <button>123</button>;
+      }
+    }
+
+    const Wrapper = Inula.memo(Component);
+
+    Inula.act(() => {
+      Inula.render(<Wrapper />, container);
+    });
+    Inula.act(() => {
+      Inula.render(<Wrapper />, container);
+    });
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/FragmentComponent.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/FragmentComponent.test.js
new file mode 100644
index 00000000..c91c5dac
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/FragmentComponent.test.js
@@ -0,0 +1,476 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Fragment', () => {
+  const LogUtils = getLogUtils();
+  const { useEffect, useRef, act } = Inula;
+  it('可以渲染空元素', () => {
+    const element = <Inula.Fragment />;
+
+    Inula.render(element, container);
+
+    expect(container.textContent).toBe('');
+  });
+  it('可以渲染单个元素', () => {
+    const element = (
+      <Inula.Fragment>
+        <Text text="Fragment" />
+      </Inula.Fragment>
+    );
+
+    Inula.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['Fragment']);
+    expect(container.textContent).toBe('Fragment');
+  });
+
+  it('可以渲染混合元素', () => {
+    const element = (
+      <Inula.Fragment>
+        Java and <Text text="JavaScript" />
+      </Inula.Fragment>
+    );
+
+    Inula.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['JavaScript']);
+    expect(container.textContent).toBe('Java and JavaScript');
+  });
+
+  it('可以渲染集合元素', () => {
+    const App = [<Text text="Java" />, <Text text="JavaScript" />];
+    const element = <>{App}</>;
+
+    Inula.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['Java', 'JavaScript']);
+    expect(container.textContent).toBe('JavaJavaScript');
+  });
+
+  it('元素被放进不同层级Fragment里时,状态不会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <>
+          <ChildApp logo={1} />
+        </>
+      ) : (
+        <>
+          <>
+            <ChildApp logo={2} />
+          </>
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 切换到不同层级Fragment时，副作用状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进单层Fragment里,且在Fragment的顶部时,状态会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+        <>
+          <ChildApp logo={2} />
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进单层Fragment里,但不在Fragment的顶部时,状态不会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+        <>
+          <div>123</div>
+          <ChildApp logo={2} />
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1232');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进多层Fragment里时,状态不会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+        <>
+          <>
+            <>
+              <ChildApp logo={2} />
+            </>
+          </>
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被切换放进同级Fragment里时,状态会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <>
+          <>
+            <>
+              <ChildApp logo={1} />
+            </>
+          </>
+        </>
+      ) : (
+        <>
+          <>
+            <>
+              <ChildApp logo={2} />
+            </>
+          </>
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被切换放进同级Fragment,且在数组顶层时,状态会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <>
+          <>
+            <>
+              <ChildApp logo={1} />
+            </>
+          </>
+        </>
+      ) : (
+        <>
+          <>
+            <>{[<ChildApp logo={2} />]}</>
+          </>
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('数组里的顶层元素被切换放进单级Fragment时,状态会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        [<ChildApp logo={1} />]
+      ) : (
+        <>
+          <ChildApp logo={2} />
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('Fragment里的顶层数组里的顶层元素被切换放进不同级Fragment时,状态不会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <>
+          [<ChildApp logo={1} />]
+        </>
+      ) : (
+        <>
+          <>
+            <ChildApp logo={2} />
+          </>
+        </>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('[1]');
+  });
+
+  it('Fragment的key值不同时,状态不会保留', () => {
+    const ChildApp = props => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = props => {
+      return props.change ? (
+        <Inula.Fragment key="hf">
+          <ChildApp logo={1} />
+        </Inula.Fragment>
+      ) : (
+        <Inula.Fragment key="nhf">
+          <ChildApp logo={2} />
+        </Inula.Fragment>
+      );
+    };
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Inula.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Inula.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/FunctionComponent.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/FunctionComponent.test.js
new file mode 100644
index 00000000..0b5d18a8
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/FunctionComponent.test.js
@@ -0,0 +1,92 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+describe('FunctionComponent Test', () => {
+  it('渲染无状态组件', () => {
+    const App = props => {
+      return <p>{props.text}</p>;
+    };
+
+    Inula.render(<App text="app" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('app');
+  });
+
+  it('更新无状态组件', () => {
+    const App = props => {
+      return <p>{props.text}</p>;
+    };
+
+    Inula.render(<App text="app" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('app');
+
+    Inula.render(<App text="ABC" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('ABC');
+
+    Inula.render(<App text="abc" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('abc');
+  });
+
+  it('卸载无状态组件', () => {
+    const App = props => {
+      return <p>{props.text}</p>;
+    };
+
+    Inula.render(<App text="app" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('app');
+
+    Inula.unmountComponentAtNode(container);
+    expect(container.querySelector('p')).toBe(null);
+  });
+
+  it('渲染空组件返回空子节点', () => {
+    const App = () => {
+      return <div />;
+    };
+
+    const realNode = Inula.render(<App />, container);
+    expect(realNode).toBe(null);
+  });
+
+  it('测试函数组件的defaultProps：Inula.memo(Inula.forwardRef(()=>{}))两层包装的场景后，defaultProps依然正常', () => {
+    const App = () => {
+      return <DefaultPropsCompMemo />;
+    };
+
+    const DefaultPropsComp = Inula.forwardRef(props => {
+      return <div>{props.name}</div>;
+    });
+    DefaultPropsComp.defaultProps = {
+      name: 'Hello!',
+    };
+    const DefaultPropsCompMemo = Inula.memo(DefaultPropsComp);
+
+    Inula.render(<App />, container);
+    expect(container.querySelector('div').innerHTML).toBe('Hello!');
+  });
+
+  it('测试', () => {
+    const App = () => {
+      return <StyleComp />;
+    };
+
+    const StyleComp = props => {
+      return <div style={{ '--max-segment-num': 10 }}>{props.name}</div>;
+    };
+
+    Inula.render(<App />, container);
+    expect(container.querySelector('div').style['_values']['--max-segment-num']).toBe(10);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js
new file mode 100644
index 00000000..5dc7a697
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+
+describe('useCallback Hook Test', () => {
+  const { useState, useCallback } = Inula;
+
+  it('测试useCallback', () => {
+    const App = props => {
+      const [num, setNum] = useState(0);
+      const NumUseCallback = useCallback(() => {
+        setNum(num + props.text);
+      }, [props]);
+      return (
+        <>
+          <p>{num}</p>
+          <button onClick={NumUseCallback} />
+        </>
+      );
+    };
+    Inula.render(<App text={1} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    // 点击按钮触发num加1
+    container.querySelector('button').click();
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    // 再次点击，依赖项没变，num不增加
+    container.querySelector('button').click();
+    expect(container.querySelector('p').innerHTML).toBe('1');
+
+    Inula.render(<App text={2} />, container);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    // 依赖项有变化，点击按钮num增加
+    container.querySelector('button').click();
+    expect(container.querySelector('p').innerHTML).toBe('3');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js
new file mode 100644
index 00000000..e5db8cab
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js
@@ -0,0 +1,93 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+
+describe('useContext Hook Test', () => {
+  const { useState, useContext, createContext, act, unmountComponentAtNode } = Inula;
+
+  it('简单使用useContext', () => {
+    const LanguageTypes = {
+      JAVA: 'Java',
+      JAVASCRIPT: 'JavaScript',
+    };
+    const defaultValue = { type: LanguageTypes.JAVASCRIPT };
+    const SystemLanguageContext = Inula.createContext(defaultValue);
+
+    const SystemLanguageProvider = ({ type, children }) => {
+      return <SystemLanguageContext.Provider value={{ type }}>{children}</SystemLanguageContext.Provider>;
+    };
+    const TestFunction = () => {
+      const context = useContext(SystemLanguageContext);
+      return <p id="p">{context.type}</p>;
+    };
+    let setValue;
+    const App = () => {
+      const [value, _setValue] = useState(LanguageTypes.JAVA);
+      setValue = _setValue;
+      return (
+        <div className="App">
+          <SystemLanguageProvider type={value}>
+            <TestFunction />
+          </SystemLanguageProvider>
+        </div>
+      );
+    };
+    Inula.render(<TestFunction />, container);
+    // 测试当Provider未提供时，获取到的默认值'JavaScript'。
+    expect(container.querySelector('p').innerHTML).toBe('JavaScript');
+    unmountComponentAtNode(container);
+    Inula.render(<App />, container);
+    // 测试当Provider提供时，可以获取到Provider的值'Java'。
+    expect(container.querySelector('p').innerHTML).toBe('Java');
+    // 测试当Provider改变时，可以获取到最新Provider的值。
+    act(() => setValue(LanguageTypes.JAVASCRIPT));
+    expect(container.querySelector('p').innerHTML).toBe('JavaScript');
+  });
+
+  it('更新后useContext仍能获取到context', () => {
+    const Context = createContext({});
+    const ref = Inula.createRef();
+
+    function App() {
+      return (
+        <Context.Provider
+          value={{
+            text: 'context',
+          }}
+        >
+          <Child />
+        </Context.Provider>
+      );
+    }
+
+    let update;
+
+    function Child() {
+      const context = useContext(Context);
+      const [_, setState] = useState({});
+      update = () => setState({});
+
+      return <div ref={ref}>{context.text}</div>;
+    }
+
+    Inula.render(<App />, container);
+    expect(ref.current.innerHTML).toBe('context');
+
+    update();
+
+    expect(ref.current.innerHTML).toBe('context');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js
new file mode 100644
index 00000000..a2699a3a
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js
@@ -0,0 +1,681 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { getLogUtils } from '../../jest/testUtils';
+import { Text } from '../../jest/commonComponents';
+
+describe('useEffect Hook Test', () => {
+  const { useEffect, useLayoutEffect, useState, memo, forwardRef, act } = Inula;
+
+  const LogUtils = getLogUtils();
+  it('简单使用useEffect', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      useEffect(() => {
+        document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
+      });
+      return (
+        <>
+          <p style={{ display: 'block' }} id="p">
+            {num}
+          </p>
+          <button onClick={() => setNum(num + 1)} />
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(document.getElementById('p').style.display).toBe('block');
+    // 点击按钮触发num加1
+    container.querySelector('button').click();
+
+    expect(document.getElementById('p').style.display).toBe('none');
+    container.querySelector('button').click();
+    expect(container.querySelector('p').style.display).toBe('inline');
+  });
+
+  it('act方法', () => {
+    const App = () => {
+      return <Text text={'op'} />;
+    };
+
+    act(() => {
+      Inula.render(<App />, container, () => {
+        LogUtils.log('num effect');
+      });
+      // 第一次渲染为同步，所以同步执行的可以写在act里做判断
+      expect(LogUtils.getAndClear()).toEqual(['op', 'num effect']);
+      expect(container.textContent).toBe('op');
+    });
+    act(() => {
+      Inula.render(null, container, () => {
+        LogUtils.log('num effect89');
+      });
+      // 第二次渲染为异步，所以同步执行的不可以写在act里做判断，act里拿到的为空数组
+      expect(LogUtils.getAndClear()).toEqual([]);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect89']);
+    expect(container.textContent).toBe('');
+  });
+
+  it('兄弟节点被删除，useEffect依然正常', () => {
+    const App = () => {
+      return <Text text="App" />;
+    };
+    const NewApp = () => {
+      useEffect(() => {
+        LogUtils.log(`NewApp effect`);
+      }, []);
+      return <Text text="NewApp" />;
+    };
+    const na = <NewApp />;
+    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
+    Inula.render([<App key="app" />, na], container);
+    expect(LogUtils.getAndClear()).toEqual(['App', 'NewApp']);
+    expect(container.textContent).toBe('AppNewApp');
+    expect(LogUtils.getAndClear()).toEqual([]);
+    // 在执行新的render前，会执行完上一次render的useEffect，所以LogUtils会加入'NewApp effect'。
+    Inula.render([na], container);
+    expect(LogUtils.getAndClear()).toEqual(['NewApp effect', 'NewApp']);
+    expect(container.textContent).toBe('NewApp');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('兄弟节点更新，useEffect依然正常', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      useLayoutEffect(() => {
+        if (num === 0) {
+          setNum(1);
+        }
+        LogUtils.log('App Layout effect ' + num);
+      });
+      return <Text text="App" />;
+    };
+    const NewApp = () => {
+      useEffect(() => {
+        LogUtils.log(`NewApp effect`);
+      }, []);
+      return <Text text="NewApp" />;
+    };
+    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
+    Inula.render([<App key="app" />, <NewApp />], container);
+    expect(LogUtils.getAndClear()).toEqual([
+      'App',
+      'NewApp',
+      'App Layout effect 0',
+      // 在App更新前，会执行完NewApp的useEffect
+      'NewApp effect',
+      'App',
+      'App Layout effect 1',
+    ]);
+    expect(container.textContent).toBe('AppNewApp');
+  });
+
+  it('兄弟节点执行新的挂载动作，useEffect依然正常', () => {
+    const newContainer = document.createElement('div');
+    const App = () => {
+      useLayoutEffect(() => {
+        LogUtils.log('App Layout effect');
+        Inula.render(<Text text="NewContainer" />, newContainer);
+      });
+      return <Text text="App" />;
+    };
+    const NewApp = () => {
+      useEffect(() => {
+        LogUtils.log(`NewApp effect`);
+      }, []);
+      return <Text text="NewApp" />;
+    };
+    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
+    Inula.render([<App key="app" />, <NewApp />], container);
+    expect(LogUtils.getAndClear()).toEqual([
+      'App',
+      'NewApp',
+      'App Layout effect',
+      // 在执行useLayoutEffectApp的render前，会执行完NewApp的useEffect
+      'NewApp effect',
+      'NewContainer',
+    ]);
+    expect(container.textContent).toBe('AppNewApp');
+  });
+
+  it('执行新render的useEffect前会先执行旧render的useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`First effect [${props.num}]`);
+      });
+      return <Text text={'num: ' + props.num} />;
+    };
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
+      expect(container.textContent).toEqual('num: 0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['First effect [0]']);
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    // 此时异步执行，act执行完后会执行新render的useEffect
+    expect(LogUtils.getAndClear()).toEqual(['num: 1', 'callback effect', 'First effect [1]']);
+    expect(container.textContent).toEqual('num: 1');
+  });
+
+  it('混合使用useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`First effect [${props.num}]`);
+      });
+      useEffect(() => {
+        LogUtils.log(`Second effect [${props.num}]`);
+      });
+      return <Text text={'num: ' + props.num} />;
+    };
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
+      expect(container.textContent).toEqual('num: 0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']);
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    // 第二次render时异步执行，act保证所有效果都已更新，所以先常规记录日志
+    // 然后记录useEffect的日志
+    expect(LogUtils.getAndClear()).toEqual(['num: 1', 'callback effect', 'First effect [1]', 'Second effect [1]']);
+    expect(container.textContent).toEqual('num: 1');
+  });
+
+  it('创建，销毁useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log('num effect destroy');
+        };
+      }, [props.num]);
+      useEffect(() => {
+        LogUtils.log(`word effect [${props.word}]`);
+        return () => {
+          LogUtils.log('word effect destroy');
+        };
+      }, [props.word]);
+      useLayoutEffect(() => {
+        LogUtils.log(`num Layouteffect [${props.num}]`);
+        return () => {
+          LogUtils.log('num Layouteffect destroy');
+        };
+      }, [props.num]);
+      useLayoutEffect(() => {
+        LogUtils.log(`word Layouteffect [${props.word}]`);
+        return () => {
+          LogUtils.log('word Layouteffect destroy');
+        };
+      }, [props.word]);
+      return <Text text={'num: ' + props.num + ',word: ' + props.word} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual([
+        'num: 0,word: App',
+        'num Layouteffect [0]',
+        'word Layouteffect [App]',
+        'callback effect',
+      ]);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]', 'word effect [App]']);
+
+    act(() => {
+      // 此时word改变，num不变
+      Inula.render(<App num={0} word={'Inula'} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      'num: 0,word: Inula',
+      'word Layouteffect destroy',
+      'word Layouteffect [Inula]',
+      'callback effect',
+      // 最后执行异步的
+      'word effect destroy',
+      'word effect [Inula]',
+    ]);
+
+    act(() => {
+      // 此时num和word的所有effect都销毁
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      'num Layouteffect destroy',
+      'word Layouteffect destroy',
+      'callback effect',
+      // 最后执行异步useEffect
+      'num effect destroy',
+      'word effect destroy',
+    ]);
+  });
+
+  it('销毁不含依赖数组的useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log('num effect destroy');
+        };
+      });
+      return <Text text={'num: ' + props.num} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
+      expect(container.textContent).toEqual('num: 0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      'num: 1',
+      'callback effect',
+      // 最后执行异步
+      'num effect destroy',
+      'num effect [1]',
+    ]);
+    expect(container.textContent).toEqual('num: 1');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy']);
+    expect(container.textContent).toEqual('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('销毁依赖空数组的useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log('num effect destroy');
+        };
+      }, []);
+      return <Text text={'num: ' + props.num} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
+      expect(container.textContent).toEqual('num: 0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      'num: 1',
+      'callback effect',
+      // 依赖空数组，没有执行useEffect
+    ]);
+    expect(container.textContent).toEqual('num: 1');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy']);
+    expect(container.textContent).toEqual('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('useEffect里使用useState(1', () => {
+    let setNum;
+    const App = () => {
+      const [num, _setNum] = Inula.useState(0);
+      useEffect(() => {
+        LogUtils.log(`num effect [${num}]`);
+        setNum = () => _setNum(1);
+      }, [num]);
+      useLayoutEffect(() => {
+        LogUtils.log(`num Layouteffect [${num}]`);
+        return () => {
+          LogUtils.log('num Layouteffect destroy');
+        };
+      }, []);
+      return <Text text={'num: ' + num} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'num Layouteffect [0]', 'callback effect']);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    act(() => {
+      setNum();
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num: 1', 'num effect [1]']);
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('useEffect里使用useState(2', () => {
+    let setNum;
+    const App = () => {
+      const [num, _setNum] = useState(0);
+      setNum = _setNum;
+      useEffect(() => {
+        LogUtils.log(`App effect`);
+        setNum(1);
+      }, []);
+      return <Text text={'Num: ' + num} />;
+    };
+
+    Inula.render(<App />, container, () => LogUtils.log('App callback effect'));
+    expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']);
+    expect(container.textContent).toEqual('Num: 0');
+    act(() => {
+      setNum(2);
+    });
+
+    // 虽然执行了setNum(2)，但执行到setNum(1)，所以最终num为1
+    expect(LogUtils.getAndClear()).toEqual(['App effect', 'Num: 1']);
+
+    expect(container.textContent).toEqual('Num: 1');
+  });
+
+  it('useEffect与memo一起使用(1', () => {
+    let setNum;
+    const App = memo(() => {
+      const [num, _setNum] = useState(0);
+      setNum = _setNum;
+      useEffect(() => {
+        LogUtils.log(`num effect [${num}]`);
+        return () => {
+          LogUtils.log(`num effect destroy ${num}`);
+        };
+      });
+      return <Text text={num} />;
+    });
+    act(() => {
+      Inula.render(<App />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual([0, 'callback effect']);
+      expect(container.textContent).toEqual('0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    // 不会重新渲染
+    act(() => {
+      Inula.render(<App />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect']);
+    expect(container.textContent).toEqual('0');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    // 会重新渲染
+    act(() => {
+      setNum(1);
+    });
+    expect(LogUtils.getAndClear()).toEqual([1, 'num effect destroy 0', 'num effect [1]']);
+    expect(container.textContent).toEqual('1');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']);
+    expect(container.textContent).toEqual('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('useEffect与memo一起使用(2', () => {
+    const compare = (prevProps, nextProps) => prevProps.num === nextProps.num;
+    const App = memo(props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log(`num effect destroy ${props.num}`);
+        };
+      });
+      return <Text text={props.num} />;
+    }, compare);
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual([0, 'callback effect']);
+      expect(container.textContent).toEqual('0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    // 不会重新渲染
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect']);
+    expect(container.textContent).toEqual('0');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    // 会重新渲染
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      1,
+      'callback effect',
+      // 执行异步，先清除旧的，再执行新的
+      'num effect destroy 0',
+      'num effect [1]',
+    ]);
+    expect(container.textContent).toEqual('1');
+    expect(LogUtils.getAndClear()).toEqual([]);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']);
+    expect(container.textContent).toEqual('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('useEffect处理错误', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log('throw Error');
+        throw new Error('mistake');
+        // eslint-disable-next-line no-unreachable
+        LogUtils.log(`Mount with [${props.num}]`);
+        return () => {
+          LogUtils.log(`Unmount with [${props.num}]`);
+        };
+      });
+      return <Text text={'Number: ' + props.num} />;
+    };
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('App callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'App callback effect']);
+      expect(container.textContent).toEqual('Number: 0');
+    });
+    // 处理错误，不会向下执行LogUtils.log(`Mount with [${props.num}]`);
+    expect(LogUtils.getAndClear()).toEqual(['throw Error']);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('App callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      'App callback effect',
+      // 不会处理卸载部分 LogUtils.log(`Unmount with [${props.num}]`);
+    ]);
+    expect(container.textContent).toEqual('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('卸载useEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log(`num effect destroy ${props.num}`);
+        };
+      }, []);
+      if (props.num < 0) {
+        useEffect(() => {
+          LogUtils.log(`New num effect [${props.num}]`);
+          return () => {
+            LogUtils.log(`New num effect destroy ${props.num}`);
+          };
+        }, []);
+      }
+      return <Text text={`Number: ${props.num}`} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('num effect'));
+      expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
+      expect(container.textContent).toBe('Number: 0');
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('num effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect', 'num effect destroy 0']);
+    expect(container.textContent).toBe('');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('同步刷新不会导致effect执行', () => {
+    let setNum;
+    const App = () => {
+      const [num, _setNum] = useState(0);
+      setNum = _setNum;
+      useEffect(() => {
+        LogUtils.log(`num effect [${num}]`);
+        _setNum(1);
+      }, []);
+      return <Text text={`Number: ${num}`} />;
+    };
+
+    Inula.render(<App />, container, () => LogUtils.log('num effect'));
+    expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
+    expect(container.textContent).toBe('Number: 0');
+
+    act(() => {
+      // 模拟同步刷新
+      (function () {
+        setNum(2);
+      })();
+    });
+    expect(LogUtils.getAndClear()).toEqual(['num effect [0]', 'Number: 1']);
+    expect(container.textContent).toBe('Number: 1');
+    expect(LogUtils.getAndClear()).toEqual([]);
+  });
+
+  it('当组件的更新方法在卸载函数中，组件更新不会告警', () => {
+    const App = () => {
+      LogUtils.log('useEffect');
+      const [num, setNum] = useState(0);
+      useEffect(() => {
+        LogUtils.log('effect');
+        return () => {
+          setNum(1);
+          LogUtils.log('effect destroy');
+        };
+      }, []);
+      return num;
+    };
+
+    act(() => {
+      Inula.render(<App />, container, () => LogUtils.log('num effect'));
+      expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['effect']);
+
+    act(() => {
+      Inula.render(null, container);
+    });
+    // 不会处理setNum(1)
+    expect(LogUtils.getAndClear()).toEqual(['effect destroy']);
+  });
+
+  it('当组件的更新方法在卸载函数中，组件的子组件更新不会告警', () => {
+    const App = () => {
+      LogUtils.log('App');
+      const appRef = Inula.createRef(null);
+      useEffect(() => {
+        LogUtils.log('App effect');
+        return () => {
+          appRef.current(1);
+          LogUtils.log('App effect destroy');
+        };
+      }, []);
+      return <AppChild ref={appRef} />;
+    };
+
+    let AppChild = (props, ref) => {
+      LogUtils.log('AppChild');
+      const [num, setNum] = useState(0);
+      useEffect(() => {
+        LogUtils.log('Child effect');
+        ref.current = setNum;
+      }, []);
+      return num;
+    };
+    AppChild = forwardRef(AppChild);
+
+    act(() => {
+      Inula.render(<App />, container, () => LogUtils.log('num effect'));
+      expect(LogUtils.getAndClear()).toEqual(['App', 'AppChild', 'num effect']);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['Child effect', 'App effect']);
+
+    act(() => {
+      Inula.render(null, container);
+    });
+    // 销毁时执行appRef.current(1)不会报错
+    expect(LogUtils.getAndClear()).toEqual(['App effect destroy']);
+  });
+
+  it('当组件的更新方法在卸载函数中，组件的父组件更新不会告警', () => {
+    const App = () => {
+      LogUtils.log('App');
+      const [num, setNum] = useState(0);
+      return <AppChild num={num} setNum={setNum} />;
+    };
+
+    let AppChild = props => {
+      LogUtils.log('AppChild');
+      useEffect(() => {
+        LogUtils.log('Child effect');
+        return () => {
+          LogUtils.log('Child effect destroy');
+          props.setNum(1);
+        };
+      }, []);
+      return props.num;
+    };
+
+    act(() => {
+      Inula.render(<App />, container, () => LogUtils.log('num effect'));
+      expect(LogUtils.getAndClear()).toEqual(['App', 'AppChild', 'num effect']);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['Child effect']);
+
+    act(() => {
+      Inula.render(null, container);
+    });
+    // 销毁时执行 props.setNum(1);不会报错
+    expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js
new file mode 100644
index 00000000..3b80c679
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js
@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { Text } from '../../jest/commonComponents';
+import { getLogUtils } from '../../jest/testUtils';
+
+describe('useImperativeHandle Hook Test', () => {
+  const { useState, useImperativeHandle, forwardRef, act } = Inula;
+  const { unmountComponentAtNode } = Inula;
+  const LogUtils = getLogUtils();
+  it('测试useImperativeHandle', () => {
+    let App = (props, ref) => {
+      const [num, setNum] = useState(0);
+      useImperativeHandle(ref, () => ({ num, setNum }), []);
+      return <p>{num}</p>;
+    };
+    let App1 = (props, ref) => {
+      const [num1, setNum1] = useState(0);
+      useImperativeHandle(ref, () => ({ num1, setNum1 }), [num1]);
+      return <p>{num1}</p>;
+    };
+
+    App = forwardRef(App);
+    App1 = forwardRef(App1);
+    const counter = Inula.createRef(null);
+    const counter1 = Inula.createRef(null);
+    Inula.render(<App ref={counter} />, container);
+    expect(counter.current.num).toBe(0);
+    act(() => {
+      counter.current.setNum(1);
+    });
+    // useImperativeHandle的dep为[],所以不会变
+    expect(counter.current.num).toBe(0);
+    // 清空container
+    unmountComponentAtNode(container);
+
+    Inula.render(<App1 ref={counter1} />, container);
+    expect(counter1.current.num1).toBe(0);
+    act(() => {
+      counter1.current.setNum1(1);
+    });
+    // useImperativeHandle的dep为[num1],所以会变
+    expect(counter1.current.num1).toBe(1);
+  });
+
+  it('useImperativeHandle没有配置dep时自动更新', () => {
+    let App = (props, ref) => {
+      const [num, setNum] = useState(0);
+      useImperativeHandle(ref, () => ({ num, setNum }));
+      return <Text text={num} />;
+    };
+    let App1 = (props, ref) => {
+      const [num1, setNum1] = useState(0);
+      useImperativeHandle(ref, () => ({ num1, setNum1 }), []);
+      return <Text text={num1} />;
+    };
+
+    App = forwardRef(App);
+    App1 = forwardRef(App1);
+    const counter = Inula.createRef(null);
+    const counter1 = Inula.createRef(null);
+    Inula.render(<App ref={counter} />, container);
+    expect(LogUtils.getAndClear()).toEqual([0]);
+    expect(counter.current.num).toBe(0);
+    act(() => {
+      counter.current.setNum(1);
+    });
+    expect(LogUtils.getAndClear()).toEqual([1]);
+    // useImperativeHandle没有配置的dep,所以会自动更新
+    expect(counter.current.num).toBe(1);
+    // 清空container
+    unmountComponentAtNode(container);
+
+    Inula.render(<App1 ref={counter1} />, container);
+    expect(LogUtils.getAndClear()).toEqual([0]);
+    expect(counter1.current.num1).toBe(0);
+    act(() => {
+      counter1.current.setNum1(1);
+    });
+    expect(LogUtils.getAndClear()).toEqual([1]);
+    // useImperativeHandle的dep为[],所以不会变
+    expect(counter1.current.num1).toBe(0);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js
new file mode 100644
index 00000000..00a52813
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js
@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { getLogUtils } from '../../jest/testUtils';
+import { Text } from '../../jest/commonComponents';
+
+describe('useLayoutEffect Hook Test', () => {
+  const { useState, useEffect, useLayoutEffect, act } = Inula;
+  const LogUtils = getLogUtils();
+  it('简单使用useLayoutEffect', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      useLayoutEffect(() => {
+        document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
+      });
+      return (
+        <>
+          <p style={{ display: 'block' }} id="p">
+            {num}
+          </p>
+          <button onClick={() => setNum(num + 1)} />
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(document.getElementById('p').style.display).toBe('none');
+    container.querySelector('button').click();
+    expect(container.querySelector('p').style.display).toBe('inline');
+  });
+
+  it('useLayoutEffect的触发时序', () => {
+    const App = props => {
+      useLayoutEffect(() => {
+        LogUtils.log('LayoutEffect');
+      });
+      return <Text text={props.num} />;
+    };
+    Inula.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
+    expect(LogUtils.getAndClear()).toEqual([
+      1,
+      // 同步在渲染之后
+      'LayoutEffect',
+      'Sync effect',
+    ]);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    // 更新
+    Inula.render(<App num={2} />, container, () => LogUtils.log('Sync effect'));
+    expect(LogUtils.getAndClear()).toEqual([2, 'LayoutEffect', 'Sync effect']);
+    expect(container.querySelector('p').innerHTML).toBe('2');
+  });
+
+  it('创建，销毁useLayoutEffect', () => {
+    const App = props => {
+      useEffect(() => {
+        LogUtils.log(`num effect [${props.num}]`);
+        return () => {
+          LogUtils.log('num effect destroy');
+        };
+      }, [props.num]);
+      useLayoutEffect(() => {
+        LogUtils.log(`num Layouteffect [${props.num}]`);
+        return () => {
+          LogUtils.log(`num [${props.num}] Layouteffect destroy`);
+        };
+      }, [props.num]);
+      return <Text text={'num: ' + props.num} />;
+    };
+
+    act(() => {
+      Inula.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'num Layouteffect [0]', 'callback effect']);
+      expect(container.textContent).toBe('num: 0');
+    });
+
+    // 更新
+    act(() => {
+      Inula.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      // 异步effect
+      'num effect [0]',
+      'num: 1',
+      // 旧Layouteffect销毁
+      'num [0] Layouteffect destroy',
+      // 新Layouteffect建立
+      'num Layouteffect [1]',
+      'callback effect',
+      // 异步旧的effect销毁
+      'num effect destroy',
+      // 异步新的effect建立
+      'num effect [1]',
+    ]);
+
+    act(() => {
+      Inula.render(null, container, () => LogUtils.log('callback effect'));
+    });
+    expect(LogUtils.getAndClear()).toEqual([
+      // 同步Layouteffect销毁
+      'num [1] Layouteffect destroy',
+      'callback effect',
+      // 最后执行异步effect销毁
+      'num effect destroy',
+    ]);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js
new file mode 100644
index 00000000..460efa9b
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js
@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { getLogUtils } from '../../jest/testUtils';
+import { Text } from '../../jest/commonComponents';
+
+describe('useMemo Hook Test', () => {
+  const { useMemo, useState } = Inula;
+  const LogUtils = getLogUtils();
+
+  it('测试useMemo', () => {
+    let setMemo;
+    const App = () => {
+      const [num, setNum] = useState(0);
+      const [memoDependent, _setMemo] = useState('App');
+      setMemo = _setMemo;
+      const text = useMemo(() => {
+        setNum(num + 1);
+        return memoDependent;
+      }, [memoDependent]);
+      return (
+        <>
+          <p>{text}</p>
+          <p id="p">{num}</p>
+        </>
+      );
+    };
+    Inula.render(<App words="App" />, container);
+    expect(container.querySelector('p').innerHTML).toBe('App');
+    expect(container.querySelector('#p').innerHTML).toBe('1');
+    // 修改useMemo的依赖项，num会加一，text会改变。
+    setMemo('Apps');
+    expect(container.querySelector('p').innerHTML).toBe('Apps');
+    expect(container.querySelector('#p').innerHTML).toBe('2');
+    // useMemo的依赖项不变，num不会加一，text不会改变。
+    setMemo('Apps');
+    expect(container.querySelector('p').innerHTML).toBe('Apps');
+    expect(container.querySelector('#p').innerHTML).toBe('2');
+    // 修改useMemo的依赖项，num会加一，text会改变。
+    setMemo('App');
+    expect(container.querySelector('p').innerHTML).toBe('App');
+    expect(container.querySelector('#p').innerHTML).toBe('3');
+  });
+
+  it('触发useMemo', () => {
+    const App = props => {
+      const num = useMemo(() => {
+        LogUtils.log(props._num);
+        return props._num + 1;
+      }, [props._num]);
+      return <Text text={num} />;
+    };
+    Inula.render(<App _num={0} />, container);
+    expect(LogUtils.getAndClear()).toEqual([0, 1]);
+    expect(container.textContent).toBe('1');
+
+    Inula.render(<App _num={1} />, container);
+    expect(LogUtils.getAndClear()).toEqual([1, 2]);
+    expect(container.textContent).toBe('2');
+
+    Inula.render(<App _num={1} />, container);
+    // 不会触发useMemo
+    expect(LogUtils.getAndClear()).toEqual([2]);
+    expect(container.textContent).toBe('2');
+
+    Inula.render(<App _num={2} />, container);
+    expect(LogUtils.getAndClear()).toEqual([2, 3]);
+    expect(container.textContent).toBe('3');
+  });
+
+  it('输入不变，重新渲染也会触发useMemo', () => {
+    const App = props => {
+      const num = useMemo(props._num);
+      return <Text text={num} />;
+    };
+
+    const num1 = () => {
+      LogUtils.log('num 1');
+      return 1;
+    };
+
+    const num2 = () => {
+      LogUtils.log('num 2');
+      return 2;
+    };
+
+    Inula.render(<App _num={num1} />, container);
+    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
+
+    Inula.render(<App _num={num1} />, container);
+    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
+
+    Inula.render(<App _num={num1} />, container);
+    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
+
+    Inula.render(<App _num={num2} />, container);
+    expect(LogUtils.getAndClear()).toEqual(['num 2', 2]);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js
new file mode 100644
index 00000000..e49842bd
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js
@@ -0,0 +1,104 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+
+describe('useReducer Hook Test', () => {
+  const { useReducer } = Inula;
+
+  it('简单使用useReducer', () => {
+    const intlCar = { logo: '', price: 0 };
+    let dispatch;
+    const App = () => {
+      const carReducer = (state, action) => {
+        switch (action.logo) {
+          case 'ford':
+            return {
+              ...intlCar,
+              logo: 'ford',
+              price: 76,
+            };
+          case 'bmw':
+            return {
+              ...intlCar,
+              logo: 'bmw',
+              price: 100,
+            };
+          case 'benz':
+            return {
+              ...intlCar,
+              logo: 'benz',
+              price: 80,
+            };
+          default:
+            return {
+              ...intlCar,
+              logo: 'audi',
+              price: 88,
+            };
+        }
+      };
+      const [car, carDispatch] = useReducer(carReducer, intlCar);
+      dispatch = carDispatch;
+      return (
+        <div>
+          <p>{car.logo}</p>
+          <p id={'senP'}>{car.price}</p>
+        </div>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('');
+    expect(container.querySelector('#senP').innerHTML).toBe('0');
+    // 触发bmw
+    dispatch({ logo: 'bmw' });
+    expect(container.querySelector('p').innerHTML).toBe('bmw');
+    expect(container.querySelector('#senP').innerHTML).toBe('100');
+    // 触发carReducer里的switch的default项
+    dispatch({ logo: 'wrong logo' });
+    expect(container.querySelector('p').innerHTML).toBe('audi');
+    expect(container.querySelector('#senP').innerHTML).toBe('88');
+  });
+
+  it('dispatch只触发一次', () => {
+    let nextId = 1;
+    const reducer = () => {
+      return { data: nextId++ };
+    };
+    const btnRef = Inula.createRef();
+    const Main = () => {
+      const [{ data }, dispatch] = useReducer(reducer, { data: 0 });
+      const dispatchLogging = () => {
+        console.log('dispatch is called once');
+        dispatch();
+      };
+
+      return (
+        <div>
+          <button ref={btnRef} onClick={() => dispatchLogging()}>
+            increment
+          </button>
+          <div>{data}</div>
+        </div>
+      );
+    };
+
+    Inula.render(<Main />, container);
+    Inula.act(() => {
+      btnRef.current.click();
+    });
+    expect(nextId).toBe(2);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js
new file mode 100644
index 00000000..08c6ad69
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { getLogUtils } from '../../jest/testUtils';
+import { Text } from '../../jest/commonComponents';
+
+describe('useRef Hook Test', () => {
+  const { useState, useRef } = Inula;
+  const LogUtils = getLogUtils();
+
+  it('测试useRef', () => {
+    const App = () => {
+      const [num, setNum] = useState(1);
+      const ref = useRef();
+      if (!ref.current) {
+        ref.current = num;
+      }
+      return (
+        <>
+          <p>{num}</p>
+          <p id="sp">{ref.current}</p>
+          <button onClick={() => setNum(num + 1)} />
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    expect(container.querySelector('#sp').innerHTML).toBe('1');
+    // 点击按钮触发num加1,ref不变
+    container.querySelector('button').click();
+    expect(container.querySelector('p').innerHTML).toBe('2');
+    expect(container.querySelector('#sp').innerHTML).toBe('1');
+  });
+
+  it('更新current值时不会re-render', () => {
+    const App = () => {
+      const ref = useRef(1);
+      return (
+        <>
+          <button
+            onClick={() => {
+              ref.current += 1;
+            }}
+          >
+            button
+          </button>
+          <Text text={ref.current} />;
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(LogUtils.getAndClear()).toEqual([1]);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    // 点击按钮触发ref.current加1
+    container.querySelector('button').click();
+    // ref.current改变不会触发重新渲染
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseState.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseState.test.js
new file mode 100644
index 00000000..2602b711
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/HookTest/UseState.test.js
@@ -0,0 +1,178 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { getLogUtils } from '../../jest/testUtils';
+import { Text } from '../../jest/commonComponents';
+
+describe('useState Hook Test', () => {
+  const { useState, forwardRef, useImperativeHandle, memo, act } = Inula;
+  const LogUtils = getLogUtils();
+
+  it('简单使用useState', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      return (
+        <>
+          <p>{num}</p>
+          <button onClick={() => setNum(num + 1)} />
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    // 点击按钮触发num加1
+    container.querySelector('button').click();
+    expect(container.querySelector('p').innerHTML).toBe('1');
+  });
+
+  it('多个useState', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      const [count, setCount] = useState(0);
+      return (
+        <p
+          onClick={() => {
+            setNum(num + 1);
+            setCount(count + 2);
+          }}
+        >
+          {num}
+          {count}
+        </p>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('00');
+    container.querySelector('p').click();
+    expect(container.querySelector('p').innerHTML).toBe('12');
+    container.querySelector('p').click();
+    expect(container.querySelector('p').innerHTML).toBe('24');
+  });
+
+  it('同一个useState声明的状态会被覆盖处理', () => {
+    const App = () => {
+      const [num, setNum] = useState(0);
+      return (
+        <p
+          onClick={() => {
+            setNum(num + 1);
+            setNum(num + 2);
+          }}
+        >
+          {num}
+        </p>
+      );
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    container.querySelector('p').click();
+    expect(container.querySelector('p').innerHTML).toBe('2');
+    container.querySelector('p').click();
+    expect(container.querySelector('p').innerHTML).toBe('4');
+  });
+
+  it('useState设置相同的值时不会重新渲染', () => {
+    let setNum;
+    const App = () => {
+      const [num, _setNum] = useState(0);
+      setNum = _setNum;
+      return <Text text={num} />;
+    };
+    Inula.render(<App />, container);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    expect(LogUtils.getAndClear()).toEqual([0]);
+    // useState修改state 时，设置相同的值，函数组件不会重新渲染
+    setNum(0);
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+  });
+
+  it('useState的惰性初始化', () => {
+    const App = forwardRef((props, ref) => {
+      const [num, setNum] = useState(() => {
+        LogUtils.log(props.initNum);
+        return props.initNum;
+      });
+      useImperativeHandle(ref, () => ({ setNum }));
+      return <p>{num}</p>;
+    });
+    const ref = Inula.createRef(null);
+    Inula.render(<App initNum={1} ref={ref} />, container);
+    expect(LogUtils.getAndClear()).toEqual([1]);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+    // 设置num为3
+    ref.current.setNum(3);
+    // 初始化函数只在初始渲染时被调用,所以Scheduler里的dataArray清空后没有新增。
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('p').innerHTML).toBe('3');
+  });
+
+  it('useState与memo一起使用', () => {
+    let setNum;
+    const App = memo(() => {
+      const [num, _setNum] = useState(0);
+      setNum = _setNum;
+      return <Text text={num} />;
+    });
+    Inula.render(<App />, container);
+    expect(LogUtils.getAndClear()).toEqual([0]);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    // 不会重新渲染
+    Inula.render(<App />, container);
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('p').innerHTML).toBe('0');
+    // 会重新渲染
+    setNum(1);
+    expect(LogUtils.getAndClear()).toEqual([1]);
+    expect(container.querySelector('p').innerHTML).toBe('1');
+  });
+
+  it('卸载useState', () => {
+    let setNum;
+    let setCount;
+
+    const App = props => {
+      const [num, setNum_1] = useState(0);
+      setNum = setNum_1;
+
+      let count;
+      if (props.hasCount) {
+        const [count_1, setCount_1] = useState(0);
+        count = count_1;
+        setCount = setCount_1;
+      } else {
+        count = 'null';
+      }
+
+      return <Text text={`Number: ${num}, Count: ${count}`} />;
+    };
+
+    Inula.render(<App hasCount={true} />, container);
+    expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']);
+    expect(container.textContent).toBe('Number: 0, Count: 0');
+    act(() => {
+      setNum(1);
+      setCount(2);
+    });
+    expect(LogUtils.getAndClear()).toEqual(['Number: 1, Count: 2']);
+    expect(container.textContent).toBe('Number: 1, Count: 2');
+
+    jest.spyOn(console, 'error').mockImplementation();
+    expect(() => {
+      Inula.render(<App hasCount={false} />, container);
+    }).toThrow('Hooks are less than expected, please check whether the hook is written in the condition.');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/JsxElement.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/JsxElement.test.js
new file mode 100644
index 00000000..abf062c7
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/JsxElement.test.js
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('JSX Element test', () => {
+  it('symbol attribute prevent cloneDeep unlimited loop', function () {
+    function cloneDeep(obj) {
+      const result = {};
+      Object.keys(obj).forEach(key => {
+        if (obj[key] && typeof obj[key] === 'object') {
+          result[key] = cloneDeep(obj[key]);
+        } else {
+          result[key] = obj[key];
+        }
+      });
+      return result;
+    }
+    class Demo extends Inula.Component {
+      render() {
+        return <div>hello</div>;
+      }
+    }
+
+    const ele = Inula.createElement(Demo);
+    const copy = cloneDeep(ele);
+    expect(copy.vtype).toEqual(ele.vtype);
+    expect(Object.getOwnPropertySymbols(copy).length).toEqual(0);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/LazyComponent.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/LazyComponent.test.js
new file mode 100644
index 00000000..f9f340e0
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/LazyComponent.test.js
@@ -0,0 +1,223 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('LazyComponent Test', () => {
+  const LogUtils = getLogUtils();
+  const mockImport = jest.fn(async component => {
+    return { default: component };
+  });
+
+  it('Inula.lazy()', async () => {
+    class LazyComponent extends Inula.Component {
+      static defaultProps = { language: 'Java' };
+
+      render() {
+        const text = `${this.props.greeting}: ${this.props.language}`;
+        return <span>{text}</span>;
+      }
+    }
+
+    const Lazy = Inula.lazy(() => mockImport(LazyComponent));
+
+    Inula.render(
+      <Inula.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy greeting="Hi" />
+      </Inula.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Loading...']);
+    expect(container.textContent).toBe('Loading...');
+    expect(container.querySelector('span')).toBe(null);
+
+    await Promise.resolve();
+    Inula.render(
+      <Inula.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy greeting="Goodbye" />
+      </Inula.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('span').innerHTML).toBe('Goodbye: Java');
+  });
+
+  it('同步解析', async () => {
+    const LazyApp = Inula.lazy(() => ({
+      then(cb) {
+        cb({ default: Text });
+      },
+    }));
+
+    Inula.render(
+      <Inula.Suspense fallback={<div>Loading...</div>}>
+        <LazyApp text="Lazy" />
+      </Inula.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Lazy']);
+    expect(container.textContent).toBe('Lazy');
+  });
+
+  it('异常捕获边界', async () => {
+    class ErrorBoundary extends Inula.Component {
+      state = {};
+      static getDerivedStateFromError(error) {
+        return { message: error.message };
+      }
+      render() {
+        return this.state.message ? <h2>Error: {this.state.message}</h2> : this.props.children;
+      }
+    }
+
+    const LazyComponent = () => {
+      const [num, setNum] = Inula.useState(0);
+      if (num === 2) {
+        throw new Error('num is 2');
+      } else {
+        return (
+          <>
+            <p id="p">{num}</p>
+            <button onClick={() => setNum(num + 1)} />
+          </>
+        );
+      }
+    };
+
+    const LazyApp = Inula.lazy(() => mockImport(LazyComponent));
+
+    Inula.render(
+      <ErrorBoundary>
+        <Inula.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp />
+        </Inula.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Inula.render(
+      <ErrorBoundary>
+        <Inula.Suspense fallback={<Text text="Loading..." />}>
+          <LazyApp />
+        </Inula.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('0');
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('1');
+    jest.spyOn(console, 'error').mockImplementation();
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('Error: num is 2');
+  });
+
+  it('componentDidCatch捕获异常', async () => {
+    class ErrorBoundary extends Inula.Component {
+      state = {
+        catchError: false,
+        error: null,
+        componentStack: null,
+      };
+      componentDidCatch(error, info) {
+        if (error) {
+          this.setState({
+            catchError: true,
+            error,
+            componentStack: info.componentStack,
+          });
+        }
+      }
+      render() {
+        return this.state.catchError ? <h2>Error: {this.state.error.message}</h2> : this.props.children;
+      }
+    }
+
+    const LazyComponent = () => {
+      const [num, setNum] = Inula.useState(0);
+      if (num === 2) {
+        throw new Error('num is 2');
+      } else {
+        return (
+          <>
+            <p id="p">{num}</p>
+            <button onClick={() => setNum(num + 1)} />
+          </>
+        );
+      }
+    };
+
+    const LazyApp = Inula.lazy(() => mockImport(LazyComponent));
+
+    Inula.render(
+      <ErrorBoundary>
+        <Inula.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp />
+        </Inula.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Inula.render(
+      <ErrorBoundary>
+        <Inula.Suspense fallback={<Text text="Loading..." />}>
+          <LazyApp />
+        </Inula.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+
+    expect(container.textContent).toBe('0');
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('1');
+    jest.spyOn(console, 'error').mockImplementation();
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('Error: num is 2');
+  });
+
+  it('#24 配合memo', async () => {
+    const fnComp = () => {
+      return <h1>inula</h1>;
+    };
+    const LazyApp = Inula.lazy(() => ({
+      then(cb) {
+        cb({ default: Inula.memo(() => fnComp, false) });
+      },
+    }));
+    expect(() => {
+      Inula.render(
+        <Inula.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp text="Lazy" />
+        </Inula.Suspense>,
+        container
+      );
+
+      Inula.render(
+        <Inula.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp text="Lazy" />
+        </Inula.Suspense>,
+        container
+      );
+    }).not.toThrow();
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/LifeCycle.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/LifeCycle.test.js
new file mode 100644
index 00000000..9cda4374
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/LifeCycle.test.js
@@ -0,0 +1,467 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('LifeCycle Test', () => {
+  const LogUtils = getLogUtils();
+  describe('LifeCycle function', () => {
+    it('不能在componentWillMount里setState', () => {
+      class App extends Inula.Component {
+        state = {};
+
+        UNSAFE_componentWillMount() {
+          this.setState = {
+            num: 1,
+          };
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+
+      const realNode = Inula.render(<App />, container);
+      // 不能在componentWillMount里setState
+      expect(realNode.textContent).toBe(undefined);
+    });
+
+    it('componentDidMount里调用setState()将触发额外渲染', () => {
+      class ChildApp extends Inula.Component {
+        constructor(props) {
+          super(props);
+        }
+
+        componentDidMount() {
+          LogUtils.log(this.props.isShow);
+        }
+
+        render() {
+          return <p>{this.props.isShow}</p>;
+        }
+      }
+
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          LogUtils.log('constructor');
+          this.state = { shouldShowChild: false };
+        }
+
+        componentDidMount() {
+          LogUtils.log('componentDidMount');
+          this.setState({ shouldShowChild: true });
+        }
+
+        render() {
+          return <div>{this.state.shouldShowChild ? <ChildApp isShow={this.state.shouldShowChild} /> : <div />}</div>;
+        }
+      }
+
+      const realNode = Inula.render(<App />, container);
+      // 确实触发了额外渲染
+      expect(LogUtils.getAndClear()).toEqual(['constructor', 'componentDidMount', true]);
+      // 可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前
+      expect(container.querySelector('p').innerHTML).toBe('');
+      // 在 componentDidMount() 里可以更新state
+      expect(realNode.state).toStrictEqual({ shouldShowChild: true });
+    });
+
+    it('调用 this.setState() 通常不会触发 UNSAFE_componentWillReceiveProps()', () => {
+      class App extends Inula.Component {
+        state = {};
+
+        update = () => {
+          this.setState({ num: 4 });
+        };
+
+        UNSAFE_componentWillReceiveProps() {
+          LogUtils.log('componentWillReceiveProps');
+          this.setState = {
+            num: 1,
+          };
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+
+      const realNode = Inula.render(<App />, container);
+      expect(realNode.textContent).toBe(undefined);
+      realNode.update();
+      expect(LogUtils.getAndClear()).toEqual([]);
+    });
+
+    it('不能在componentWillReceiveProps里setState', () => {
+      class ChildApp extends Inula.Component {
+        state = {};
+
+        UNSAFE_componentWillReceiveProps() {
+          this.state = { text: 'text' };
+        }
+
+        render() {
+          LogUtils.log(this.state.text);
+          return <div>{this.state.text}</div>;
+        }
+      }
+      class App extends Inula.Component {
+        state = {};
+
+        update = () => {
+          this.setState({ num: 4 });
+        };
+
+        render() {
+          return <ChildApp num={this.state.num} />;
+        }
+      }
+
+      const realNode = Inula.render(<App />, container);
+      expect(realNode.textContent).toBe(undefined);
+      realNode.update();
+      expect(LogUtils.getAndClear()).toEqual([undefined, 'text']);
+      // 不能在componentWillMount里setState
+      expect(realNode.textContent).toBe(undefined);
+    });
+
+    it('shouldComponentUpdate与getDerivedStateFromProps', () => {
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            num: props.num,
+          };
+        }
+        static getDerivedStateFromProps(nextProps, prevState) {
+          if (nextProps.num === prevState.num) {
+            return null;
+          }
+          return { num: nextProps.num };
+        }
+
+        shouldComponentUpdate(nextProps, nextState) {
+          LogUtils.log('shouldComponentUpdate');
+          return nextState.num !== this.state.num;
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+
+      Inula.render(<App num={1} />, container);
+      // 初次渲染不会调用shouldComponentUpdate
+      expect(LogUtils.getAndClear()).toEqual([]);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={1} />, container);
+      // getDerivedStateFromProps判断state没有变化时，会调用shouldComponentUpdate
+      expect(LogUtils.getAndClear()).toEqual(['shouldComponentUpdate']);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={2} />, container);
+      // getDerivedStateFromProps判断state变化时，会调用shouldComponentUpdate
+      expect(LogUtils.getAndClear()).toEqual(['shouldComponentUpdate']);
+      expect(container.querySelector('p').innerHTML).toBe('2');
+    });
+
+    it('如果shouldComponentUpdate()返回值为false,则不会调用componentDidUpdate()', () => {
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            num: props.num,
+          };
+        }
+        static getDerivedStateFromProps(nextProps, prevState) {
+          if (nextProps.num === prevState.num) {
+            return null;
+          }
+          return { num: nextProps.num };
+        }
+
+        shouldComponentUpdate(nextProps, nextState) {
+          return nextState.num !== this.state.num;
+        }
+
+        componentDidUpdate() {
+          LogUtils.log('componentDidUpdate');
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+
+      Inula.render(<App num={1} />, container);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={1} />, container);
+      // 不会调用componentDidUpdate()
+      expect(LogUtils.getAndClear()).toEqual([]);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={2} />, container);
+      // 调用componentDidUpdate()
+      expect(LogUtils.getAndClear()).toEqual(['componentDidUpdate']);
+      expect(container.querySelector('p').innerHTML).toBe('2');
+    });
+
+    it('getSnapshotBeforeUpdate()的返回值会作为componentDidUpdate()的第三个参数', () => {
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            num: 0,
+          };
+        }
+        static getDerivedStateFromProps(nextProps, prevState) {
+          if (nextProps.num === prevState.num) {
+            return null;
+          }
+          return { num: nextProps.num };
+        }
+        getSnapshotBeforeUpdate(prevProps, prevState) {
+          LogUtils.log(`getSnapshotBeforeUpdate prevProps:${prevProps.num} prevState:${prevState.num}`);
+          return 'Snapshot';
+        }
+        componentDidUpdate(prevProps, prevState, snapshot) {
+          LogUtils.log(`componentDidUpdate prevProps:${prevProps.num} prevState:${prevState.num} snapshot:${snapshot}`);
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+      Inula.render(<App />, container);
+      expect(LogUtils.getAndClear()).toEqual([]);
+      expect(container.querySelector('p').innerHTML).toBe('');
+
+      Inula.render(<App num={1} />, container);
+      // Snapshot作为componentDidUpdate()的第三个参数
+      expect(LogUtils.getAndClear()).toEqual([
+        'getSnapshotBeforeUpdate prevProps:undefined prevState:undefined',
+        'componentDidUpdate prevProps:undefined prevState:undefined snapshot:Snapshot',
+      ]);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={1} />, container);
+      expect(LogUtils.getAndClear()).toEqual([
+        'getSnapshotBeforeUpdate prevProps:1 prevState:1',
+        'componentDidUpdate prevProps:1 prevState:1 snapshot:Snapshot',
+      ]);
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      Inula.render(<App num={2} />, container);
+      expect(LogUtils.getAndClear()).toEqual([
+        'getSnapshotBeforeUpdate prevProps:1 prevState:1',
+        'componentDidUpdate prevProps:1 prevState:1 snapshot:Snapshot',
+      ]);
+      expect(container.querySelector('p').innerHTML).toBe('2');
+    });
+
+    it('无论什么原因触发了渲染,只要有渲染就会触发getDerivedStateFromProps', () => {
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            num: 0,
+          };
+        }
+        static getDerivedStateFromProps(nextProps, prevState) {
+          LogUtils.log(`getDerivedStateFromProps nextProps:${nextProps.num} prevState:${prevState.num}`);
+        }
+
+        render() {
+          return <p>{this.state.num}</p>;
+        }
+      }
+      let realNode = Inula.render(<App />, container);
+      realNode = Inula.render(<App num={1} />, container);
+      realNode.forceUpdate();
+      // 触发了3次渲染
+      expect(LogUtils.getAndClear()).toEqual([
+        'getDerivedStateFromProps nextProps:undefined prevState:0',
+        'getDerivedStateFromProps nextProps:1 prevState:0',
+        'getDerivedStateFromProps nextProps:1 prevState:0',
+      ]);
+    });
+  });
+
+  it('生命周期执行顺序', () => {
+    class ChildApp extends Inula.Component {
+      UNSAFE_componentWillMount() {
+        LogUtils.log('Child componentWillMount');
+      }
+      componentDidMount() {
+        LogUtils.log('Child componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        LogUtils.log('Child componentWillReceiveProps');
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        LogUtils.log('Child shouldComponentUpdates');
+        return this.props.number !== nextProps.number;
+      }
+      UNSAFE_componentWillUpdate() {
+        LogUtils.log('Child componentWillUpdate');
+      }
+      componentDidUpdate() {
+        LogUtils.log('Child componentDidUpdate');
+      }
+      componentWillUnmount() {
+        LogUtils.log('Child componentWillUnmount');
+      }
+
+      render() {
+        return <p>{this.props.number}</p>;
+      }
+    }
+
+    class App extends Inula.Component {
+      UNSAFE_componentWillMount() {
+        LogUtils.log('componentWillMount');
+      }
+      componentDidMount() {
+        LogUtils.log('componentDidMount');
+      }
+      UNSAFE_componentWillReceiveProps() {
+        LogUtils.log('componentWillReceiveProps');
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        LogUtils.log('shouldComponentUpdates');
+        return this.props.num !== nextProps.num;
+      }
+      UNSAFE_componentWillUpdate() {
+        LogUtils.log('componentWillUpdate');
+      }
+      componentDidUpdate() {
+        LogUtils.log('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        LogUtils.log('componentWillUnmount');
+      }
+
+      render() {
+        return <ChildApp number={this.props.num} />;
+      }
+    }
+
+    Inula.render(<App num={1} />, container);
+    expect(container.textContent).toBe('1');
+    expect(LogUtils.getAndClear()).toEqual([
+      'componentWillMount',
+      'Child componentWillMount',
+      'Child componentDidMount',
+      'componentDidMount',
+    ]);
+    Inula.render(<App num={2} />, container);
+    expect(container.textContent).toBe('2');
+    expect(LogUtils.getAndClear()).toEqual([
+      'componentWillReceiveProps',
+      'shouldComponentUpdates',
+      'componentWillUpdate',
+      'Child componentWillReceiveProps',
+      'Child shouldComponentUpdates',
+      'Child componentWillUpdate',
+      'Child componentDidUpdate',
+      'componentDidUpdate',
+    ]);
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(LogUtils.getAndClear()).toEqual(['componentWillUnmount', 'Child componentWillUnmount']);
+  });
+
+  it('新生命周期执行顺序', () => {
+    class ChildApp extends Inula.Component {
+      static getDerivedStateFromProps(props, state) {
+        LogUtils.log('Child getDerivedStateFromProps');
+      }
+      componentDidMount() {
+        LogUtils.log('Child componentDidMount');
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        LogUtils.log('Child shouldComponentUpdates');
+        return this.props.number !== nextProps.number;
+      }
+      componentDidUpdate() {
+        LogUtils.log('Child componentDidUpdate');
+      }
+      getSnapshotBeforeUpdate() {
+        LogUtils.log('Child getSnapshotBeforeUpdate');
+      }
+      componentWillUnmount() {
+        LogUtils.log('Child componentWillUnmount');
+      }
+
+      render() {
+        return <p>{this.props.number}</p>;
+      }
+    }
+
+    class App extends Inula.Component {
+      static getDerivedStateFromProps(props, state) {
+        LogUtils.log('getDerivedStateFromProps');
+      }
+      componentDidMount() {
+        LogUtils.log('componentDidMount');
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        LogUtils.log('shouldComponentUpdates');
+        return this.props.num !== nextProps.num;
+      }
+      getSnapshotBeforeUpdate() {
+        LogUtils.log('getSnapshotBeforeUpdate');
+      }
+      componentDidUpdate() {
+        LogUtils.log('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        LogUtils.log('componentWillUnmount');
+      }
+
+      render() {
+        return <ChildApp number={this.props.num} />;
+      }
+    }
+
+    Inula.render(<App num={1} />, container);
+    expect(container.textContent).toBe('1');
+    expect(LogUtils.getAndClear()).toEqual([
+      'getDerivedStateFromProps',
+      'Child getDerivedStateFromProps',
+      'Child componentDidMount',
+      'componentDidMount',
+    ]);
+    Inula.render(<App num={2} />, container);
+    expect(container.textContent).toBe('2');
+    expect(LogUtils.getAndClear()).toEqual([
+      'getDerivedStateFromProps',
+      'shouldComponentUpdates',
+      'Child getDerivedStateFromProps',
+      'Child shouldComponentUpdates',
+      'Child getSnapshotBeforeUpdate',
+      'getSnapshotBeforeUpdate',
+      'Child componentDidUpdate',
+      'componentDidUpdate',
+    ]);
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(LogUtils.getAndClear()).toEqual(['componentWillUnmount', 'Child componentWillUnmount']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/Memo.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/Memo.test.js
new file mode 100644
index 00000000..8d29a315
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/Memo.test.js
@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Memo Test', () => {
+  it('Memo should not make the path wrong', function () {
+    let updateApp;
+
+    function Child() {
+      const [_, update] = Inula.useState({});
+      updateApp = () => update({});
+      return <div></div>;
+    }
+    const MemoChild = Inula.memo(Child);
+
+    function App() {
+      return (
+        <div>
+          <MemoChild />
+        </div>
+      );
+    }
+    const MemoApp = Inula.memo(App);
+    Inula.render(
+      <div>
+        <MemoApp key="1" />
+      </div>,
+      container
+    );
+    Inula.render(
+      <div>
+        <span></span>
+        <MemoApp key="1" />
+      </div>,
+      container
+    );
+    expect(() => updateApp()).not.toThrow();
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/PortalComponent.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/PortalComponent.test.js
new file mode 100644
index 00000000..4c6924b9
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/PortalComponent.test.js
@@ -0,0 +1,289 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+import dispatchChangeEvent from '../utils/dispatchChangeEvent';
+
+describe('PortalComponent Test', () => {
+  const LogUtils = getLogUtils();
+
+  it('将子节点渲染到存在于父组件以外的 DOM 节点', () => {
+    const portalRoot = document.createElement('div');
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Inula.createPortal(this.props.child, this.element);
+      }
+    }
+
+    Inula.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    // <div>PortalApp</div>被渲染到了portalRoot而非container
+    expect(portalRoot.textContent).toBe('PortalApp');
+
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+  });
+
+  it('渲染多个Portal', () => {
+    const portalRoot1st = document.createElement('div');
+    const portalRoot2nd = document.createElement('div');
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot1st;
+        this.newElement = portalRoot2nd;
+      }
+
+      render() {
+        return [
+          Inula.createPortal(this.props.child, this.element),
+          Inula.createPortal(this.props.child, this.newElement),
+        ];
+      }
+    }
+
+    Inula.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    // <div>PortalApp</div>被渲染到了portalRoot而非container
+    expect(portalRoot1st.textContent).toBe('PortalApp');
+    expect(portalRoot2nd.textContent).toBe('PortalApp');
+
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot1st.textContent).toBe('');
+    expect(portalRoot2nd.textContent).toBe('');
+  });
+
+  it('渲染最近的Portal', () => {
+    const portalRoot1st = document.createElement('div');
+    const portalRoot2nd = document.createElement('div');
+    const portalRoot3rd = document.createElement('div');
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot1st;
+        this.newElement = portalRoot2nd;
+        this.element3rd = portalRoot3rd;
+      }
+
+      render() {
+        return [
+          <div>PortalApp1st</div>,
+          Inula.createPortal(
+            [<div>PortalApp4</div>, Inula.createPortal(this.props.child, this.element3rd)],
+            this.element
+          ),
+          <div>PortalApp2nd</div>,
+          Inula.createPortal(this.props.child, this.newElement),
+        ];
+      }
+    }
+
+    Inula.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('PortalApp1stPortalApp2nd');
+    // <div>PortalApp4</div>会挂载在this.element上
+    expect(portalRoot1st.textContent).toBe('PortalApp4');
+    expect(portalRoot2nd.textContent).toBe('PortalApp');
+    expect(portalRoot3rd.textContent).toBe('PortalApp');
+
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot1st.textContent).toBe('');
+    expect(portalRoot2nd.textContent).toBe('');
+  });
+
+  it('改变Portal的参数', () => {
+    const portalRoot = document.createElement('div');
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Inula.createPortal(this.props.child, this.element);
+      }
+    }
+
+    Inula.render(<PortalApp key="portal" child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('PortalApp');
+
+    Inula.render(<PortalApp key="portal" child={<div>AppPortal</div>} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('AppPortal');
+
+    Inula.render(<PortalApp key="portal" child={['por', 'tal']} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('portal');
+
+    Inula.render(<PortalApp key="portal" child={null} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+
+    Inula.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+  });
+
+  it('通过Portal进行事件冒泡', () => {
+    const portalRoot = document.createElement('div');
+    const buttonRef = Inula.createRef();
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Inula.createPortal(this.props.child, this.element);
+      }
+    }
+
+    const Child = () => {
+      return (
+        <div>
+          <button ref={buttonRef}>Click</button>
+        </div>
+      );
+    };
+
+    const App = () => {
+      const handleClick = () => {
+        LogUtils.log('bubble click event');
+      };
+
+      const handleCaptureClick = () => {
+        LogUtils.log('capture click event');
+      };
+
+      return (
+        <div onClickCapture={handleCaptureClick()} onClick={handleClick()}>
+          <PortalApp child={<Child />}></PortalApp>
+        </div>
+      );
+    };
+    Inula.render(<App />, container);
+    const event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    buttonRef.current.dispatchEvent(event);
+
+    expect(LogUtils.getAndClear()).toEqual([
+      // 从外到内先捕获再冒泡
+      'capture click event',
+      'bubble click event',
+    ]);
+  });
+
+  it('Create portal at app root should not add event listener multiple times', () => {
+    const btnRef = Inula.createRef();
+
+    class PortalApp extends Inula.Component {
+      constructor(props) {
+        super(props);
+      }
+
+      render() {
+        return Inula.createPortal(this.props.child, container);
+      }
+    }
+
+    const onClick = jest.fn();
+
+    class App extends Inula.Component {
+      constructor(props) {
+        super(props);
+      }
+
+      render() {
+        return (
+          <div>
+            <button onClick={onClick} ref={btnRef}></button>
+            <PortalApp />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App />, container);
+    btnRef.current.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('#76 Portal onChange should activate', () => {
+    class Dialog extends Inula.Component {
+      node;
+
+      constructor(props) {
+        super(props);
+        this.node = window.document.createElement('div');
+        window.document.body.appendChild(this.node);
+      }
+
+      render() {
+        return Inula.createPortal(this.props.children, this.node);
+      }
+    }
+
+    let showPortalInput;
+    const fn = jest.fn();
+    const inputRef = Inula.createRef();
+
+    function App() {
+      const Input = () => {
+        const [show, setShow] = Inula.useState(false);
+        showPortalInput = setShow;
+
+        Inula.useEffect(() => {
+          setTimeout(() => {
+            setShow(true);
+          }, 0);
+        }, []);
+
+        if (!show) {
+          return null;
+        }
+
+        return <input onChange={fn} ref={inputRef} />;
+      };
+
+      return (
+        <div>
+          <Dialog>
+            <Input />
+          </Dialog>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+    showPortalInput(true);
+    jest.advanceTimersToNextTimer();
+    dispatchChangeEvent(inputRef.current, 'test');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ComponentTest/SuspenseComponent.test.js b/packages/inula-reactive/scripts/__tests__/ComponentTest/SuspenseComponent.test.js
new file mode 100644
index 00000000..6c1469d3
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ComponentTest/SuspenseComponent.test.js
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('SuspenseComponent Test', () => {
+  const LogUtils = getLogUtils();
+  const mockImport = jest.fn(async component => {
+    return { default: component };
+  });
+
+  // var EMPTY_OBJECT = {};
+  // const mockCreateResource = jest.fn((component) => {
+  //   let result = EMPTY_OBJECT;
+  //   return () =>{
+  //     component().then(res => {
+  //       LogUtils.log(res);
+  //       result = res;
+  //     }, reason => {
+  //       LogUtils.log(reason);
+  //     });
+  //     if(result === EMPTY_OBJECT){
+  //       throw component();
+  //     }
+  //     return result;
+  //   };
+  // });
+
+  it('挂载lazy组件', async () => {
+    // 用同步的代码来实现异步操作
+    class LazyComponent extends Inula.Component {
+      render() {
+        return <Text text={this.props.num} />;
+      }
+    }
+
+    const Lazy = Inula.lazy(() => mockImport(LazyComponent));
+
+    Inula.render(
+      <Inula.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy num={5} />
+      </Inula.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Loading...']);
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Inula.render(
+      <Inula.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy num={5} />
+      </Inula.Suspense>,
+      container
+    );
+    expect(LogUtils.getAndClear()).toEqual([5]);
+    expect(container.querySelector('p').innerHTML).toBe('5');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/DomTest/Attribute.test.js b/packages/inula-reactive/scripts/__tests__/DomTest/Attribute.test.js
new file mode 100644
index 00000000..9c9b418a
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/DomTest/Attribute.test.js
@@ -0,0 +1,98 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Dom Attribute', () => {
+  it('属性值为null或undefined时，不会设置此属性', () => {
+    Inula.render(<div id="div" />, container);
+    expect(container.querySelector('div').getAttribute('id')).toBe('div');
+    Inula.render(<div id={null} />, container);
+    expect(container.querySelector('div').hasAttribute('id')).toBe(false);
+    Inula.render(<div id={undefined} />, container);
+    expect(container.querySelector('div').hasAttribute('id')).toBe(false);
+  });
+
+  it('可以设置未知的属性', () => {
+    Inula.render(<div abcd="abcd" />, container);
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('abcd');
+  });
+
+  it('未知属性的值为null或undefined时，不会设置此属性', () => {
+    Inula.render(<div abcd={null} />, container);
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+    Inula.render(<div abcd={undefined} />, container);
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+  });
+
+  it('未知属性的值为数字时，属性值会转为字符串', () => {
+    Inula.render(<div abcd={0} />, container);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+    Inula.render(<div abcd={-3} />, container);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('-3');
+    Inula.render(<div abcd={123.45} />, container);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('123.45');
+  });
+
+  it('访问节点的标准属性时可以拿到属性值，访问节点的非标准属性时会得到undefined', () => {
+    Inula.render(<div id={'div'} abcd={0} />, container);
+    expect(container.querySelector('div').id).toBe('div');
+    expect(container.querySelector('div').abcd).toBe(undefined);
+  });
+
+  it('特性方法', () => {
+    Inula.render(<div id={'div'} abcd={0} />, container);
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+    container.querySelector('div').setAttribute('abcd', 4);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('4');
+    container.querySelector('div').removeAttribute('abcd');
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+  });
+
+  it('特性大小写不敏感', () => {
+    Inula.render(<div id={'div'} abcd={0} />, container);
+    expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+    expect(container.querySelector('div').hasAttribute('ABCD')).toBe(true);
+    expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+    expect(container.querySelector('div').getAttribute('ABCD')).toBe('0');
+  });
+
+  it('使用 data- 开头的特性时，会映射到DOM的dataset属性且中划线格式会变成驼峰格式', () => {
+    Inula.render(<div />, container);
+    container.querySelector('div').setAttribute('data-first-name', 'Tom');
+    expect(container.querySelector('div').dataset.firstName).toBe('Tom');
+  });
+
+  it('style 自动加px', () => {
+    const div = Inula.render(<div style={{ width: 10, height: 20 }} />, container);
+    expect(window.getComputedStyle(div).getPropertyValue('width')).toBe('10px');
+    expect(window.getComputedStyle(div).getPropertyValue('height')).toBe('20px');
+  });
+
+  it('WebkitLineClamp和lineClamp样式不会把数字转换成字符串或者追加"px"', () => {
+    Inula.render(<div id={'div'} style={{ WebkitLineClamp: 2 }} />, container);
+    // 浏览器可以将WebkitLineClamp识别为-webkit-line-clamp,测试框架不可以
+    expect(container.querySelector('div').style.WebkitLineClamp).toBe(2);
+  });
+
+  it('空字符串做属性名', () => {
+    const emptyStringProps = { '': '' };
+    expect(() => {
+      Inula.render(<div {...emptyStringProps} />, container);
+    }).not.toThrow();
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/DomTest/DomInput.test.js b/packages/inula-reactive/scripts/__tests__/DomTest/DomInput.test.js
new file mode 100644
index 00000000..2f237b16
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/DomTest/DomInput.test.js
@@ -0,0 +1,362 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Dom Input', () => {
+  const { act } = Inula;
+  const LogUtils = getLogUtils();
+
+  describe('type checkbox', () => {
+    it('没有设置checked属性时，控制台不会报错', () => {
+      expect(() => Inula.render(<input type="checkbox" value={false} />, container)).not.toThrow();
+    });
+
+    it('checked属性为undefined或null时且没有onChange属性或没有readOnly={true}，控制台不会报错', () => {
+      expect(() => Inula.render(<input type="checkbox" checked={undefined} />, container)).not.toThrow();
+      expect(() => Inula.render(<input type="checkbox" checked={null} />, container)).not.toThrow();
+    });
+
+    it('复选框的value属性值可以改变', () => {
+      Inula.render(
+        <input
+          type="checkbox"
+          value=""
+          onChange={() => {
+            LogUtils.log('checkbox click');
+          }}
+        />,
+        container
+      );
+      Inula.render(
+        <input
+          type="checkbox"
+          value={0}
+          onChange={() => {
+            LogUtils.log('checkbox click');
+          }}
+        />,
+        container
+      );
+      expect(LogUtils.getAndClear()).toEqual([]);
+      expect(container.querySelector('input').value).toBe('0');
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+    });
+
+    it('复选框不设置value属性值时会设置value为"on"', () => {
+      Inula.render(<input type="checkbox" defaultChecked={true} />, container);
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+    });
+
+    it('测试defaultChecked与更改defaultChecked', () => {
+      Inula.render(<input type="checkbox" defaultChecked={0} />, container);
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(false);
+
+      Inula.render(<input type="checkbox" defaultChecked={1} />, container);
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(true);
+
+      Inula.render(<input type="checkbox" defaultChecked={'1'} />, container);
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(true);
+    });
+  });
+
+  describe('type text', () => {
+    it('value属性为undefined或null时且没有onChange属性或没有readOnly={true}，控制台不会报错', () => {
+      expect(() => Inula.render(<input type="text" value={undefined} />, container)).not.toThrow();
+      expect(() => Inula.render(<input type="text" value={null} />, container)).not.toThrow();
+      expect(() => Inula.render(<input type="text" />, container)).not.toThrow();
+    });
+
+    it('value值会转为字符串', () => {
+      const realNode = Inula.render(<input type="text" value={1} />, container);
+      expect(realNode.value).toBe('1');
+    });
+
+    it('value值可以被设置为true/false', () => {
+      let realNode = Inula.render(<input type="text" value={1} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('1');
+      realNode = Inula.render(<input type="text" value={true} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('true');
+      realNode = Inula.render(<input type="text" value={false} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('false');
+    });
+
+    it('value值可以被设置为object', () => {
+      let realNode = Inula.render(<input type="text" value={1} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('1');
+      const value = {
+        toString: () => {
+          return 'value';
+        },
+      };
+      realNode = Inula.render(<input type="text" value={value} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('value');
+    });
+
+    it('设置defaultValue', () => {
+      let realNode = Inula.render(<input type="text" defaultValue={1} />, container);
+      expect(realNode.value).toBe('1');
+      expect(realNode.getAttribute('value')).toBe('1');
+      Inula.unmountComponentAtNode(container);
+      // 测试defaultValue为boolean类型
+      realNode = Inula.render(<input type="text" defaultValue={true} />, container);
+      expect(realNode.value).toBe('true');
+      expect(realNode.getAttribute('value')).toBe('true');
+
+      Inula.unmountComponentAtNode(container);
+      realNode = Inula.render(<input type="text" defaultValue={false} />, container);
+      expect(realNode.value).toBe('false');
+      expect(realNode.getAttribute('value')).toBe('false');
+
+      Inula.unmountComponentAtNode(container);
+      const value = {
+        toString: () => {
+          return 'default';
+        },
+      };
+      realNode = Inula.render(<input type="text" defaultValue={value} />, container);
+      expect(realNode.value).toBe('default');
+      expect(realNode.getAttribute('value')).toBe('default');
+    });
+
+    it('value为0、defaultValue为1，input 的value应该为0', () => {
+      const input = Inula.render(<input defaultValue={1} value={0} />, container);
+      expect(input.getAttribute('value')).toBe('0');
+    });
+
+    it('name属性', () => {
+      let realNode = Inula.render(<input type="text" name={'name'} />, container);
+      expect(realNode.name).toBe('name');
+      expect(realNode.getAttribute('name')).toBe('name');
+      Inula.unmountComponentAtNode(container);
+      // 没有设置name属性
+      realNode = Inula.render(<input type="text" defaultValue={true} />, container);
+      expect(realNode.name).toBe('');
+      expect(realNode.getAttribute('name')).toBe(null);
+    });
+
+    it('受控input可以触发onChange', () => {
+      let realNode = Inula.render(
+        <input type="text" value={'name'} onChange={LogUtils.log('text change')} />,
+        container
+      );
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(realNode, 'abcd');
+      // 再触发事件
+      realNode.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+      // 触发onChange
+      expect(LogUtils.getAndClear()).toEqual(['text change']);
+    });
+  });
+
+  describe('type radio', () => {
+    it('radio的value可以更新', () => {
+      let realNode = Inula.render(<input type="radio" value={''} />, container);
+      expect(realNode.value).toBe('');
+      expect(realNode.getAttribute('value')).toBe('');
+      realNode = Inula.render(<input type="radio" value={false} />, container);
+      expect(realNode.value).toBe('false');
+      expect(realNode.getAttribute('value')).toBe('false');
+      realNode = Inula.render(<input type="radio" value={true} />, container);
+      expect(realNode.value).toBe('true');
+      expect(realNode.getAttribute('value')).toBe('true');
+    });
+
+    it('相同name且在同一表单的radio互斥', () => {
+      Inula.render(
+        <>
+          <input id="a" type="radio" name="num" onChange={LogUtils.log('a change')} defaultChecked={true} />
+          <input id="b" type="radio" name="num" onChange={LogUtils.log('b change')} />
+          <input id="c" type="radio" name="num" onChange={LogUtils.log('c change')} />
+          <form>
+            <input id="d" type="radio" name="num" onChange={() => {}} defaultChecked={true} />
+          </form>
+        </>,
+        container
+      );
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(document.getElementById('b').checked).toBe(false);
+      expect(document.getElementById('c').checked).toBe(false);
+      expect(document.getElementById('d').checked).toBe(true);
+      // 模拟点击id为b的单选框，b为选中状态，ac为非选中状态
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked').set.call(
+        document.getElementById('b'),
+        true
+      );
+      expect(LogUtils.getAndClear()).toEqual(['a change', 'b change', 'c change']);
+      expect(container.querySelector('input').checked).toBe(false);
+      expect(document.getElementById('b').checked).toBe(true);
+      expect(document.getElementById('c').checked).toBe(false);
+      expect(document.getElementById('d').checked).toBe(true);
+    });
+
+    it('name改变不影响相同name的radio', () => {
+      const inputRef = Inula.createRef();
+      const App = () => {
+        const [isNum, setNum] = Inula.useState(false);
+        const inputName = isNum ? 'secondName' : 'firstName';
+
+        const buttonClick = () => {
+          setNum(true);
+        };
+
+        return (
+          <div>
+            <button type="button" onClick={() => buttonClick()} />
+            <input type="radio" name={inputName} onChange={() => {}} checked={isNum === true} />
+            <input ref={inputRef} type="radio" name={inputName} onChange={() => {}} checked={isNum === false} />
+          </div>
+        );
+      };
+      Inula.render(<App />, container);
+      expect(container.querySelector('input').checked).toBe(false);
+      expect(inputRef.current.checked).toBe(true);
+      // 点击button，触发setNum
+      container.querySelector('button').click();
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(inputRef.current.checked).toBe(false);
+    });
+  });
+
+  describe('type submit', () => {
+    it('type submit value', () => {
+      Inula.render(<input type="submit" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+      Inula.unmountComponentAtNode(container);
+
+      Inula.render(<input type="submit" value="" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Inula.render(<input type="submit" value="submit" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('submit');
+    });
+  });
+
+  describe('type reset', () => {
+    it('type reset value', () => {
+      Inula.render(<input type="reset" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+      Inula.unmountComponentAtNode(container);
+
+      Inula.render(<input type="reset" value="" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Inula.render(<input type="reset" value="reset" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('reset');
+    });
+  });
+
+  describe('type number', () => {
+    it('value值会把number类型转为字符串，且.xx转为0.xx', () => {
+      Inula.render(<input type="number" value={0.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+    });
+
+    it('value值会把number类型转为字符串，且.xx转为0.xx', () => {
+      Inula.render(<input type="number" value={0.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+    });
+
+    it('改变node.value值', () => {
+      let setNum;
+      const App = () => {
+        const [num, _setNum] = Inula.useState('');
+        setNum = _setNum;
+        return <input type="number" value={num} readOnly={true} />;
+      };
+      Inula.render(<App />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+      act(() => {
+        setNum(0);
+      });
+      expect(container.querySelector('input').value).toBe('0');
+    });
+
+    it('node.value精度', () => {
+      let setNum;
+      const App = () => {
+        const [num, _setNum] = Inula.useState(0.0);
+        setNum = _setNum;
+        return <input type="number" value={num} readOnly={true} />;
+      };
+      Inula.render(<App />, container);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+      act(() => {
+        setNum(1.0);
+      });
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+      expect(container.querySelector('input').value).toBe('1');
+    });
+
+    it('node.value与Attrubute value', () => {
+      const App = () => {
+        return <input type="number" defaultValue={1} />;
+      };
+      Inula.render(<App />, container);
+      expect(container.querySelector('input').getAttribute('value')).toBe('1');
+      expect(container.querySelector('input').value).toBe('1');
+
+      // 先修改
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(
+        container.querySelector('input'),
+        '8'
+      );
+      // 再触发事件
+      container.querySelector('input').dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+      // Attrubute value不会改变，node.value会改变
+      expect(container.querySelector('input').getAttribute('value')).toBe('1');
+      expect(container.querySelector('input').value).toBe('8');
+    });
+  });
+
+  describe('type reset', () => {
+    it('type reset的value值', () => {
+      Inula.render(<input type="reset" value={0.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+
+      Inula.unmountComponentAtNode(container);
+      Inula.render(<input type="reset" value={''} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Inula.unmountComponentAtNode(container);
+      Inula.render(<input type="reset" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+    });
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/DomTest/DomSelect.test.js b/packages/inula-reactive/scripts/__tests__/DomTest/DomSelect.test.js
new file mode 100644
index 00000000..596a9225
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/DomTest/DomSelect.test.js
@@ -0,0 +1,336 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Dom Select', () => {
+  it('设置value', () => {
+    const selectNode = (
+      <select value="Vue">
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    const realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    realNode.value = 'React';
+    // 改变value会影响select的状态
+    Inula.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.value).toBe('React');
+  });
+
+  it('设置value为对象', () => {
+    let selectValue = {
+      toString: () => {
+        return 'Vue';
+      },
+    };
+    const selectNode = (
+      <select value={selectValue}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    const realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    selectValue = {
+      toString: () => {
+        return 'React';
+      },
+    };
+    const newSelectNode = (
+      <select value={selectValue}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    // 改变value会影响select的状态
+    Inula.render(newSelectNode, container);
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.value).toBe('React');
+  });
+
+  it('受控select转为不受控会保存原来select', () => {
+    const selectNode = (
+      <select value="Vue">
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    const realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    const newSelectNode = (
+      <select>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(newSelectNode, container);
+    // selected不变
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.value).toBe('Vue');
+  });
+
+  it('设置defaultValue', () => {
+    let defaultVal = 'Vue';
+    const selectNode = (
+      <select defaultValue={defaultVal}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    let realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+
+    defaultVal = 'React';
+    // 改变defaultValue没有影响
+    realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+  });
+
+  it('设置defaultValue后,select不受控', () => {
+    const selectNode = (
+      <select defaultValue={'Vue'}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    let realNode = Inula.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+
+    // 先修改
+    Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value').set.call(realNode, 'React');
+    // 再触发事件
+    container.querySelector('select').dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    // 鼠标改变受控select生效,select不受控
+    Inula.render(selectNode, container);
+    // 'React'项没被选中
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.options[1].selected).toBe(false);
+    expect(realNode.value).toBe('React');
+  });
+
+  xit('设置multiple(一)', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+    const selectNode = (
+      <select multiple="multiple" defaultValue={'Vue'}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    expect(() => Inula.render(selectNode, container)).toThrowError('newValues.forEach is not a function');
+  });
+
+  it('设置multiple(二)', () => {
+    let selectNode = (
+      <select id="se" multiple="multiple" defaultValue={['Vue', 'Angular']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    expect(() => Inula.render(selectNode, container)).not.toThrow();
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变defaultValue没有影响
+    selectNode = (
+      <select id="se" multiple="multiple" defaultValue={['React']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+  });
+
+  it('设置multiple(三)', () => {
+    let selectNode = (
+      <select id="se" multiple="multiple" value={['Vue', 'Angular']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    expect(() => Inula.render(selectNode, container)).not.toThrow();
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变value有影响
+    selectNode = (
+      <select id="se" multiple="multiple" value={['React']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+  });
+
+  it('defaultValue设置multiple与非multiple切换(一)', () => {
+    let selectNode = (
+      <select id="se" multiple="multiple" defaultValue={['Vue', 'Angular']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变value有影响
+    selectNode = (
+      <select id="se" defaultValue="React">
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+  });
+
+  it('defaultValue设置multiple与非multiple切换(二)', () => {
+    let selectNode = (
+      <select id="se" defaultValue="React">
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+
+    // 改变value有影响
+    selectNode = (
+      <select id="se" multiple="multiple" defaultValue={['Vue', 'Angular']}>
+        <option value="React">React.js</option>
+        <option value="Vue">Vue.js</option>
+        <option value="Angular">Angular.js</option>
+      </select>
+    );
+    Inula.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+  });
+
+  it('未指定value或者defaultValue时，默认选择第一个可选的', () => {
+    const selectNode = (
+      <select id="se">
+        <option disabled={true} value="React">
+          React.js
+        </option>
+        <option value="Vue">Vue.js</option>
+        <option disabled={true} value="Angular">
+          Angular.js
+        </option>
+      </select>
+    );
+    const realNode = Inula.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.options[2].selected).toBe(false);
+  });
+
+  it('删除添加option', () => {
+    const selectNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key="React" value="React">
+          React.js
+        </option>
+        <option key="Vue" value="Vue">
+          Vue.js
+        </option>
+        <option key="Angular" value="Angular">
+          Angular.js
+        </option>
+      </select>
+    );
+    const realNode = Inula.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.options[2].selected).toBe(false);
+
+    const newNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key="React" value="React">
+          React.js
+        </option>
+        <option key="Angular" value="Angular">
+          Angular.js
+        </option>
+      </select>
+    );
+    Inula.render(newNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(false);
+
+    const newSelectNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key="React" value="React">
+          React.js
+        </option>
+        <option key="Vue" value="Vue">
+          Vue.js
+        </option>
+        <option key="Angular" value="Angular">
+          Angular.js
+        </option>
+      </select>
+    );
+    // 重新添加不会影响
+    Inula.render(newSelectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(false);
+    expect(realNode.options[2].selected).toBe(false);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/DomTest/DomTextarea.test.js b/packages/inula-reactive/scripts/__tests__/DomTest/DomTextarea.test.js
new file mode 100644
index 00000000..7f793b01
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/DomTest/DomTextarea.test.js
@@ -0,0 +1,136 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('Dom Textarea', () => {
+  it('设置value', () => {
+    let realNode = Inula.render(<textarea value="text" />, container);
+    expect(realNode.getAttribute('value')).toBe(null);
+    expect(realNode.value).toBe('text');
+    realNode = Inula.render(<textarea value={0} />, container);
+    expect(realNode.getAttribute('value')).toBe(null);
+    expect(realNode.value).toBe('0');
+    realNode = Inula.render(<textarea value={true} />, container);
+    expect(realNode.getAttribute('value')).toBe(null);
+    expect(realNode.value).toBe('true');
+    realNode = Inula.render(<textarea value={false} />, container);
+    expect(realNode.getAttribute('value')).toBe(null);
+    expect(realNode.value).toBe('false');
+  });
+
+  it('设置value为对象', () => {
+    let textareaValue = {
+      toString: () => {
+        return 'Vue';
+      },
+    };
+    const textareaNode = <textarea value={textareaValue} />;
+    const realNode = Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('Vue');
+    textareaValue = {
+      toString: () => {
+        return 'React';
+      },
+    };
+    const newTextareaNode = <textarea value={textareaValue} />;
+    // 改变value会影响select的状态
+    Inula.render(newTextareaNode, container);
+    expect(realNode.value).toBe('React');
+  });
+
+  it('设置defaultValue', () => {
+    let defaultVal = 'Vue';
+    const textareaNode = <textarea defaultValue={defaultVal} />;
+    let realNode = Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('Vue');
+
+    defaultVal = 'React';
+    // 改变defaultValue没有影响
+    realNode = Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('Vue');
+
+    Inula.unmountComponentAtNode(container);
+    defaultVal = 0;
+    realNode = Inula.render(<textarea defaultValue={defaultVal} />, container);
+    expect(realNode.value).toBe('0');
+
+    Inula.unmountComponentAtNode(container);
+    defaultVal = true;
+    realNode = Inula.render(<textarea defaultValue={defaultVal} />, container);
+    expect(realNode.value).toBe('true');
+
+    Inula.unmountComponentAtNode(container);
+    defaultVal = false;
+    realNode = Inula.render(<textarea defaultValue={defaultVal} />, container);
+    expect(realNode.value).toBe('false');
+
+    Inula.render(<textarea>123</textarea>, container);
+    expect(realNode.value).toBe('false');
+  });
+
+  it('设置defaultValue为对象', () => {
+    let textareaValue = {
+      toString: () => {
+        return 'Vue';
+      },
+    };
+    const textareaNode = <textarea defaultValue={textareaValue} />;
+    const realNode = Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('Vue');
+  });
+
+  it('设置defaultValue后,select不受控', () => {
+    const textareaNode = <textarea defaultValue={'text'} />;
+    let realNode = Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('text');
+
+    // 先修改
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value').set.call(realNode, 'ABC');
+    // 再触发事件
+    container.querySelector('textarea').dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    // 鼠标改变textarea生效
+    Inula.render(textareaNode, container);
+    expect(realNode.value).toBe('ABC');
+  });
+
+  it('受控与非受控切换', () => {
+    // 非受控切换为受控
+    let realNode = Inula.render(<textarea defaultValue="text" />, container);
+    expect(realNode.value).toBe('text');
+    Inula.render(<textarea value="newtext" onChange={() => {}} />, container);
+    expect(realNode.value).toBe('newtext');
+
+    Inula.unmountComponentAtNode(container);
+    // 受控切换为非受控
+    realNode = Inula.render(<textarea value="text" onChange={() => {}} />, container);
+    expect(realNode.value).toBe('text');
+    Inula.render(<textarea defaultValue="newtext" onChange={() => {}} />, container);
+    expect(realNode.value).toBe('text');
+  });
+
+  it('textarea的孩子', () => {
+    let realNode = Inula.render(<textarea>{1234}</textarea>, container);
+    expect(realNode.value).toBe('1234');
+    realNode = Inula.render(<textarea>{5678}</textarea>, container);
+    // realNode.value依旧为1234
+    expect(realNode.value).toBe('1234');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/EventMain.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/EventMain.test.js
new file mode 100644
index 00000000..c7bdcb74
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/EventMain.test.js
@@ -0,0 +1,281 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import * as TestUtils from '../jest/testUtils';
+
+function dispatchChangeEvent(input) {
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+  nativeInputValueSetter.call(input, 'test');
+
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+describe('事件', () => {
+  const LogUtils = TestUtils.getLogUtils();
+
+  it('事件捕获与冒泡', () => {
+    const App = () => {
+      return (
+        <>
+          <div onClickCapture={() => LogUtils.log('div capture')} onClick={() => LogUtils.log('div bubble')}>
+            <p onClickCapture={() => LogUtils.log('p capture')} onClick={() => LogUtils.log('p bubble')}>
+              <button onClickCapture={() => LogUtils.log('btn capture')} onClick={() => LogUtils.log('btn bubble')} />
+            </p>
+          </div>
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    const a = container.querySelector('button');
+    a.click();
+    expect(LogUtils.getAndClear()).toEqual([
+      // 从外到内先捕获再冒泡
+      'div capture',
+      'p capture',
+      'btn capture',
+      'btn bubble',
+      'p bubble',
+      'div bubble',
+    ]);
+  });
+
+  it('returns 0', () => {
+    let keyCode = null;
+    const node = Inula.render(
+      <input
+        onKeyPress={e => {
+          keyCode = e.keyCode;
+        }}
+      />,
+      container
+    );
+    node.dispatchEvent(
+      new KeyboardEvent('keypress', {
+        keyCode: 65,
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    expect(keyCode).toBe(65);
+  });
+
+  it('阻止事件冒泡', () => {
+    const App = () => {
+      return (
+        <>
+          <div onClickCapture={() => LogUtils.log('div capture')} onClick={() => LogUtils.log('div bubble')}>
+            <p onClickCapture={() => LogUtils.log('p capture')} onClick={() => LogUtils.log('p bubble')}>
+              <button
+                onClickCapture={() => LogUtils.log('btn capture')}
+                onClick={e => TestUtils.stopBubbleOrCapture(e, 'btn bubble')}
+              />
+            </p>
+          </div>
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    container.querySelector('button').click();
+
+    expect(LogUtils.getAndClear()).toEqual([
+      // 到button时停止冒泡
+      'div capture',
+      'p capture',
+      'btn capture',
+      'btn bubble',
+    ]);
+  });
+
+  it('阻止事件捕获', () => {
+    const App = () => {
+      return (
+        <>
+          <div
+            onClickCapture={e => TestUtils.stopBubbleOrCapture(e, 'div capture')}
+            onClick={() => LogUtils.log('div bubble')}
+          >
+            <p onClickCapture={() => LogUtils.log('p capture')} onClick={() => LogUtils.log('p bubble')}>
+              <button onClickCapture={() => LogUtils.log('btn capture')} onClick={() => LogUtils.log('btn bubble')} />
+            </p>
+          </div>
+        </>
+      );
+    };
+    Inula.render(<App />, container);
+    container.querySelector('button').click();
+
+    expect(LogUtils.getAndClear()).toEqual([
+      // 阻止捕获，不再继续向下执行
+      'div capture',
+    ]);
+  });
+
+  it('阻止原生事件冒泡', () => {
+    const App = () => {
+      return (
+        <div>
+          <p>
+            <button />
+          </p>
+        </div>
+      );
+    };
+    Inula.render(<App />, container);
+    container.querySelector('div').addEventListener(
+      'click',
+      () => {
+        LogUtils.log('div bubble');
+      },
+      false
+    );
+    container.querySelector('p').addEventListener(
+      'click',
+      () => {
+        LogUtils.log('p bubble');
+      },
+      false
+    );
+    container.querySelector('button').addEventListener(
+      'click',
+      e => {
+        LogUtils.log('btn bubble');
+        e.stopPropagation();
+      },
+      false
+    );
+    container.querySelector('button').click();
+    expect(LogUtils.getAndClear()).toEqual(['btn bubble']);
+  });
+
+  it('动态增加事件', () => {
+    let update;
+    let inputRef = Inula.createRef();
+
+    function Test() {
+      const [inputProps, setProps] = Inula.useState({});
+      update = setProps;
+      return <input ref={inputRef} {...inputProps} />;
+    }
+
+    Inula.render(<Test />, container);
+    update({
+      onChange: () => {
+        LogUtils.log('change');
+      },
+    });
+    dispatchChangeEvent(inputRef.current);
+
+    expect(LogUtils.getAndClear()).toEqual(['change']);
+  });
+
+  it('Radio change事件', () => {
+    let radio1Called = 0;
+    let radio2Called = 0;
+
+    function onChange1() {
+      radio1Called++;
+    }
+
+    function onChange2() {
+      radio2Called++;
+    }
+
+    const radio1Ref = Inula.createRef();
+    const radio2Ref = Inula.createRef();
+
+    Inula.render(
+      <>
+        <input type="radio" ref={radio1Ref} name="name" onChange={onChange1} />
+        <input type="radio" ref={radio2Ref} name="name" onChange={onChange2} />
+      </>,
+      container
+    );
+
+    function clickRadioAndExpect(radio, [expect1, expect2]) {
+      radio.click();
+      expect(radio1Called).toBe(expect1);
+      expect(radio2Called).toBe(expect2);
+    }
+
+    // 先选择选项1
+    clickRadioAndExpect(radio1Ref.current, [1, 0]);
+
+    // 再选择选项1
+    clickRadioAndExpect(radio2Ref.current, [1, 1]);
+
+    // 先选择选项1，radio1应该重新触发onchange
+    clickRadioAndExpect(radio1Ref.current, [2, 1]);
+  });
+
+  it('多根节点下，事件挂载正确', () => {
+    const root1 = document.createElement('div');
+    const root2 = document.createElement('div');
+    root1.key = 'root1';
+    root2.key = 'root2';
+    let input1, input2, update1, update2;
+
+    function App1() {
+      const [props, setProps] = Inula.useState({});
+      update1 = setProps;
+      return (
+        <input
+          {...props}
+          ref={n => (input1 = n)}
+          onChange={() => {
+            LogUtils.log('input1 changed');
+          }}
+        />
+      );
+    }
+
+    function App2() {
+      const [props, setProps] = Inula.useState({});
+      update2 = setProps;
+
+      return (
+        <input
+          {...props}
+          ref={n => (input2 = n)}
+          onChange={() => {
+            LogUtils.log('input2 changed');
+          }}
+        />
+      );
+    }
+
+    // 多根mount阶段挂载onChange事件
+    Inula.render(<App1 key={1} />, root1);
+    Inula.render(<App2 key={2} />, root2);
+
+    dispatchChangeEvent(input1);
+    expect(LogUtils.getAndClear()).toEqual(['input1 changed']);
+    dispatchChangeEvent(input2);
+    expect(LogUtils.getAndClear()).toEqual(['input2 changed']);
+
+    // 多根update阶段挂载onClick事件
+    update1({
+      onClick: () => LogUtils.log('input1 clicked'),
+    });
+    update2({
+      onClick: () => LogUtils.log('input2 clicked'),
+    });
+
+    input1.click();
+    expect(LogUtils.getAndClear()).toEqual(['input1 clicked']);
+    input2.click();
+    expect(LogUtils.getAndClear()).toEqual(['input2 clicked']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/FocusEvent.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/FocusEvent.test.js
new file mode 100644
index 00000000..c201ad43
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/FocusEvent.test.js
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('合成焦点事件', () => {
+  const LogUtils = getLogUtils();
+
+  it('onFocus', () => {
+    const realNode = Inula.render(
+      <input
+        onFocus={event => LogUtils.log(`onFocus: ${event.type}`)}
+        onFocusCapture={event => LogUtils.log(`onFocusCapture: ${event.type}`)}
+      />,
+      container
+    );
+
+    realNode.dispatchEvent(
+      new FocusEvent('focusin', {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
+  });
+
+  it('onBlur', () => {
+    const realNode = Inula.render(
+      <input
+        onBlur={event => LogUtils.log(`onBlur: ${event.type}`)}
+        onBlurCapture={event => LogUtils.log(`onBlurCapture: ${event.type}`)}
+      />,
+      container
+    );
+
+    realNode.dispatchEvent(
+      new FocusEvent('focusout', {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/KeyboardEvent.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/KeyboardEvent.test.js
new file mode 100644
index 00000000..5a4780f8
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/KeyboardEvent.test.js
@@ -0,0 +1,130 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Keyboard Event', () => {
+  const LogUtils = getLogUtils();
+  const getKeyboardEvent = (type, keyCode, code, charCode) => {
+    return new KeyboardEvent(type, {
+      keyCode: keyCode ?? undefined,
+      code: code ?? undefined,
+      charCode: charCode ?? undefined,
+      bubbles: true,
+      cancelable: true,
+    });
+  };
+
+  it('keydown,keypress,keyup的keycode,charcode', () => {
+    const node = Inula.render(
+      <input
+        onKeyUp={e => {
+          LogUtils.log('onKeyUp: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
+        }}
+        onKeyDown={e => {
+          LogUtils.log('onKeyDown: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
+        }}
+      />,
+      container
+    );
+    node.dispatchEvent(getKeyboardEvent('keydown', 50, 'Digit2'));
+    node.dispatchEvent(getKeyboardEvent('keyup', 50, 'Digit2'));
+
+    expect(LogUtils.getAndClear()).toEqual(['onKeyDown: keycode: 50,charcode: 0', 'onKeyUp: keycode: 50,charcode: 0']);
+  });
+
+  it('keypress的keycode,charcode', () => {
+    const node = Inula.render(
+      <input
+        onKeyPress={e => {
+          LogUtils.log('onKeyPress: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
+        }}
+      />,
+      container
+    );
+    node.dispatchEvent(getKeyboardEvent('keypress', undefined, 'Digit2', 50));
+
+    expect(LogUtils.getAndClear()).toEqual(['onKeyPress: keycode: 0,charcode: 50']);
+  });
+
+  it('当charcode为13,且不设置keycode的时候', () => {
+    const node = Inula.render(
+      <input
+        onKeyPress={e => {
+          LogUtils.log('onKeyPress: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
+        }}
+      />,
+      container
+    );
+    node.dispatchEvent(getKeyboardEvent('keypress', undefined, undefined, 13));
+    expect(LogUtils.getAndClear()).toEqual(['onKeyPress: keycode: 0,charcode: 13']);
+  });
+
+  it('keydown,keypress,keyup的code', () => {
+    const node = Inula.render(
+      <input
+        onKeyUp={e => {
+          LogUtils.log('onKeyUp: code: ' + e.code);
+        }}
+        onKeyPress={e => {
+          LogUtils.log('onKeyPress: code: ' + e.code);
+        }}
+        onKeyDown={e => {
+          LogUtils.log('onKeyDown: code: ' + e.code);
+        }}
+      />,
+      container
+    );
+    node.dispatchEvent(getKeyboardEvent('keydown', undefined, 'Digit2'));
+    node.dispatchEvent(getKeyboardEvent('keypress', undefined, 'Digit2', 50));
+
+    node.dispatchEvent(
+      new KeyboardEvent('keyup', {
+        code: 'Digit2',
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(LogUtils.getAndClear()).toEqual([
+      'onKeyDown: code: Digit2',
+      'onKeyPress: code: Digit2',
+      'onKeyUp: code: Digit2',
+    ]);
+  });
+
+  it('可以执行preventDefault和 stopPropagation', () => {
+    const keyboardProcessing = e => {
+      expect(e.isDefaultPrevented()).toBe(false);
+      e.preventDefault();
+      expect(e.isDefaultPrevented()).toBe(true);
+
+      expect(e.isPropagationStopped()).toBe(false);
+      e.stopPropagation();
+      expect(e.isPropagationStopped()).toBe(true);
+      LogUtils.log(e.type + ' handle');
+    };
+    const div = Inula.render(
+      <div onKeyDown={keyboardProcessing} onKeyUp={keyboardProcessing} onKeyPress={keyboardProcessing} />,
+      container
+    );
+    div.dispatchEvent(getKeyboardEvent('keydown', 40));
+    div.dispatchEvent(getKeyboardEvent('keyup', 40));
+    div.dispatchEvent(getKeyboardEvent('keypress', 40));
+
+    expect(LogUtils.getAndClear()).toEqual(['keydown handle', 'keyup handle', 'keypress handle']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/MouseEnterEvent.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/MouseEnterEvent.test.js
new file mode 100644
index 00000000..870cdbc1
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/MouseEnterEvent.test.js
@@ -0,0 +1,278 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+describe('mouseenter和mouseleave事件测试', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('在iframe中mouseleave事件的relateTarget属性', () => {
+    const iframe = document.createElement('iframe');
+    container.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write('<!DOCTYPE html><html><head></head><body><div></div></body></html>');
+    iframeDocument.close();
+
+    const leaveEvents = [];
+    const node = Inula.render(
+      <div
+        onMouseLeave={e => {
+          e.persist();
+          leaveEvents.push(e);
+        }}
+      />,
+      iframeDocument.body.getElementsByTagName('div')[0]
+    );
+
+    node.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: iframe.contentWindow,
+      })
+    );
+
+    expect(leaveEvents.length).toBe(1);
+    expect(leaveEvents[0].target).toBe(node);
+    expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);
+  });
+
+  it('在iframe中mouseenter事件的relateTarget属性', () => {
+    const iframe = document.createElement('iframe');
+    container.appendChild(iframe);
+    const iframeDocument = iframe.contentDocument;
+    iframeDocument.write('<!DOCTYPE html><html><head></head><body><div></div></body></html>');
+    iframeDocument.close();
+
+    const enterEvents = [];
+    const node = Inula.render(
+      <div
+        onMouseEnter={e => {
+          e.persist();
+          enterEvents.push(e);
+        }}
+      />,
+      iframeDocument.body.getElementsByTagName('div')[0]
+    );
+
+    node.dispatchEvent(
+      new MouseEvent('mouseover', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: null,
+      })
+    );
+
+    expect(enterEvents.length).toBe(1);
+    expect(enterEvents[0].target).toBe(node);
+    expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);
+  });
+
+  it('从新渲染的子组件触发mouseout事件，子组件响应mouseenter事件，父节点不响应', () => {
+    let parentEnterCalls = 0;
+    let childEnterCalls = 0;
+    let parent = null;
+
+    class Parent extends Inula.Component {
+      render() {
+        return (
+          <div onMouseEnter={() => parentEnterCalls++} ref={node => (parent = node)}>
+            {this.props.showChild && <div onMouseEnter={() => childEnterCalls++} />}
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<Parent />, container);
+    Inula.render(<Parent showChild={true} />, container);
+
+    parent.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: parent.firstChild,
+      })
+    );
+    expect(childEnterCalls).toBe(1);
+    expect(parentEnterCalls).toBe(0);
+  });
+
+  it('render一个新组件，兄弟节点触发mouseout事件，mouseenter事件响应一次', done => {
+    const mockFn1 = jest.fn();
+    const mockFn2 = jest.fn();
+    const mockFn3 = jest.fn();
+
+    class Parent extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.parentEl = Inula.createRef();
+      }
+
+      componentDidMount() {
+        Inula.render(<MouseEnterDetect />, this.parentEl.current);
+      }
+
+      render() {
+        return <div ref={this.parentEl} id="parent" onMouseLeave={mockFn3} />;
+      }
+    }
+
+    class MouseEnterDetect extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.firstEl = Inula.createRef();
+        this.siblingEl = Inula.createRef();
+      }
+
+      componentDidMount() {
+        this.siblingEl.current.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: this.firstEl.current,
+          })
+        );
+        expect(mockFn1.mock.calls.length).toBe(1);
+        expect(mockFn2.mock.calls.length).toBe(1);
+        expect(mockFn3.mock.calls.length).toBe(0);
+        done();
+      }
+
+      render() {
+        return (
+          <Inula.Fragment>
+            <div ref={this.firstEl} id="first" onMouseEnter={mockFn1} />
+            <div ref={this.siblingEl} id="sibling" onMouseLeave={mockFn2} />
+          </Inula.Fragment>
+        );
+      }
+    }
+
+    Inula.render(<Parent />, container);
+  });
+
+  it('未被inula管理的节点触发mouseout事件，mouseenter事件也能正常触发', done => {
+    const mockFn = jest.fn();
+
+    class Parent extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.parentEl = Inula.createRef();
+      }
+
+      componentDidMount() {
+        Inula.render(<MouseEnterDetect />, this.parentEl.current);
+      }
+
+      render() {
+        return <div ref={this.parentEl} />;
+      }
+    }
+
+    class MouseEnterDetect extends Inula.Component {
+      constructor(props) {
+        super(props);
+        this.divRef = Inula.createRef();
+        this.siblingEl = Inula.createRef();
+      }
+
+      componentDidMount() {
+        const attachedNode = document.createElement('div');
+        this.divRef.current.appendChild(attachedNode);
+        attachedNode.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: this.siblingEl.current,
+          })
+        );
+        expect(mockFn.mock.calls.length).toBe(1);
+        done();
+      }
+
+      render() {
+        return (
+          <div ref={this.divRef}>
+            <div ref={this.siblingEl} onMouseEnter={mockFn} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<Parent />, container);
+  });
+
+  it('外部portal节点触发的mouseout事件，根节点的mouseleave事件也能响应', () => {
+    const divRef = Inula.createRef();
+    const onMouseLeave = jest.fn();
+
+    function Component() {
+      return (
+        <div onMouseLeave={onMouseLeave} id="parent">
+          {Inula.createPortal(<div ref={divRef} id="sub" />, document.body)}
+        </div>
+      );
+    }
+
+    Inula.render(<Component />, container);
+
+    divRef.current.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: document.body,
+      })
+    );
+
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it('外部portal节点触发的mouseout事件，根节点的mouseEnter事件也能响应', () => {
+    const divRef = Inula.createRef();
+    const otherDivRef = Inula.createRef();
+    const onMouseEnter = jest.fn();
+
+    function Component() {
+      return (
+        <div ref={divRef}>
+          {Inula.createPortal(<div ref={otherDivRef} onMouseEnter={onMouseEnter} />, document.body)}
+        </div>
+      );
+    }
+
+    Inula.render(<Component />, container);
+
+    divRef.current.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: otherDivRef.current,
+      })
+    );
+
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/MouseEvent.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/MouseEvent.test.js
new file mode 100644
index 00000000..a840c3d4
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/MouseEvent.test.js
@@ -0,0 +1,185 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('MouseEvent Test', () => {
+  const LogUtils = getLogUtils();
+
+  describe('onClick Test', () => {
+    it('绑定this', () => {
+      class App extends Inula.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            num: this.props.num,
+            price: this.props.price,
+          };
+        }
+
+        setNum() {
+          this.setState({ num: this.state.num + 1 });
+        }
+
+        setPrice = e => {
+          this.setState({ num: this.state.price + 1 });
+        };
+
+        render() {
+          return (
+            <>
+              <p>{this.state.num}</p>
+              <p id="p">{this.state.price}</p>
+              <button onClick={this.setNum.bind(this)}>button</button>
+              <button id="btn" onClick={() => this.setPrice()}>
+                button
+              </button>
+            </>
+          );
+        }
+      }
+
+      Inula.render(<App num={0} price={100} />, container);
+      expect(container.querySelector('p').innerHTML).toBe('0');
+      expect(container.querySelector('#p').innerHTML).toBe('100');
+      // 点击按钮触发num加1
+      container.querySelector('button').click();
+      expect(container.querySelector('p').innerHTML).toBe('1');
+
+      container.querySelector('#btn').click();
+      expect(container.querySelector('p').innerHTML).toBe('101');
+    });
+
+    it('点击触发', () => {
+      const handleClick = jest.fn();
+      Inula.render(<button onClick={handleClick}>Click Me</button>, container);
+      container.querySelector('button').click();
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      for (let i = 0; i < 5; i++) {
+        container.querySelector('button').click();
+      }
+      expect(handleClick).toHaveBeenCalledTimes(6);
+    });
+
+    it('disable不触发click', () => {
+      const handleClick = jest.fn();
+      const spanRef = Inula.createRef();
+      Inula.render(
+        <button onClick={handleClick} disabled={true}>
+          <span ref={spanRef}>Click Me</span>
+        </button>,
+        container
+      );
+      spanRef.current.click();
+
+      expect(handleClick).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  const test = (name, config) => {
+    const node = Inula.render(config, container);
+    let event = new MouseEvent(name, {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 1,
+    });
+    node.dispatchEvent(event);
+
+    expect(LogUtils.getAndClear()).toEqual([`${name} capture`, `${name} bubble`]);
+
+    event = new MouseEvent(name, {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 2,
+    });
+    node.dispatchEvent(event);
+
+    // 再次触发新事件
+    expect(LogUtils.getAndClear()).toEqual([`${name} capture`, `${name} bubble`]);
+  };
+
+  describe('合成鼠标事件', () => {
+    it('onMouseMove', () => {
+      const onMouseMove = () => {
+        LogUtils.log('mousemove bubble');
+      };
+      const onMouseMoveCapture = () => {
+        LogUtils.log('mousemove capture');
+      };
+      test('mousemove', <div onMouseMove={onMouseMove} onMouseMoveCapture={onMouseMoveCapture} />);
+    });
+
+    it('onMouseDown', () => {
+      const onMousedown = () => {
+        LogUtils.log('mousedown bubble');
+      };
+      const onMousedownCapture = () => {
+        LogUtils.log('mousedown capture');
+      };
+      test('mousedown', <div onMousedown={onMousedown} onMousedownCapture={onMousedownCapture} />);
+    });
+
+    it('onMouseUp', () => {
+      const onMouseUp = () => {
+        LogUtils.log('mouseup bubble');
+      };
+      const onMouseUpCapture = () => {
+        LogUtils.log('mouseup capture');
+      };
+      test('mouseup', <div onMouseUp={onMouseUp} onMouseUpCapture={onMouseUpCapture} />);
+    });
+
+    it('onMouseOut', () => {
+      const onMouseOut = () => {
+        LogUtils.log('mouseout bubble');
+      };
+      const onMouseOutCapture = () => {
+        LogUtils.log('mouseout capture');
+      };
+      test('mouseout', <div onMouseOut={onMouseOut} onMouseOutCapture={onMouseOutCapture} />);
+    });
+
+    it('onMouseOver', () => {
+      const onMouseOver = () => {
+        LogUtils.log('mouseover bubble');
+      };
+      const onMouseOverCapture = () => {
+        LogUtils.log('mouseover capture');
+      };
+      test('mouseover', <div onMouseOver={onMouseOver} onMouseOverCapture={onMouseOverCapture} />);
+    });
+
+    it('KeyboardEvent.getModifierState should not fail', () => {
+      const input = Inula.render(
+        <input
+          onMouseDown={e => {
+            e.getModifierState('CapsLock');
+          }}
+        />,
+        container
+      );
+      const event = new MouseEvent('mousedown', {
+        relatedTarget: null,
+        bubbles: true,
+        screenX: 1,
+      });
+
+      expect(() => {
+        input.dispatchEvent(event);
+      }).not.toThrow();
+    });
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/EventTest/WheelEvent.test.js b/packages/inula-reactive/scripts/__tests__/EventTest/WheelEvent.test.js
new file mode 100644
index 00000000..02b404a1
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/EventTest/WheelEvent.test.js
@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('合成滚轮事件', () => {
+  const LogUtils = getLogUtils();
+
+  it('onWheel', () => {
+    const realNode = Inula.render(
+      <div
+        onWheel={event => LogUtils.log(`onWheel: ${event.type}`)}
+        onWheelCapture={event => LogUtils.log(`onWheelCapture: ${event.type}`)}
+      />,
+      container
+    );
+
+    realNode.dispatchEvent(
+      new MouseEvent('wheel', {
+        bubbles: true,
+        cancelable: false,
+      })
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['onWheelCapture: wheel', 'onWheel: wheel']);
+  });
+
+  it('可以执行preventDefault和stopPropagation', () => {
+    const eventHandler = e => {
+      expect(e.isDefaultPrevented()).toBe(false);
+      e.preventDefault();
+      expect(e.isDefaultPrevented()).toBe(true);
+
+      expect(e.isPropagationStopped()).toBe(false);
+      e.stopPropagation();
+      expect(e.isPropagationStopped()).toBe(true);
+      LogUtils.log(e.type + ' handle');
+    };
+    const realNode = Inula.render(<div onWheel={eventHandler} />, container);
+
+    realNode.dispatchEvent(
+      new MouseEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    expect(LogUtils.getAndClear()).toEqual(['wheel handle']);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateArray.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateArray.test.tsx
new file mode 100644
index 00000000..065fdfd6
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateArray.test.tsx
@@ -0,0 +1,223 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: [
+      { name: 'p1', age: 1 },
+      { name: 'p2', age: 2 },
+    ],
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.push(person);
+    },
+    delOnePerson: state => {
+      state.persons.pop();
+    },
+    clearPersons: state => {
+      state.persons = [];
+    },
+    reset: state => {
+      state.persons = [
+        { name: 'p1', age: 1 },
+        { name: 'p2', age: 2 },
+      ];
+    },
+  },
+});
+
+describe('测试store中的Array', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+  function Parent(props) {
+    const userStore = useUserStore();
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson();
+    };
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试Array方法: push()、pop()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.length}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 2');
+    // 在Array中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 3');
+
+    // 在Array中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 2');
+  });
+
+  it('测试Array方法: entries()、push()、shift()、unshift、直接赋值', () => {
+    let globalStore = useUserStore();
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      const entries = userStore.$s.persons?.entries();
+      if (entries) {
+        for (const entry of entries) {
+          nameList.push(entry[1].name);
+        }
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // push
+    globalStore.$s.persons.push(newPerson);
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // shift
+    //@ts-ignore TODO:why is this argument here?
+    globalStore.$s.persons.shift({ name: 'p0', age: 0 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3');
+
+    // 赋值[2]
+    globalStore.$s.persons[2] = { name: 'p4', age: 4 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p4');
+
+    // 重新赋值[2]
+    globalStore.$s.persons[2] = { name: 'p5', age: 5 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p5');
+
+    // unshift
+    globalStore.$s.persons.unshift({ name: 'p1', age: 1 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3 p5');
+
+    // 重新赋值 []
+    globalStore.$s.persons = [];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+
+    // 重新赋值 [{ name: 'p1', age: 1 }]
+    globalStore.$s.persons = [{ name: 'p1', age: 1 }];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1');
+  });
+
+  it('测试Array方法: forEach()', () => {
+    let globalStore = useUserStore();
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      userStore.$s.persons?.forEach(per => {
+        nameList.push(per.name);
+      });
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // push
+    globalStore.$s.persons.push(newPerson);
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // shift
+    //@ts-ignore TODO: why is this argument here?
+    globalStore.$s.persons.shift({ name: 'p0', age: 0 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3');
+
+    // 赋值[2]
+    globalStore.$s.persons[2] = { name: 'p4', age: 4 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p4');
+
+    // 重新赋值[2]
+    globalStore.$s.persons[2] = { name: 'p5', age: 5 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p5');
+
+    // unshift
+    globalStore.$s.persons.unshift({ name: 'p1', age: 1 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3 p5');
+
+    // 重新赋值 []
+    globalStore.$s.persons = [];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+
+    // 重新赋值 [{ name: 'p1', age: 1 }]
+    globalStore.$s.persons = [{ name: 'p1', age: 1 }];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMap.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMap.test.tsx
new file mode 100644
index 00000000..fc81b61b
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMap.test.tsx
@@ -0,0 +1,348 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: new Map([
+      ['p1', 1],
+      ['p2', 2],
+    ]),
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.set(person.name, person.age);
+    },
+    delOnePerson: (state, person) => {
+      state.persons.delete(person.name);
+    },
+    clearPersons: state => {
+      state.persons.clear();
+    },
+    reset: state => {
+      state.persons = new Map([
+        ['p1', 1],
+        ['p2', 2],
+      ]);
+    },
+  },
+});
+
+describe('测试store中的Map', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+
+  function Parent(props) {
+    const userStore = useUserStore();
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson(newPerson);
+    };
+    const clearPersons = function () {
+      userStore.clearPersons();
+    };
+
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <button id={'clearBtn'} onClick={clearPersons}>
+          clear persons
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试Map方法: set()、delete()、clear()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'size'} text={`persons number: ${userStore.$s.persons.size}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 0');
+  });
+
+  it('测试Map方法: keys()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      const keys = userStore.$s.persons.keys();
+      for (const key of keys) {
+        nameList.push(key);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: values()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const ageList: number[] = [];
+      const values = userStore.$s.persons.values();
+      for (const val of values) {
+        ageList.push(val);
+      }
+
+      return (
+        <div>
+          <Text id={'ageList'} text={`age list: ${ageList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2 3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: ');
+  });
+
+  it('测试Map方法: entries()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      const entries = userStore.$s.persons.entries();
+      for (const entry of entries) {
+        nameList.push(entry[0]);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: forEach()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      userStore.$s.persons.forEach((val, key) => {
+        nameList.push(key);
+      });
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: has()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.has(newPerson.name)}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: true');
+  });
+
+  it('测试Map方法: for of()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      for (const per of userStore.$s.persons) {
+        nameList.push(per[0]);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMixType.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMixType.test.tsx
new file mode 100644
index 00000000..413969af
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateMixType.test.tsx
@@ -0,0 +1,177 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+
+describe('测试store中的混合类型变化', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const persons = new Set([{ name: 'p1', age: 1, love: new Map() }]);
+    persons.add({
+      name: 'p2',
+      age: 2,
+      love: new Map(),
+    });
+    persons
+      .values()
+      .next()
+      .value.love.set('lanqiu', { moneny: 100, days: [1, 3, 5] });
+
+    createStore({
+      id: 'user',
+      state: {
+        type: 'bing dun dun',
+        persons: persons,
+      },
+      actions: {
+        addDay: (state, day) => {
+          state.persons.values().next().value.love.get('lanqiu').days.push(day);
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    (container as HTMLElement).remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  function Parent(props) {
+    const userStore = useStore('user');
+    const addDay = function () {
+      userStore.addDay(7);
+    };
+
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addDay}>
+          add day
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试state -> set -> map -> array的数据变化', () => {
+    function Child(props) {
+      const userStore = useStore('user');
+
+      const days = userStore.persons.values().next().value.love.get('lanqiu').days;
+
+      return (
+        <div>
+          <Text id={'dayList'} text={`love: ${days.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#dayList')?.innerHTML).toBe('love: 1 3 5');
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#dayList')?.innerHTML).toBe('love: 1 3 5 7');
+  });
+
+  it('属性是个class实例', () => {
+    class Person {
+      name;
+      age;
+      loves = new Set();
+
+      constructor(name, age) {
+        this.name = name;
+        this.age = age;
+      }
+
+      setName(name) {
+        this.name = name;
+      }
+      getName() {
+        return this.name;
+      }
+
+      setAge(age) {
+        this.age = age;
+      }
+      getAge() {
+        return this.age;
+      }
+
+      addLove(lv) {
+        this.loves.add(lv);
+      }
+      getLoves() {
+        return this.loves;
+      }
+    }
+
+    let globalPerson;
+    let globalStore;
+    function Child(props) {
+      const userStore = useStore('user');
+      globalStore = userStore;
+
+      const nameList: string[] = [];
+      const valIterator = userStore.persons.values();
+      let per = valIterator.next() as {
+        value: {
+          name: string;
+          getName: () => string;
+        };
+        done: boolean;
+      };
+      while (!per.done) {
+        nameList.push(per.value.name ?? per.value.getName());
+        globalPerson = per.value;
+        per = valIterator.next();
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={nameList.join(' ')} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('p1 p2');
+
+    // 动态增加一个Person实例
+    globalStore.$s.persons.add(new Person('ClassPerson', 5));
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('p1 p2 ClassPerson');
+
+    globalPerson.setName('ClassPerson1');
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('p1 p2 ClassPerson1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateSet.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateSet.test.tsx
new file mode 100644
index 00000000..0fc657f9
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateSet.test.tsx
@@ -0,0 +1,318 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: new Set([
+      { name: 'p1', age: 1 },
+      { name: 'p2', age: 2 },
+    ]),
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.add(person);
+    },
+    delOnePerson: (state, person) => {
+      state.persons.delete(person);
+    },
+    clearPersons: state => {
+      state.persons.clear();
+    },
+    reset: state => {
+      state.persons = new Set([
+        { name: 'p1', age: 1 },
+        { name: 'p2', age: 2 },
+      ]);
+    },
+  },
+});
+
+describe('测试store中的Set', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+  function Parent(props) {
+    const userStore = useUserStore();
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson(newPerson);
+    };
+    const clearPersons = function () {
+      userStore.clearPersons();
+    };
+
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <button id={'clearBtn'} onClick={clearPersons}>
+          clear persons
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试Set方法: add()、delete()、clear()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+      const personArr = Array.from(userStore.$s.persons);
+      const nameList: string[] = [];
+      const keys = userStore.$s.persons.keys();
+      for (const key of keys) {
+        nameList.push(key.name);
+      }
+
+      return (
+        <div>
+          <Text id={'size'} text={`persons number: ${userStore.$s.persons.size}`} />
+          <Text id={'lastAge'} text={`last person age: ${personArr[personArr.length - 1]?.age ?? 0}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+    expect(container?.querySelector('#lastAge')?.innerHTML).toBe('last person age: 2');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 3');
+
+    // 在set中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+
+    // clear set
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 0');
+    expect(container?.querySelector('#lastAge')?.innerHTML).toBe('last person age: 0');
+  });
+
+  it('测试Set方法: keys()、values()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      const keys = userStore.$s.persons.keys();
+      // const keys = userStore.$s.persons.values();
+      for (const key of keys) {
+        nameList.push(key.name);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在set中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear set
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Set方法: entries()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      const entries = userStore.$s.persons.entries();
+      for (const entry of entries) {
+        nameList.push(entry[0].name);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在set中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear set
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Set方法: forEach()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      userStore.$s.persons.forEach(per => {
+        nameList.push(per.name);
+      });
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在set中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear set
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Set方法: has()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.has(newPerson)}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: true');
+  });
+
+  it('测试Set方法: for of()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      const nameList: string[] = [];
+      for (const per of userStore.$s.persons) {
+        nameList.push(per.name);
+      }
+
+      return (
+        <div>
+          <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在set中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在set中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear set
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakMap.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakMap.test.tsx
new file mode 100644
index 00000000..2cccd515
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakMap.test.tsx
@@ -0,0 +1,149 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: new WeakMap([
+      [{ name: 'p1' }, 1],
+      [{ name: 'p2' }, 2],
+    ]),
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.set(person, 3);
+    },
+    delOnePerson: (state, person) => {
+      state.persons.delete(person);
+    },
+    clearPersons: state => {
+      state.persons = new WeakMap([]);
+    },
+    reset: state => {
+      state.persons = new WeakMap([
+        [{ name: 'p1' }, 1],
+        [{ name: 'p2' }, 2],
+      ]);
+    },
+  },
+});
+
+describe('测试store中的WeakMap', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3' };
+
+  function Parent(props) {
+    const userStore = useUserStore();
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson(newPerson);
+    };
+    const clearPersons = function () {
+      userStore.clearPersons();
+    };
+
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <button id={'clearBtn'} onClick={clearPersons}>
+          clear persons
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试WeakMap方法: set()、delete()、has()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.has(newPerson)}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+    // 在WeakMap中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: true');
+
+    // 在WeakMap中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+  });
+
+  it('测试WeakMap方法: get()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.get(newPerson)}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: undefined');
+    // 在WeakMap中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 3');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakSet.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakSet.test.tsx
new file mode 100644
index 00000000..6e2f322f
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StateManager/StateWeakSet.test.tsx
@@ -0,0 +1,120 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: new WeakSet([
+      { name: 'p1', age: 1 },
+      { name: 'p2', age: 2 },
+    ]),
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.add(person);
+    },
+    delOnePerson: (state, person) => {
+      state.persons.delete(person);
+    },
+    clearPersons: state => {
+      state.persons = new WeakSet([]);
+    },
+    reset: state => {
+      state.persons = new WeakSet([
+        { name: 'p1', age: 1 },
+        { name: 'p2', age: 2 },
+      ]);
+    },
+  },
+});
+
+describe('测试store中的WeakSet', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+  function Parent(props) {
+    const userStore = useUserStore();
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson(newPerson);
+    };
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <div>{props.children}</div>
+      </div>
+    );
+  }
+
+  it('测试WeakSet方法: add()、delete()、has()', () => {
+    function Child(props) {
+      const userStore = useUserStore();
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.$s.persons.has(newPerson)}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+    // 在WeakSet中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: true');
+
+    // 在WeakSet中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/async.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/async.test.tsx
new file mode 100644
index 00000000..157dea0c
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/async.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import { createStore } from '../../../../src/inulax/store/StoreHandler';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const { unmountComponentAtNode } = Inula;
+
+function postpone(timer, func) {
+  return new Promise(resolve => {
+    window.setTimeout(function () {
+      console.log('resolving postpone');
+      resolve(func());
+    }, timer);
+  });
+}
+
+describe('Asynchronous store', () => {
+  const getStore = createStore({
+    state: {
+      counter: 0,
+      check: false,
+    },
+    actions: {
+      increment: function (state) {
+        return new Promise(resolve => {
+          window.setTimeout(() => {
+            state.counter++;
+            resolve(true);
+          }, 10);
+        });
+      },
+      toggle: function (state) {
+        state.check = !state.check;
+      },
+      reset: function (state) {
+        state.check = false;
+        state.counter = 0;
+      },
+    },
+    computed: {
+      value: state => {
+        return (state.check ? 'true' : 'false') + state.counter;
+      },
+    },
+  });
+
+  beforeEach(() => {
+    getStore().reset();
+  });
+
+  it('should return promise when queued function is called', () => {
+    jest.useFakeTimers();
+
+    const store = getStore();
+
+    return new Promise(resolve => {
+      store.$queue.increment().then(() => {
+        expect(store.counter == 1);
+        resolve(true);
+      });
+
+      jest.advanceTimersByTime(150);
+    });
+  });
+
+  it('should queue async functions', () => {
+    jest.useFakeTimers();
+    return new Promise(resolve => {
+      const store = getStore();
+
+      // initial value
+      expect(store.value).toBe('false0');
+
+      // no blocking action action
+      store.$queue.toggle();
+      expect(store.value).toBe('true0');
+
+      // store is not updated before blocking action is resolved
+      store.$queue.increment();
+      const togglePromise = store.$queue.toggle();
+      expect(store.value).toBe('true0');
+
+      // fast action is resolved immediatelly
+      store.toggle();
+      expect(store.value).toBe('false0');
+
+      // queued action waits for blocking action to resolve
+      togglePromise.then(() => {
+        expect(store.value).toBe('true1');
+        resolve();
+      });
+
+      jest.advanceTimersByTime(150);
+    });
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/basicAccess.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/basicAccess.test.tsx
new file mode 100644
index 00000000..e12de714
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/basicAccess.test.tsx
@@ -0,0 +1,198 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import Inula from '../../../../src/index';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { useLogStore } from './store';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+import { createStore } from '../../../../src/inulax/store/StoreHandler';
+
+const { unmountComponentAtNode } = Inula;
+
+describe('Basic store manipulation', () => {
+  let container: HTMLElement | null = null;
+
+  const BUTTON_ID = 'btn';
+  const RESULT_ID = 'result';
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+  });
+
+  it('Should use getters', () => {
+    function App() {
+      const logStore = useLogStore();
+
+      return <div id={RESULT_ID}>{logStore.length}</div>;
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('1');
+  });
+
+  it('Should use direct setters', () => {
+    function App() {
+      const logStore = useLogStore();
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              logStore.logs = ['q'];
+            }}
+          >
+            add
+          </button>
+          <p id={RESULT_ID}>{logStore.logs[0]}</p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('q');
+  });
+
+  it('Should use actions and update components', () => {
+    function App() {
+      const logStore = useLogStore();
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              logStore.addLog('a');
+            }}
+          >
+            add
+          </button>
+          <p id={RESULT_ID}>{logStore.length}</p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2');
+  });
+
+  it('should call actions from own actions', () => {
+    const useIncrementStore = createStore({
+      id: 'incrementStore',
+      state: {
+        count: 2,
+      },
+      actions: {
+        increment: state => {
+          state.count++;
+        },
+        doublePlusOne: function (state) {
+          state.count = state.count * 2;
+          this.increment();
+        },
+      },
+    });
+
+    function App() {
+      const incrementStore = useIncrementStore();
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              incrementStore.doublePlusOne();
+            }}
+          >
+            +
+          </button>
+          <p id={RESULT_ID}>{incrementStore.count}</p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
+  });
+
+  it('should call computed from own actions', () => {
+    const useIncrementStore = createStore({
+      id: 'incrementStore',
+      state: {
+        count: 2,
+      },
+      actions: {
+        doublePlusOne: function (state) {
+          state.count = this.double + 1;
+        },
+      },
+      computed: {
+        double: state => {
+          return state.count * 2;
+        },
+      },
+    });
+
+    function App() {
+      const incrementStore = useIncrementStore();
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              incrementStore.doublePlusOne();
+            }}
+          >
+            +
+          </button>
+          <p id={RESULT_ID}>{incrementStore.count}</p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/cloneDeep.test.js b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/cloneDeep.test.js
new file mode 100644
index 00000000..340bd488
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/cloneDeep.test.js
@@ -0,0 +1,120 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { OBSERVER_KEY } from '../../../../src/inulax/Constants';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+
+describe('测试对store.state对象进行深度克隆', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    createStore({
+      id: 'user',
+      state: {
+        type: 'bing dun dun',
+        persons: [
+          { name: 'p1', age: 1 },
+          { name: 'p2', age: 2 },
+        ],
+      },
+      actions: {
+        addOnePerson: (state, person) => {
+          state.persons.push(person);
+        },
+        delOnePerson: state => {
+          state.persons.pop();
+        },
+        clearPersons: state => {
+          state.persons = null;
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+
+  function Parent({ children }) {
+    const userStore = useStore('user');
+    const addOnePerson = function () {
+      userStore.addOnePerson(newPerson);
+    };
+    const delOnePerson = function () {
+      userStore.delOnePerson();
+    };
+    return (
+      <div>
+        <button id={'addBtn'} onClick={addOnePerson}>
+          add person
+        </button>
+        <button id={'delBtn'} onClick={delOnePerson}>
+          delete person
+        </button>
+        <div>{children}</div>
+      </div>
+    );
+  }
+
+  it("The observer object of symbol ('_inulaObserver') cannot be accessed to  from Proxy", () => {
+    let userStore = null;
+    function Child(props) {
+      userStore = useStore('user');
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.persons.length}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    // The observer object of symbol ('_inulaObserver') cannot be accessed to  from Proxy prevent errors caused by clonedeep.
+    expect(userStore.persons[0][OBSERVER_KEY]).toBe(undefined);
+  });
+
+  it("The observer object of symbol ('_inulaObserver') cannot be accessed to  from Proxy", () => {
+    let userStore = null;
+    function Child(props) {
+      userStore = useStore('user');
+
+      return (
+        <div>
+          <Text id={'hasPerson'} text={`has new person: ${userStore.persons.length}`} />
+        </div>
+      );
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    // NO throw this Exception, TypeError: 'get' on proxy: property 'prototype' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value
+    const proxyObj = userStore.persons[0].constructor;
+    expect(proxyObj.prototype !== undefined).toBeTruthy();
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/dollarAccess.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/dollarAccess.test.tsx
new file mode 100644
index 00000000..61edc1d7
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/dollarAccess.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { useLogStore } from './store';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const { unmountComponentAtNode } = Inula;
+
+describe('Dollar store access', () => {
+  let container: HTMLElement | null = null;
+
+  const BUTTON_ID = 'btn';
+  const RESULT_ID = 'result';
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+  });
+
+  it('Should use $s and $c', () => {
+    function App() {
+      const logStore = useLogStore();
+
+      return <div id={RESULT_ID}>{logStore.$c.length()}</div>;
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('1');
+  });
+
+  it('Should use $a and update components', () => {
+    function App() {
+      const logStore = useLogStore();
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              logStore.$a.addLog('data');
+            }}
+          >
+            add
+          </button>
+          <p id={RESULT_ID}>{logStore.$c.length()}</p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/otherCases.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/otherCases.test.tsx
new file mode 100644
index 00000000..b2ebc57e
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/otherCases.test.tsx
@@ -0,0 +1,165 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import { createStore } from '../../../../src/inulax/store/StoreHandler';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const { unmountComponentAtNode } = Inula;
+
+describe('Self referencing', () => {
+  let container: HTMLElement | null = null;
+
+  const BUTTON_ID = 'btn';
+  const RESULT_ID = 'result';
+
+  const useSelfRefStore = createStore({
+    state: {
+      val: 2,
+    },
+    actions: {
+      increaseVal: function (state) {
+        state.val = state.val * 2 - 1;
+      },
+    },
+    computed: {
+      value: state => state.val,
+      double: function () {
+        return this.value * 2;
+      },
+    },
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+  });
+
+  it('Should use own getters', () => {
+    function App() {
+      const store = useSelfRefStore();
+
+      return (
+        <div>
+          <p id={RESULT_ID}>{store.double}</p>
+          <button onClick={store.increaseVal} id={BUTTON_ID}>
+            increase value
+          </button>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('4');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('6');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('10');
+  });
+
+  it('should access other stores', () => {
+    const useOtherStore = createStore({
+      state: {},
+      actions: {
+        doIncreaseVal: () => useSelfRefStore().increaseVal(),
+      },
+      computed: {
+        selfRefStoreValue: () => useSelfRefStore().value,
+      },
+    });
+
+    function App() {
+      const store = useOtherStore();
+
+      return (
+        <div>
+          <p id={RESULT_ID}>{store.selfRefStoreValue}</p>
+          <button onClick={store.doIncreaseVal} id={BUTTON_ID}>
+            increase value in other store
+          </button>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('5');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('9');
+  });
+
+  it('should use parametric getters', () => {
+    const useArrayStore = createStore({
+      state: {
+        items: ['a', 'b', 'c'],
+      },
+      actions: {
+        setItem: (state, index, value) => (state.items[index] = value),
+      },
+      computed: {
+        getItem: state => index => state.items[index],
+      },
+    });
+
+    function App() {
+      const store = useArrayStore();
+
+      return (
+        <div>
+          <p id={RESULT_ID}>{store.getItem(0) + store.getItem(1) + store.getItem(2)}</p>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              store.setItem(0, 'd');
+              store.setItem(1, 'e');
+              store.setItem(2, 'f');
+            }}
+          >
+            change
+          </button>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('abc');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('def');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/reset.js b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/reset.js
new file mode 100644
index 00000000..828a856e
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/reset.js
@@ -0,0 +1,104 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { createStore } from '../../../../src/inulax/store/StoreHandler';
+import { triggerClickEvent } from '../../jest/commonComponents';
+
+const { unmountComponentAtNode } = Inula;
+
+describe('Reset', () => {
+  it('RESET NOT IMPLEMENTED', async () => {
+    // console.log('reset functionality is not yet implemented')
+    expect(true).toBe(true);
+  });
+  return;
+
+  let container = null;
+
+  const BUTTON_ID = 'btn';
+  const RESET_ID = 'reset';
+  const RESULT_ID = 'result';
+
+  const useCounter = createStore({
+    state: {
+      counter: 0,
+    },
+    actions: {
+      increment: function (state) {
+        state.counter++;
+      },
+    },
+    computed: {},
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  it('Should reset to default state', async () => {
+    function App() {
+      const store = useCounter();
+
+      return (
+        <div>
+          <p id={RESULT_ID}>{store.$s.counter}</p>
+          <button onClick={store.increment} id={BUTTON_ID}>
+            add
+          </button>
+          <button
+            onClick={() => {
+              store.$reset();
+            }}
+            id={RESET_ID}
+          >
+            reset
+          </button>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID).innerHTML).toBe('2');
+
+    Inula.act(() => {
+      triggerClickEvent(container, RESET_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID).innerHTML).toBe('0');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+
+    expect(document.getElementById(RESULT_ID).innerHTML).toBe('1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/store.ts b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/store.ts
new file mode 100644
index 00000000..be33234c
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/store.ts
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+import { createStore } from '../../../../src/inulax/store/StoreHandler';
+
+export const useLogStore = createStore({
+  id: 'logStore', // you do not need to specify ID for local store
+  state: {
+    logs: ['log'],
+  },
+  actions: {
+    addLog: (state, data) => {
+      state.logs.push(data);
+    },
+    removeLog: (state, index) => {
+      state.logs.splice(index, 1);
+    },
+    cleanLog: state => {
+      state.logs.length = 0;
+    },
+  },
+  computed: {
+    length: state => {
+      return state.logs.length;
+    },
+    log: state => index => state.logs[index],
+  },
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/utils.test.js b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/utils.test.js
new file mode 100644
index 00000000..1d544784
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/utils.test.js
@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+import { resolveMutation } from '../../../../src/inulax/CommonUtils';
+
+describe('Mutation resolve', () => {
+  it('should resolve mutation different types', () => {
+    const mutation = resolveMutation(null, 42);
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.from).toBe(null);
+    expect(mutation.to).toBe(42);
+  });
+
+  it('should resolve mutation same type types, different values', () => {
+    const mutation = resolveMutation(13, 42);
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.from).toBe(13);
+    expect(mutation.to).toBe(42);
+  });
+
+  it('should resolve mutation same type types, same values', () => {
+    const mutation = resolveMutation(42, 42);
+
+    expect(mutation.mutation).toBe(false);
+    expect(Object.keys(mutation).length).toBe(1);
+  });
+
+  it('should resolve mutation same type types, same objects', () => {
+    const mutation = resolveMutation({ a: { b: { c: 1 } } }, { a: { b: { c: 1 } } });
+
+    expect(mutation.mutation).toBe(false);
+  });
+
+  it('should resolve mutation same type types, same array', () => {
+    const mutation = resolveMutation([1, 2, 3, 4, 5], [1, 2, 3, 4, 5]);
+
+    expect(mutation.mutation).toBe(false);
+  });
+
+  it('should resolve mutation same type types, longer array', () => {
+    const mutation = resolveMutation([1, 2, 3, 4, 5], [1, 2, 3, 4, 5, 6]);
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.items[5].mutation).toBe(true);
+    expect(mutation.items[5].to).toBe(6);
+  });
+
+  it('should resolve mutation same type types, shorter array', () => {
+    const mutation = resolveMutation([1, 2, 3, 4, 5], [1, 2, 3, 4]);
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.items[4].mutation).toBe(true);
+    expect(mutation.items[4].from).toBe(5);
+  });
+
+  it('should resolve mutation same type types, changed array', () => {
+    const mutation = resolveMutation([1, 2, 3, 4, 5], [1, 2, 3, 4, 'a']);
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.items[4].mutation).toBe(true);
+    expect(mutation.items[4].from).toBe(5);
+    expect(mutation.items[4].to).toBe('a');
+  });
+
+  it('should resolve mutation same type types, same object', () => {
+    const mutation = resolveMutation({ a: 1, b: 2 }, { a: 1, b: 2 });
+
+    expect(mutation.mutation).toBe(false);
+  });
+
+  it('should resolve mutation same type types, changed object', () => {
+    const mutation = resolveMutation({ a: 1, b: 2, c: 3 }, { a: 1, c: 2 });
+
+    expect(mutation.mutation).toBe(true);
+    expect(mutation.attributes.a.mutation).toBe(false);
+    expect(mutation.attributes.b.mutation).toBe(true);
+    expect(mutation.attributes.b.from).toBe(2);
+    expect(mutation.attributes.c.to).toBe(2);
+  });
+});
+
+describe('Mutation collections', () => {
+  it('should resolve mutation of two sets', () => {
+    const values = [{ a: 1 }, { b: 2 }, { c: 3 }];
+
+    const source = new Set([values[0], values[1], values[2]]);
+
+    const target = new Set([values[0], values[1]]);
+
+    const mutation = resolveMutation(source, target);
+
+    expect(mutation.mutation).toBe(true);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/watch.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/watch.test.tsx
new file mode 100644
index 00000000..f63c2ff3
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/StoreFunctionality/watch.test.tsx
@@ -0,0 +1,145 @@
+/*
+ * 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.
+ */
+
+import { createStore } from '../../../../src/index';
+import { watch } from '../../../../src/index';
+
+describe('watch', () => {
+  it('shouhld watch primitive state variable', async () => {
+    const useStore = createStore({
+      state: {
+        variable: 'x',
+      },
+      actions: {
+        change: state => (state.variable = 'a'),
+      },
+    });
+
+    const store = useStore();
+    let counter = 0;
+
+    watch(store.$s, state => {
+      counter++;
+      expect(state.variable).toBe('a');
+    });
+
+    store.change();
+
+    expect(counter).toBe(1);
+  });
+  it('shouhld watch object variable', async () => {
+    const useStore = createStore({
+      state: {
+        variable: 'x',
+      },
+      actions: {
+        change: state => (state.variable = 'a'),
+      },
+    });
+
+    const store = useStore();
+    let counter = 0;
+
+    store.$s.watch('variable', () => {
+      counter++;
+    });
+
+    store.change();
+
+    expect(counter).toBe(1);
+  });
+
+  it('shouhld watch array item', async () => {
+    const useStore = createStore({
+      state: {
+        arr: ['x'],
+      },
+      actions: {
+        change: state => (state.arr[0] = 'a'),
+      },
+    });
+
+    const store = useStore();
+    let counter = 0;
+
+    store.arr.watch('0', () => {
+      counter++;
+    });
+
+    store.change();
+
+    expect(counter).toBe(1);
+  });
+
+  it('shouhld watch collection item', async () => {
+    const useStore = createStore({
+      state: {
+        collection: new Map([['a', 'a']]),
+      },
+      actions: {
+        change: state => state.collection.set('a', 'x'),
+      },
+    });
+
+    const store = useStore();
+    let counter = 0;
+
+    store.collection.watch('a', () => {
+      counter++;
+    });
+
+    store.change();
+
+    expect(counter).toBe(1);
+  });
+
+  it('should watch multiple variables independedntly', async () => {
+    const useStore = createStore({
+      state: {
+        bool1: true,
+        bool2: false,
+      },
+      actions: {
+        toggle1: state => (state.bool1 = !state.bool1),
+        toggle2: state => (state.bool2 = !state.bool2),
+      },
+    });
+
+    let counter1 = 0;
+    let counterAll = 0;
+    const store = useStore();
+
+    watch(store.$s, () => {
+      counterAll++;
+    });
+
+    store.$s.watch('bool1', () => {
+      counter1++;
+    });
+
+    store.toggle1();
+    store.toggle1();
+
+    store.toggle2();
+
+    store.toggle1();
+
+    store.toggle2();
+    store.toggle2();
+
+    expect(counter1).toBe(3);
+    expect(counterAll).toBe(6);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapter.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapter.test.tsx
new file mode 100644
index 00000000..109ccbc2
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapter.test.tsx
@@ -0,0 +1,234 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import {
+  createStore,
+  applyMiddleware,
+  combineReducers,
+  bindActionCreators,
+} from '../../../../src/inulax/adapters/redux';
+import { describe, it, expect } from '@jest/globals';
+
+describe('Redux adapter', () => {
+  it('should use getState()', async () => {
+    const reduxStore = createStore((state, action) => {
+      return state;
+    }, 0);
+
+    expect(reduxStore.getState()).toBe(0);
+  });
+
+  it('Should use default state, dispatch action and update state', async () => {
+    const reduxStore = createStore((state, action) => {
+      switch (action.type) {
+        case 'ADD':
+          return { counter: state.counter + 1 };
+        default:
+          return { counter: 0 };
+      }
+    });
+
+    expect(reduxStore.getState().counter).toBe(0);
+
+    reduxStore.dispatch({ type: 'ADD' });
+
+    expect(reduxStore.getState().counter).toBe(1);
+  });
+
+  it('Should attach and detach listeners', async () => {
+    let counter = 0;
+    const reduxStore = createStore((state = 0, action) => {
+      switch (action.type) {
+        case 'ADD':
+          return state + 1;
+        default:
+          return state;
+      }
+    });
+
+    reduxStore.dispatch({ type: 'ADD' });
+    expect(counter).toBe(0);
+    expect(reduxStore.getState()).toBe(1);
+    const unsubscribe = reduxStore.subscribe(() => {
+      counter++;
+    });
+    reduxStore.dispatch({ type: 'ADD' });
+    reduxStore.dispatch({ type: 'ADD' });
+    expect(counter).toBe(2);
+    expect(reduxStore.getState()).toBe(3);
+    unsubscribe();
+    reduxStore.dispatch({ type: 'ADD' });
+    reduxStore.dispatch({ type: 'ADD' });
+    expect(counter).toBe(2);
+    expect(reduxStore.getState()).toBe(5);
+  });
+
+  it('Should bind action creators', async () => {
+    const addTodo = text => {
+      return {
+        type: 'ADD_TODO',
+        text,
+      };
+    };
+
+    const reduxStore = createStore((state = [], action) => {
+      if (action.type === 'ADD_TODO') {
+        return [...state, action.text];
+      }
+      return state;
+    });
+
+    const actions = bindActionCreators({ addTodo }, reduxStore.dispatch);
+
+    actions.addTodo('todo');
+
+    expect(reduxStore.getState()[0]).toBe('todo');
+  });
+
+  it('Should replace reducer', async () => {
+    const reduxStore = createStore((state, action) => {
+      switch (action.type) {
+        case 'ADD':
+          return { counter: state.counter + 1 };
+        default:
+          return { counter: 0 };
+      }
+    });
+
+    reduxStore.dispatch({ type: 'ADD' });
+
+    expect(reduxStore.getState().counter).toBe(1);
+
+    reduxStore.replaceReducer((state, action) => {
+      switch (action.type) {
+        case 'SUB':
+          return { counter: state.counter - 1 };
+        default:
+          return { counter: 0 };
+      }
+    });
+
+    reduxStore.dispatch({ type: 'SUB' });
+
+    expect(reduxStore.getState().counter).toBe(0);
+  });
+
+  it('Should combine reducers', async () => {
+    const booleanReducer = (state = false, action) => {
+      switch (action.type) {
+        case 'TOGGLE':
+          return !state;
+        default:
+          return state;
+      }
+    };
+
+    const addReducer = (state = 0, action) => {
+      switch (action.type) {
+        case 'ADD':
+          return state + 1;
+        default:
+          return state;
+      }
+    };
+
+    const reduxStore = createStore(combineReducers({ check: booleanReducer, counter: addReducer }));
+
+    expect(reduxStore.getState().counter).toBe(0);
+    expect(reduxStore.getState().check).toBe(false);
+
+    reduxStore.dispatch({ type: 'ADD' });
+    reduxStore.dispatch({ type: 'TOGGLE' });
+
+    expect(reduxStore.getState().counter).toBe(1);
+    expect(reduxStore.getState().check).toBe(true);
+  });
+
+  it('Should apply enhancers', async () => {
+    let counter = 0;
+    let middlewareCallList: string[] = [];
+
+    const callCounter = store => next => action => {
+      middlewareCallList.push('callCounter');
+      counter++;
+      let result = next(action);
+      return result;
+    };
+
+    const reduxStore = createStore(
+      (state, action) => {
+        switch (action.type) {
+          case 'toggle':
+            return {
+              check: !state.check,
+            };
+          default:
+            return state;
+        }
+      },
+      { check: false },
+      applyMiddleware(callCounter)
+    );
+
+    reduxStore.dispatch({ type: 'toggle' });
+    reduxStore.dispatch({ type: 'toggle' });
+
+    expect(counter).toBe(3); // NOTE: first action is always store initialization
+  });
+
+  it('Should apply multiple enhancers', async () => {
+    let counter = 0;
+    let lastAction = '';
+    let middlewareCallList: string[] = [];
+
+    const callCounter = store => next => action => {
+      middlewareCallList.push('callCounter');
+      counter++;
+      let result = next(action);
+      return result;
+    };
+
+    const lastFunctionStorage = store => next => action => {
+      middlewareCallList.push('lastFunctionStorage');
+      lastAction = action.type;
+      let result = next(action);
+      return result;
+    };
+
+    const reduxStore = createStore(
+      (state, action) => {
+        switch (action.type) {
+          case 'toggle':
+            return {
+              check: !state.check,
+            };
+          default:
+            return state;
+        }
+      },
+      { check: false },
+      applyMiddleware(callCounter, lastFunctionStorage)
+    );
+
+    reduxStore.dispatch({ type: 'toggle' });
+
+    expect(counter).toBe(2); // NOTE: first action is always store initialization
+    expect(lastAction).toBe('toggle');
+    expect(middlewareCallList[0]).toBe('callCounter');
+    expect(middlewareCallList[1]).toBe('lastFunctionStorage');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapterThunk.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapterThunk.test.tsx
new file mode 100644
index 00000000..559e159f
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxAdapterThunk.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import { createStore, applyMiddleware, thunk } from '../../../../src/inulax/adapters/redux';
+import { describe, it, expect } from '@jest/globals';
+
+describe('Redux thunk', () => {
+  it('should use apply thunk middleware', async () => {
+    const MAX_TODOS = 5;
+
+    function addTodosIfAllowed(todoText) {
+      return (dispatch, getState) => {
+        const state = getState();
+
+        if (state.todos.length < MAX_TODOS) {
+          dispatch({ type: 'ADD_TODO', text: todoText });
+        }
+      };
+    }
+
+    const todoStore = createStore(
+      (state = { todos: [] }, action) => {
+        if (action.type === 'ADD_TODO') {
+          return { todos: state.todos?.concat(action.text) };
+        }
+        return state;
+      },
+      null,
+      applyMiddleware(thunk)
+    );
+
+    for (let i = 0; i < 10; i++) {
+      //TODO: resolve thunk problems
+      (todoStore.dispatch as unknown as (delayedAction: (dispatch, getState) => void) => void)(
+        addTodosIfAllowed('todo no.' + i)
+      );
+    }
+
+    expect(todoStore.getState().todos.length).toBe(5);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxReactAdapter.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxReactAdapter.test.tsx
new file mode 100644
index 00000000..9c284bd3
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/ReduxReactAdapter.test.tsx
@@ -0,0 +1,378 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import * as Inula from '../../../../src/index';
+import {
+  batch,
+  connect,
+  createStore,
+  Provider,
+  useDispatch,
+  useSelector,
+  useStore,
+  createSelectorHook,
+  createDispatchHook,
+} from '../../../../src/inulax/adapters/redux';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { describe, it, beforeEach, afterEach, expect } from '@jest/globals';
+import { ReduxStoreHandler } from '../../../../src/inulax/adapters/redux';
+
+const BUTTON = 'button';
+const BUTTON2 = 'button2';
+const RESULT = 'result';
+const CONTAINER = 'container';
+
+function getE(id): HTMLElement {
+  return document.getElementById(id) || document.body;
+}
+
+describe('Redux/React binding adapter', () => {
+  beforeEach(() => {
+    const container = document.createElement('div');
+    container.id = CONTAINER;
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(getE(CONTAINER));
+  });
+
+  it('Should create provider context', async () => {
+    const reduxStore = createStore((state = 'state', action) => state);
+
+    const Child = () => {
+      const store = useStore() as unknown as ReduxStoreHandler;
+      return <div id={RESULT}>{store.getState()}</div>;
+    };
+
+    const Wrapper = () => {
+      return (
+        <Provider store={reduxStore}>
+          <Child />
+        </Provider>
+      );
+    };
+
+    Inula.render(<Wrapper />, getE(CONTAINER));
+
+    expect(getE(RESULT).innerHTML).toBe('state');
+  });
+
+  it('Should use dispatch', async () => {
+    const reduxStore = createStore((state = 0, action) => {
+      if (action.type === 'ADD') return state + 1;
+      return state;
+    });
+
+    const Child = () => {
+      const store = useStore() as unknown as ReduxStoreHandler;
+      const dispatch = useDispatch();
+      return (
+        <div>
+          <p id={RESULT}>{store.getState()}</p>
+          <button
+            id={BUTTON}
+            onClick={() => {
+              dispatch({ type: 'ADD' });
+            }}
+          ></button>
+        </div>
+      );
+    };
+
+    const Wrapper = () => {
+      return (
+        <Provider store={reduxStore}>
+          <Child />
+        </Provider>
+      );
+    };
+
+    Inula.render(<Wrapper />, getE(CONTAINER));
+
+    expect(reduxStore.getState()).toBe(0);
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+    });
+
+    expect(reduxStore.getState()).toBe(1);
+  });
+
+  it('Should use selector', async () => {
+    const reduxStore = createStore((state = 0, action) => {
+      if (action.type === 'ADD') return state + 1;
+      return state;
+    });
+
+    const Child = () => {
+      const count = useSelector(state => state);
+      const dispatch = useDispatch();
+      return (
+        <div>
+          <p id={RESULT}>{count}</p>
+          <button
+            id={BUTTON}
+            onClick={() => {
+              dispatch({ type: 'ADD' });
+            }}
+          >
+            click
+          </button>
+        </div>
+      );
+    };
+
+    const Wrapper = () => {
+      return (
+        <Provider store={reduxStore}>
+          <Child />
+        </Provider>
+      );
+    };
+
+    Inula.render(<Wrapper />, getE(CONTAINER));
+
+    expect(getE(RESULT).innerHTML).toBe('0');
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+    });
+
+    expect(getE(RESULT).innerHTML).toBe('2');
+  });
+
+  it('Should use connect', async () => {
+    const reduxStore = createStore(
+      (state, action) => {
+        switch (action.type) {
+          case 'INCREMENT':
+            return {
+              ...state,
+              value: state.negative ? state.value - action.amount : state.value + action.amount,
+            };
+          case 'TOGGLE':
+            return {
+              ...state,
+              negative: !state.negative,
+            };
+          default:
+            return state;
+        }
+      },
+      { negative: false, value: 0 }
+    );
+
+    const Child = connect(
+      (state, ownProps) => {
+        // map state to props
+        return { ...state, ...ownProps };
+      },
+      (dispatch, ownProps) => {
+        // map dispatch to props
+        return {
+          // @ts-ignore
+          increment: () => dispatch({ type: 'INCREMENT', amount: ownProps?.amount }),
+        };
+      },
+      (stateProps, dispatchProps, ownProps) => {
+        //merge props
+        return { stateProps, dispatchProps, ownProps };
+      },
+      {}
+    )(props => {
+      const n = props.stateProps.negative;
+      return (
+        <div>
+          <div id={RESULT}>
+            {n ? '-' : '+'}
+            {props.stateProps.value}
+          </div>
+          <button
+            id={BUTTON}
+            onClick={() => {
+              props.dispatchProps.increment();
+            }}
+          >
+            add {props.ownProps.amount}
+          </button>
+        </div>
+      );
+    });
+
+    const Wrapper = () => {
+      //@ts-ignore
+      const [amount, setAmount] = Inula.useState(5);
+      return (
+        <Provider store={reduxStore}>
+          <Child amount={amount} />
+          <button
+            id={BUTTON2}
+            onClick={() => {
+              setAmount(3);
+            }}
+          >
+            change amount
+          </button>
+        </Provider>
+      );
+    };
+
+    Inula.render(<Wrapper />, getE(CONTAINER));
+
+    expect(getE(RESULT).innerHTML).toBe('+0');
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+    });
+
+    expect(getE(RESULT).innerHTML).toBe('+5');
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON2);
+    });
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+    });
+
+    expect(getE(RESULT).innerHTML).toBe('+8');
+  });
+
+  it('Should batch dispatches', async () => {
+    const reduxStore = createStore((state = 0, action) => {
+      if (action.type == 'ADD') return state + 1;
+      return state;
+    });
+
+    let renderCounter = 0;
+
+    function Counter() {
+      renderCounter++;
+
+      const value = useSelector(state => state);
+      const dispatch = useDispatch();
+
+      return (
+        <div>
+          <p id={RESULT}>{value}</p>
+          <button
+            id={BUTTON}
+            onClick={() => {
+              batch(() => {
+                for (let i = 0; i < 10; i++) {
+                  dispatch({ type: 'ADD' });
+                }
+              });
+            }}
+          ></button>
+        </div>
+      );
+    }
+
+    Inula.render(
+      <Provider store={reduxStore}>
+        <Counter />
+      </Provider>,
+      getE(CONTAINER)
+    );
+
+    expect(getE(RESULT).innerHTML).toBe('0');
+    expect(renderCounter).toBe(1);
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+    });
+
+    expect(getE(RESULT).innerHTML).toBe('10');
+    expect(renderCounter).toBe(2);
+  });
+
+  it('Should use multiple contexts', async () => {
+    const counterStore = createStore((state = 0, action) => {
+      if (action.type === 'ADD') return state + 1;
+      return state;
+    });
+
+    const toggleStore = createStore((state = false, action) => {
+      if (action.type === 'TOGGLE') return !state;
+      return state;
+    });
+
+    const counterContext = Inula.createContext();
+    const toggleContext = Inula.createContext();
+
+    function Counter() {
+      const count = createSelectorHook(counterContext)();
+      const dispatch = createDispatchHook(counterContext)();
+
+      return (
+        <button
+          id={BUTTON}
+          onClick={() => {
+            dispatch({ type: 'ADD' });
+          }}
+        >
+          {count}
+        </button>
+      );
+    }
+
+    function Toggle() {
+      const check = createSelectorHook(toggleContext)();
+      const dispatch = createDispatchHook(toggleContext)();
+
+      return (
+        <button
+          id={BUTTON2}
+          onClick={() => {
+            dispatch({ type: 'TOGGLE' });
+          }}
+        >
+          {check ? 'true' : 'false'}
+        </button>
+      );
+    }
+
+    function Wrapper() {
+      return (
+        <div>
+          <Provider store={counterStore} context={counterContext}>
+            <Counter />
+          </Provider>
+
+          <Provider store={toggleStore} context={toggleContext}>
+            <Toggle />
+          </Provider>
+        </div>
+      );
+    }
+
+    Inula.render(<Wrapper />, getE(CONTAINER));
+
+    expect(getE(BUTTON).innerHTML).toBe('0');
+    expect(getE(BUTTON2).innerHTML).toBe('false');
+
+    Inula.act(() => {
+      triggerClickEvent(getE(CONTAINER), BUTTON);
+      triggerClickEvent(getE(CONTAINER), BUTTON2);
+    });
+
+    expect(getE(BUTTON).innerHTML).toBe('1');
+    expect(getE(BUTTON2).innerHTML).toBe('true');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/connectTest.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/connectTest.tsx
new file mode 100644
index 00000000..408de658
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/adapters/connectTest.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+import { createElement } from '../../../../src/external/JSXElement';
+import { createDomTextVNode } from '../../../../src/renderer/vnode/VNodeCreator';
+import { createStore } from '../../../../src/inulax/adapters/redux';
+import { connect } from '../../../../src/inulax/adapters/reduxReact';
+
+createStore((state: number = 0, action): number => {
+  if (action.type === 'add') return state + 1;
+  return 0;
+});
+
+type WrappedButtonProps = { add: () => void; count: number; text: string };
+
+function Button(props: WrappedButtonProps) {
+  const { add, count, text } = props;
+  return createElement(
+    'button',
+    {
+      onClick: add,
+    },
+    createDomTextVNode(text),
+    createDomTextVNode(': '),
+    createDomTextVNode(count)
+  );
+}
+
+const connector = connect(
+  state => ({ count: state }),
+  dispatch => ({
+    add: (): void => {
+      dispatch({ type: 'add' });
+    },
+  }),
+  (stateProps, dispatchProps, ownProps: { text: string }) => ({
+    add: dispatchProps.add,
+    count: stateProps.count,
+    text: ownProps.text,
+  })
+);
+
+const ConnectedButton = connector(Button);
+
+function App() {
+  return createElement('div', {}, createElement(ConnectedButton, { text: 'click' }));
+}
+
+export default App;
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassException.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassException.test.tsx
new file mode 100644
index 00000000..eb198e0d
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassException.test.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { Text, triggerClickEvent } from '../../jest/commonComponents';
+import { getObserver } from '../../../../src/inulax/proxy/ProxyHandler';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+describe('测试 Class VNode 清除时，对引用清除', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  let globalState = {
+    name: 'bing dun dun',
+    isWin: true,
+    isShow: true,
+  };
+
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    createStore({
+      id: 'user',
+      state: globalState,
+      actions: {
+        setWin: (state, val) => {
+          state.isWin = val;
+        },
+        hide: state => {
+          state.isShow = false;
+        },
+        updateName: (state, val) => {
+          state.name = val;
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  it('test observer.clearByNode', () => {
+    class Child extends Inula.Component {
+      userStore = useStore('user');
+
+      render() {
+        if (!this.userStore) return <div />;
+        // Do not modify the store data in the render method. Otherwise, an infinite loop may occur.
+        this.userStore.updateName(this.userStore.name === 'bing dun dun' ? 'huo dun dun' : 'bing dun dun');
+
+        return (
+          <div>
+            <Text id={'name'} text={`name: ${this.userStore.name}`} />
+            <Text id={'isWin'} text={`isWin: ${this.userStore.isWin}`} />
+          </div>
+        );
+      }
+    }
+
+    expect(() => {
+      Inula.render(<Child />, container);
+    }).toThrow(
+      'The number of updates exceeds the upper limit 50.\n' +
+        '      A component maybe repeatedly invokes setState on componentWillUpdate or componentDidUpdate.'
+    );
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateArray.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateArray.test.tsx
new file mode 100644
index 00000000..7dd050c3
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateArray.test.tsx
@@ -0,0 +1,248 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+type Person = { name: string; age: number };
+
+const persons: Person[] = [
+  { name: 'p1', age: 1 },
+  { name: 'p2', age: 2 },
+];
+let useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: persons,
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.push(person);
+    },
+    delOnePerson: state => {
+      state.persons.pop();
+    },
+    clearPersons: state => {
+      state.persons = [];
+    },
+  },
+});
+
+describe('在Class组件中，测试store中的Array', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+  class Parent extends Inula.Component {
+    userStore = useUserStore();
+    props: {
+      children: any[];
+    };
+
+    constructor(props) {
+      super(props);
+      this.props = props;
+    }
+
+    addOnePerson = () => {
+      this.userStore.addOnePerson(newPerson);
+    };
+
+    delOnePerson = () => {
+      this.userStore.delOnePerson();
+    };
+
+    render() {
+      return (
+        <div>
+          <button id={'addBtn'} onClick={this.addOnePerson}>
+            add person
+          </button>
+          <button id={'delBtn'} onClick={this.delOnePerson}>
+            delete person
+          </button>
+          <div>{this.props.children}</div>
+        </div>
+      );
+    }
+  }
+
+  it('测试Array方法: push()、pop()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        return (
+          <div>
+            <Text id={'hasPerson'} text={`has new person: ${this.userStore.persons.length}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 2');
+    // 在Array中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 3');
+
+    // 在Array中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: 2');
+  });
+
+  it('测试Array方法: entries()、push()、shift()、unshift、直接赋值', () => {
+    let globalStore = useUserStore();
+
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      constructor(props) {
+        super(props);
+        globalStore = this.userStore;
+      }
+
+      render() {
+        const nameList: string[] = [];
+        const entries = this.userStore.$s.persons?.entries();
+        if (entries) {
+          for (const entry of entries) {
+            nameList.push(entry[1].name);
+          }
+        }
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // push
+    globalStore?.$s.persons.push(newPerson);
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // shift
+    // @ts-ignore TODO:why has this function argument?
+    globalStore.$s.persons.shift({ name: 'p0', age: 0 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3');
+
+    // 赋值[2]
+    globalStore.$s.persons[2] = { name: 'p4', age: 4 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p4');
+
+    // 重新赋值[2]
+    globalStore.$s.persons[2] = { name: 'p5', age: 5 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p5');
+
+    // unshift
+    globalStore.$s.persons.unshift({ name: 'p1', age: 1 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3 p5');
+
+    // 重新赋值 []
+    globalStore.$s.persons = [];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+
+    // 重新赋值 [{ name: 'p1', age: 1 }]
+    globalStore.$s.persons = [{ name: 'p1', age: 1 }];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1');
+  });
+
+  it('测试Array方法: forEach()', () => {
+    let globalStore = useUserStore();
+    globalStore.$s.persons.push({ name: 'p2', age: 2 });
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      constructor(props) {
+        super(props);
+        globalStore = this.userStore;
+      }
+
+      render() {
+        const nameList: string[] = [];
+        this.userStore.$s.persons.forEach((per: Person) => {
+          nameList.push(per.name);
+        });
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // push
+    globalStore.$s.persons.push(newPerson);
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // shift
+    // @ts-ignore TODO:why has this function argument?
+    globalStore.$s.persons.shift({ name: 'p0', age: 0 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3');
+
+    // 赋值[2]
+    globalStore.$s.persons[2] = { name: 'p4', age: 4 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p4');
+
+    // 重新赋值[2]
+    globalStore.$s.persons[2] = { name: 'p5', age: 5 };
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p2 p3 p5');
+
+    // unshift
+    globalStore.$s.persons.unshift({ name: 'p1', age: 1 });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3 p5');
+
+    // 重新赋值 []
+    globalStore.$s.persons = [];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+
+    // 重新赋值 [{ name: 'p1', age: 1 }]
+    globalStore.$s.persons = [{ name: 'p1', age: 1 }];
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateMap.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateMap.test.tsx
new file mode 100644
index 00000000..77ec76f2
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/class/ClassStateMap.test.tsx
@@ -0,0 +1,370 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const useUserStore = createStore({
+  id: 'user',
+  state: {
+    type: 'bing dun dun',
+    persons: new Map([
+      ['p1', 1],
+      ['p2', 2],
+    ]),
+  },
+  actions: {
+    addOnePerson: (state, person) => {
+      state.persons.set(person.name, person.age);
+    },
+    delOnePerson: (state, person) => {
+      state.persons.delete(person.name);
+    },
+    clearPersons: state => {
+      state.persons.clear();
+    },
+    reset: state => {
+      state.persons = new Map([
+        ['p1', 1],
+        ['p2', 2],
+      ]);
+    },
+  },
+});
+
+describe('在Class组件中，测试store中的Map', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    useUserStore().reset();
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  const newPerson = { name: 'p3', age: 3 };
+
+  class Parent extends Inula.Component {
+    userStore = useUserStore();
+    props = { children: [] };
+
+    constructor(props) {
+      super(props);
+      this.props = props;
+    }
+
+    addOnePerson = () => {
+      this.userStore.addOnePerson(newPerson);
+    };
+    delOnePerson = () => {
+      this.userStore.delOnePerson(newPerson);
+    };
+    clearPersons = () => {
+      this.userStore.clearPersons();
+    };
+
+    render() {
+      return (
+        <div>
+          <button id={'addBtn'} onClick={this.addOnePerson}>
+            add person
+          </button>
+          <button id={'delBtn'} onClick={this.delOnePerson}>
+            delete person
+          </button>
+          <button id={'clearBtn'} onClick={this.clearPersons}>
+            clear persons
+          </button>
+          <div>{this.props.children}</div>
+        </div>
+      );
+    }
+  }
+
+  it('测试Map方法: set()、delete()、clear()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        return (
+          <div>
+            <Text id={'size'} text={`persons number: ${this.userStore.$s.persons.size}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#size')?.innerHTML).toBe('persons number: 0');
+  });
+
+  it('测试Map方法: keys()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        const nameList: string[] = [];
+        const keys = this.userStore.$s.persons.keys();
+        for (const key of keys) {
+          nameList.push(key);
+        }
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: values()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        const ageList: number[] = [];
+        const values = this.userStore.$s.persons.values();
+        for (const val of values) {
+          ageList.push(val);
+        }
+
+        return (
+          <div>
+            <Text id={'ageList'} text={`age list: ${ageList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2 3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: 1 2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#ageList')?.innerHTML).toBe('age list: ');
+  });
+
+  it('测试Map方法: entries()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        const nameList: string[] = [];
+        const entries = this.userStore.$s.persons.entries();
+        for (const entry of entries) {
+          nameList.push(entry[0]);
+        }
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: forEach()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        const nameList: string[] = [];
+        this.userStore.$s.persons.forEach((val, key) => {
+          nameList.push(key);
+        });
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+
+  it('测试Map方法: has()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        return (
+          <div>
+            <Text id={'hasPerson'} text={`has new person: ${this.userStore.$s.persons.has(newPerson.name)}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: false');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#hasPerson')?.innerHTML).toBe('has new person: true');
+  });
+
+  it('测试Map方法: for of()', () => {
+    class Child extends Inula.Component {
+      userStore = useUserStore();
+
+      render() {
+        const nameList: string[] = [];
+        for (const per of this.userStore.$s.persons) {
+          nameList.push(per[0]);
+        }
+
+        return (
+          <div>
+            <Text id={'nameList'} text={`name list: ${nameList.join(' ')}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App parent={Parent} child={Child} />, container);
+
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+    // 在Map中增加一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'addBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2 p3');
+
+    // 在Map中删除一个对象
+    Inula.act(() => {
+      triggerClickEvent(container, 'delBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: p1 p2');
+
+    // clear Map
+    Inula.act(() => {
+      triggerClickEvent(container, 'clearBtn');
+    });
+    expect(container?.querySelector('#nameList')?.innerHTML).toBe('name list: ');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/ClassVNodeClear.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/ClassVNodeClear.test.tsx
new file mode 100644
index 00000000..66a5c1de
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/ClassVNodeClear.test.tsx
@@ -0,0 +1,137 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { Text, triggerClickEvent } from '../../jest/commonComponents';
+import { getObserver } from '../../../../src/inulax/proxy/ProxyHandler';
+import { describe, it, beforeEach, afterEach, expect } from '@jest/globals';
+
+describe('测试 Class VNode 清除时，对引用清除', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  let globalState = {
+    name: 'bing dun dun',
+    isWin: true,
+    isShow: true,
+  };
+
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    createStore({
+      id: 'user',
+      state: globalState,
+      actions: {
+        setWin: (state, val) => {
+          state.isWin = val;
+        },
+        hide: state => {
+          state.isShow = false;
+        },
+        updateName: (state, val) => {
+          state.name = val;
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  it('test observer.clearByNode', () => {
+    class App extends Inula.Component {
+      userStore = useStore('user');
+
+      render() {
+        return (
+          <div>
+            <button id={'hideBtn'} onClick={this.userStore?.hide}>
+              toggle
+            </button>
+            {this.userStore?.isShow && <Parent />}
+          </div>
+        );
+      }
+    }
+
+    class Parent extends Inula.Component {
+      userStore = useStore('user');
+
+      setWin = () => {
+        this.userStore?.setWin(!this.userStore?.isWin);
+      };
+
+      render() {
+        return (
+          <div>
+            <button id={'toggleBtn'} onClick={this.setWin}>
+              toggle
+            </button>
+            {this.userStore?.isWin && <Child />}
+          </div>
+        );
+      }
+    }
+
+    class Child extends Inula.Component {
+      userStore = useStore('user');
+
+      render() {
+        // this.userStore.updateName(this.userStore.name === 'bing dun dun' ? 'huo dun dun' : 'bing dun dun');
+
+        return (
+          <div>
+            <Text id={'name'} text={`name: ${this.userStore?.name}`} />
+            <Text id={'isWin'} text={`isWin: ${this.userStore?.isWin}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App />, container);
+
+    // Parent and Child hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(2);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'toggleBtn');
+    });
+    // Parent hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(1);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'toggleBtn');
+    });
+    // Parent and Child hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(2);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'hideBtn');
+    });
+    // no component hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin')).toBe(undefined);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/FunctionVNodeClear.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/FunctionVNodeClear.test.tsx
new file mode 100644
index 00000000..e5ea1d35
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/clear/FunctionVNodeClear.test.tsx
@@ -0,0 +1,132 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../../src/index';
+import * as LogUtils from '../../jest/logUtils';
+import { clearStore, createStore, useStore } from '../../../../src/inulax/store/StoreHandler';
+import { Text, triggerClickEvent } from '../../jest/commonComponents';
+import { getObserver } from '../../../../src/inulax/proxy/ProxyHandler';
+import { describe, it, beforeEach, afterEach, expect } from '@jest/globals';
+
+describe('测试VNode清除时，对引用清除', () => {
+  const { unmountComponentAtNode } = Inula;
+  let container: HTMLElement | null = null;
+  let globalState = {
+    name: 'bing dun dun',
+    isWin: true,
+    isShow: true,
+  };
+
+  beforeEach(() => {
+    // 创建一个 DOM 元素作为渲染目标
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    createStore({
+      id: 'user',
+      state: globalState,
+      actions: {
+        setWin: (state, val) => {
+          state.isWin = val;
+        },
+        hide: state => {
+          state.isShow = false;
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    // 退出时进行清理
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+    LogUtils.clear();
+
+    clearStore('user');
+  });
+
+  it('test observer.clearByNode', () => {
+    class App extends Inula.Component {
+      userStore = useStore('user');
+
+      render() {
+        return (
+          <div>
+            <button id={'hideBtn'} onClick={this.userStore?.hide}>
+              toggle
+            </button>
+            {this.userStore?.isShow && <Parent />}
+          </div>
+        );
+      }
+    }
+
+    class Parent extends Inula.Component {
+      userStore = useStore('user');
+
+      setWin = () => {
+        this.userStore?.setWin(!this.userStore.isWin);
+      };
+
+      render() {
+        return (
+          <div>
+            <button id={'toggleBtn'} onClick={this.setWin}>
+              toggle
+            </button>
+            {this.userStore?.isWin && <Child />}
+          </div>
+        );
+      }
+    }
+
+    class Child extends Inula.Component {
+      userStore = useStore('user');
+
+      render() {
+        return (
+          <div>
+            <Text id={'name'} text={`name: ${this.userStore?.name}`} />
+            <Text id={'isWin'} text={`isWin: ${this.userStore?.isWin}`} />
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App />, container);
+
+    // Parent and Child hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(2);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'toggleBtn');
+    });
+    // Parent hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(1);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'toggleBtn');
+    });
+    // Parent and Child hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin').size).toBe(2);
+
+    Inula.act(() => {
+      triggerClickEvent(container, 'hideBtn');
+    });
+    // no component hold the isWin key
+    expect(getObserver(globalState).keyVNodes.get('isWin')).toBe(undefined);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/deepVariableObserver.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/deepVariableObserver.test.tsx
new file mode 100644
index 00000000..3853adaa
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/deepVariableObserver.test.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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.
+ */
+
+import { createStore, useStore } from '../../../../src/index';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+describe('Using deep variables', () => {
+  it('should listen to object variable change', () => {
+    let counter = 0;
+    const useTestStore = createStore({
+      state: { a: { b: { c: 1 } } },
+    });
+    const testStore = useTestStore();
+    testStore.$subscribe(() => {
+      counter++;
+    });
+
+    testStore.a.b.c = 0;
+
+    expect(counter).toBe(1);
+  });
+
+  it('should listen to deep variable change', () => {
+    let counter = 0;
+    const useTestStore = createStore({
+      state: { color: [{ a: 1 }, 255, 255] },
+    });
+    const testStore = useTestStore();
+    testStore.$subscribe(() => {
+      counter++;
+    });
+
+    for (let i = 0; i < 5; i++) {
+      testStore.color[0].a = i;
+    }
+    testStore.color = 'x';
+
+    expect(counter).toBe(6);
+  });
+
+  it('should use set', () => {
+    const useTestStore = createStore({
+      state: { data: new Set() },
+    });
+    const testStore = useTestStore();
+
+    const a = { a: true };
+
+    testStore.data.add(a);
+
+    expect(testStore.data.has(a)).toBe(true);
+
+    testStore.data.add(a);
+    testStore.data.add(a);
+    testStore.data.delete(a);
+
+    expect(testStore.data.has(a)).toBe(false);
+
+    testStore.data.add(a);
+
+    const values = Array.from(testStore.data.values());
+    expect(values.length).toBe(1);
+
+    let counter = 0;
+    testStore.$subscribe(mutation => {
+      counter++;
+    });
+
+    values.forEach(val => {
+      val.a = !val.a;
+    });
+
+    expect(testStore.data.has(a)).toBe(true);
+
+    expect(counter).toBe(1);
+  });
+
+  it('should use map', () => {
+    const useTestStore = createStore({
+      state: { data: new Map() },
+    });
+    const testStore = useTestStore();
+
+    const data = { key: { a: 1 }, value: { b: 2 } };
+
+    testStore.data.set(data.key, data.value);
+
+    const key = Array.from(testStore.data.keys())[0];
+
+    expect(testStore.data.has(key)).toBe(true);
+
+    testStore.data.set(data.key, data.value);
+    testStore.data.set(data.key, data.value);
+    testStore.data.delete(key);
+
+    expect(testStore.data.get(key)).toBe();
+
+    testStore.data.set(data.key, data.value);
+
+    const entries = Array.from(testStore.data.entries());
+    expect(entries.length).toBe(1);
+
+    let counter = 0;
+    testStore.$subscribe(mutation => {
+      counter++;
+    });
+
+    entries.forEach(([key, value]) => {
+      key.a++;
+      value.b++;
+    });
+
+    expect(counter).toBe(2);
+  });
+
+  it('should use weakSet', () => {
+    const useTestStore = createStore({
+      state: { data: new WeakSet() },
+    });
+    const testStore = useTestStore();
+
+    const a = { a: true };
+
+    testStore.data.add(a);
+
+    expect(testStore.data.has(a)).toBe(true);
+
+    testStore.data.add(a);
+    testStore.data.add(a);
+    testStore.data.delete(a);
+
+    expect(testStore.data.has(a)).toBe(false);
+
+    testStore.data.add(a);
+
+    expect(testStore.data.has(a)).toBe(true);
+  });
+
+  it('should use weakMap', () => {
+    const useTestStore = createStore({
+      state: { data: new WeakMap() },
+    });
+    const testStore = useTestStore();
+
+    const data = { key: { a: 1 }, value: { b: 2 } };
+
+    testStore.data.set(data.key, data.value);
+
+    let counter = 0;
+    testStore.$subscribe(mutation => {
+      counter++;
+    });
+
+    testStore.data.get(data.key).b++;
+
+    expect(counter).toBe(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/multipleStores.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/multipleStores.test.tsx
new file mode 100644
index 00000000..17ec7b19
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/multipleStores.test.tsx
@@ -0,0 +1,212 @@
+/*
+ * 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.
+ */
+
+//@ts-ignore
+import Inula, { createStore } from '../../../../src/index';
+import { triggerClickEvent } from '../../jest/commonComponents';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+const { unmountComponentAtNode } = Inula;
+
+const useStore1 = createStore({
+  state: { counter: 1 },
+  actions: {
+    add: state => state.counter++,
+    reset: state => (state.counter = 1),
+  },
+});
+
+const useStore2 = createStore({
+  state: { counter2: 1 },
+  actions: {
+    add2: state => state.counter2++,
+    reset: state => (state.counter2 = 1),
+  },
+});
+
+describe('Using multiple stores', () => {
+  let container: HTMLElement | null = null;
+
+  const BUTTON_ID = 'btn';
+  const BUTTON_ID2 = 'btn2';
+  const RESULT_ID = 'result';
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    useStore1().reset();
+    useStore2().reset();
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container?.remove();
+    container = null;
+  });
+
+  it('Should use multiple stores in class component', () => {
+    class App extends Inula.Component {
+      render() {
+        const { counter, add } = useStore1();
+        const { counter2, add2 } = useStore2();
+
+        return (
+          <div>
+            <button
+              id={BUTTON_ID}
+              onClick={() => {
+                add();
+              }}
+            >
+              add
+            </button>
+            <button
+              id={BUTTON_ID2}
+              onClick={() => {
+                add2();
+              }}
+            >
+              add
+            </button>
+            <p id={RESULT_ID}>
+              {counter} {counter2}
+            </p>
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('1 1');
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 1');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID2);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 2');
+  });
+
+  it('Should use use stores in cycles and multiple methods', () => {
+    interface App {
+      store: any;
+      store2: any;
+    }
+    class App extends Inula.Component {
+      constructor() {
+        super();
+        this.store = useStore1();
+        this.store2 = useStore2();
+      }
+
+      render() {
+        const { counter, add } = useStore1();
+        const store2 = useStore2();
+        const { counter2, add2 } = store2;
+
+        for (let i = 0; i < 100; i++) {
+          const { counter, add } = useStore1();
+          const store2 = useStore2();
+          const { counter2, add2 } = store2;
+        }
+
+        return (
+          <div>
+            <button
+              id={BUTTON_ID}
+              onClick={() => {
+                add();
+              }}
+            >
+              add
+            </button>
+            <button
+              id={BUTTON_ID2}
+              onClick={() => {
+                this.store2.add2();
+              }}
+            >
+              add
+            </button>
+            <p id={RESULT_ID}>
+              {counter} {counter2}
+            </p>
+          </div>
+        );
+      }
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('1 1');
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 1');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID2);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 2');
+  });
+
+  it('Should use multiple stores in function component', () => {
+    function App() {
+      const { counter, add } = useStore1();
+      const store2 = useStore2();
+      const { counter2, add2 } = store2;
+
+      return (
+        <div>
+          <button
+            id={BUTTON_ID}
+            onClick={() => {
+              add();
+            }}
+          >
+            add
+          </button>
+          <button
+            id={BUTTON_ID2}
+            onClick={() => {
+              add2();
+            }}
+          >
+            add
+          </button>
+          <p id={RESULT_ID}>
+            {counter} {counter2}
+          </p>
+        </div>
+      );
+    }
+
+    Inula.render(<App />, container);
+
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('1 1');
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 1');
+
+    Inula.act(() => {
+      triggerClickEvent(container, BUTTON_ID2);
+    });
+    expect(document.getElementById(RESULT_ID)?.innerHTML).toBe('2 2');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/proxy.test.tsx b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/proxy.test.tsx
new file mode 100644
index 00000000..43c12d82
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/HorizonXTest/edgeCases/proxy.test.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+import { createProxy } from '../../../../src/inulax/proxy/ProxyHandler';
+import { readonlyProxy } from '../../../../src/inulax/proxy/readonlyProxy';
+import { describe, beforeEach, afterEach, it, expect } from '@jest/globals';
+
+describe('Proxy', () => {
+  const arr = [];
+
+  it('Should not double wrap proxies', async () => {
+    const proxy1 = createProxy(arr);
+
+    const proxy2 = createProxy(proxy1);
+
+    expect(proxy1 === proxy2).toBe(true);
+  });
+
+  it('Should re-use existing proxy of same object', async () => {
+    const proxy1 = createProxy(arr);
+
+    const proxy2 = createProxy(arr);
+
+    expect(proxy1 === proxy2).toBe(true);
+  });
+
+  it('Readonly proxy should prevent changes', async () => {
+    const proxy1 = readonlyProxy([1]);
+
+    try {
+      proxy1.push('a');
+      expect(true).toBe(false); //we expect exception above
+    } catch (e) {
+      //expected
+    }
+
+    try {
+      proxy1[0] = null;
+      expect(true).toBe(false); //we expect exception above
+    } catch (e) {
+      //expected
+    }
+
+    try {
+      delete proxy1[0];
+      expect(true).toBe(false); //we expect exception above
+    } catch (e) {
+      //expected
+    }
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/InulaIsTest/index.test.js b/packages/inula-reactive/scripts/__tests__/InulaIsTest/index.test.js
new file mode 100644
index 00000000..e6d94933
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/InulaIsTest/index.test.js
@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+import * as Inula from '../../../src/index';
+
+function App() {
+  return <></>;
+}
+
+describe('InulaIs', () => {
+  it('should identify inula elements', () => {
+    expect(Inula.isElement(<div />)).toBe(true);
+    expect(Inula.isElement('span')).toBe(false);
+    expect(Inula.isElement(111)).toBe(false);
+    expect(Inula.isElement(false)).toBe(false);
+    expect(Inula.isElement(null)).toBe(false);
+    expect(Inula.isElement([])).toBe(false);
+    expect(Inula.isElement({})).toBe(false);
+    expect(Inula.isElement(undefined)).toBe(false);
+
+    const TestContext = Inula.createContext(false);
+    expect(Inula.isElement(<TestContext.Provider />)).toBe(true);
+    expect(Inula.isElement(<TestContext.Consumer />)).toBe(true);
+    expect(Inula.isElement(<></>)).toBe(true);
+    expect(Inula.isElement(<Inula.Suspense />)).toBe(true);
+  });
+
+  it('should identify Fragment', () => {
+    expect(Inula.isFragment(<></>)).toBe(true);
+  });
+
+  it('should identify memo component', () => {
+    const MemoComp = Inula.memo(App);
+    expect(Inula.isMemo(<MemoComp />)).toBe(true);
+  });
+
+  it('should identify forwardRef', () => {
+    const ForwardRefComp = Inula.forwardRef(App);
+    expect(Inula.isForwardRef(<ForwardRefComp />)).toBe(true);
+  });
+
+  it('should identify lazy', () => {
+    const LazyComp = Inula.lazy(() => App);
+    expect(Inula.isLazy(<LazyComp />)).toBe(true);
+  });
+
+  it('should identify portal', () => {
+    const portal = Inula.createPortal(<div />, container);
+    expect(Inula.isPortal(portal)).toBe(true);
+  });
+
+  it('should identify ContextProvider', () => {
+    const TestContext = Inula.createContext(false);
+    expect(Inula.isContextProvider(<TestContext.Provider />)).toBe(true);
+    expect(Inula.isContextProvider(<TestContext.Consumer />)).toBe(false);
+    expect(Inula.isContextConsumer(<TestContext.Provider />)).toBe(false);
+    expect(Inula.isContextConsumer(<TestContext.Consumer />)).toBe(true);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-add.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-add.test.js
new file mode 100644
index 00000000..f6a91f8b
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-add.test.js
@@ -0,0 +1,162 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useReactive, For } from '../../../../../src/index';
+import { beforeEach } from '@jest/globals';
+
+const Row = ({ item }) => {
+  return <li id={item.id} key={item.id}>{item.name}</li>;
+};
+
+let rObj;
+let ref;
+let appFn;
+let App;
+let itemFn;
+
+describe('测试 For 组件的新增', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    App = () => {
+      const _rObj = useReactive({
+        items: [
+          { id: 'id-1', name: 'p1' },
+          { id: 'id-2', name: 'p2' },
+        ],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('通过 push 在后面添加1行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 在后面添加一行
+    rObj.items.push({ id: 'id-3', name: 'p3' });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，push更新执行1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+  });
+
+  it('通过 unshift 在前面添加2行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 在前面添加2行
+    rObj.items.unshift({ id: 'id-3', name: 'p3' }, { id: 'id-4', name: 'p4' });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，unshift更新执行2次
+    expect(itemFn).toHaveBeenCalledTimes(4);
+  });
+
+  it('通过 set 在后面添加1行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 在后面添加一行
+    rObj.items.set([
+      { id: 'id-1', name: 'p1' },
+      { id: 'id-2', name: 'p2' },
+      { id: 'id-3', name: 'p3' },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，push更新执行1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+
+    let li = container.querySelector('#id-3');
+    expect(li.innerHTML).toEqual('p3');
+  });
+
+  it('For标签使用，使用push创建3000行表格数据', () => {
+    let reactiveObj;
+    const App = () => {
+      const sourceData = useReactive([]);
+      reactiveObj = sourceData;
+
+      return (
+        <div style={{ width: '100%', height: '100%', overflowY: 'auto' }}>
+          <table border='1' width='100%'>
+            <tr>
+              <th>序号</th>
+              <th>名称</th>
+              <th>年龄</th>
+              <th>性别</th>
+              <th>名族</th>
+              <th>其他</th>
+            </tr>
+            <For each={sourceData}>
+              {
+                eachItem => {
+                  return (
+                    <tr>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                      <th style={{ color: eachItem.color }}>{eachItem.value}</th>
+                    </tr>
+                  );
+                }
+              }
+            </For>
+          </table>
+        </div>
+      );
+    };
+    render(<App />, container);
+
+    // 不推荐：循环push
+    for (let i = 0; i < 2; i++) {
+      reactiveObj.push({ value: i, color: null });
+    }
+    expect(reactiveObj.get().length).toEqual(2);
+
+    let items = container.querySelectorAll('tr');
+    expect(items.length).toEqual(3);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-delete.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-delete.test.js
new file mode 100644
index 00000000..b53be008
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-delete.test.js
@@ -0,0 +1,129 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useReactive, For } from '../../../../../src/index';
+import { beforeEach } from '@jest/globals';
+
+const Row = ({ item }) => {
+  return <li id={item.id} key={item.id}>{item.name}</li>;
+};
+
+let rObj;
+let ref;
+let appFn;
+let App;
+let itemFn;
+
+describe('测试 For 组件的删除', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    App = () => {
+      const _rObj = useReactive({
+        items: [
+          { id: 'id-1', name: 'p1' },
+          { id: 'id-2', name: 'p2' },
+          { id: 'id-3', name: 'p3' },
+          { id: 'id-4', name: 'p4' },
+          { id: 'id-5', name: 'p5' },
+        ],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('通过 pop 删除最后1行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 删除最后一行
+    rObj.items.pop();
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行5次，pop无需更新
+    expect(itemFn).toHaveBeenCalledTimes(5);
+  });
+
+  it('通过 splice 删除中间2行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 删除中间一行
+    rObj.items.splice(2, 2);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行5次，splice无需更新
+    expect(itemFn).toHaveBeenCalledTimes(5);
+  });
+
+  it('通过 splice 删除中间2行，增加1行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 删除中间2行，增加1行
+    rObj.items.splice(2, 2, ...[{ id: 6, name: 'p6' }]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行5次，splice新增1行会执行1次
+    expect(itemFn).toHaveBeenCalledTimes(6);
+  });
+
+  it('通过 set 删除中间2行', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 删除中间2行
+    rObj.items.set([
+      { id: 'id-1', name: 'p1' },
+      { id: 'id-2', name: 'p2' },
+      { id: 'id-5', name: 'p5' },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行5次，splice无需更新
+    expect(itemFn).toHaveBeenCalledTimes(5);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-update.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-update.test.js
new file mode 100644
index 00000000..272c7f12
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for-update.test.js
@@ -0,0 +1,1172 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useReactive, reactive, For } from '../../../../../src/index';
+import { beforeEach } from '@jest/globals';
+import { getRNode } from '../../../../../src/reactive/Utils';
+
+const Row = ({ item }) => {
+  return (
+    <li id={item.id} key={item.id}>
+      {item.name}
+    </li>
+  );
+};
+
+const TableList = ({ item }) => {
+  return <For each={item.items}>{item => <RowList item={item} />}</For>;
+};
+
+const RowList = ({ item }) => {
+  return <For each={item.items}>{item => <Row item={item} />}</For>;
+};
+
+let rObj;
+let ref;
+let appFn;
+let App;
+let itemFn;
+let globalData;
+
+describe('测试 For 组件的更新', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    App = () => {
+      const _rObj = useReactive({
+        items: [
+          { id: 'id-1', name: 'p1' },
+          { id: 'id-2', name: 'p2' },
+          { id: 'id-3', name: 'p3' },
+          { id: 'id-4', name: 'p4' },
+          { id: 'id-5', name: 'p5' },
+        ],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('通过 set 更新每行数据的id', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    let a = container.querySelector('#id-1');
+    expect(a.innerHTML).toEqual('p1');
+
+    // 更新id
+    rObj.items.set([
+      { id: 'id-11', name: 'p1' },
+      { id: 'id-22', name: 'p2' },
+      { id: 'id-33', name: 'p3' },
+      { id: 'id-44', name: 'p4' },
+      { id: 'id-55', name: 'p5' },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 只有第一次渲染执行5次
+    expect(itemFn).toHaveBeenCalledTimes(5);
+
+    a = container.querySelector('#id-11');
+    expect(a.innerHTML).toEqual('p1');
+  });
+
+  it('等长 set 更新每行数据', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    let li = container.querySelector('#id-1');
+    expect(li.innerHTML).toEqual('p1');
+
+    // 更新
+    rObj.items.set([
+      { id: 'id-1', name: 'p11' },
+      { id: 'id-2', name: 'p2' },
+      { id: 'id-3', name: 'p33' },
+      { id: 'id-4', name: 'p4' },
+      { id: 'id-5', name: 'p55' },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 只有第一次渲染执行5次
+    expect(itemFn).toHaveBeenCalledTimes(5);
+
+    li = container.querySelector('#id-1');
+    expect(li.innerHTML).toEqual('p11');
+  });
+
+  it('通过 reverse 反转数组', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 反转数组
+    rObj.items.reverse();
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行5次，反转需要5-1次
+    expect(itemFn).toHaveBeenCalledTimes(9);
+
+    let li1 = container.querySelector('li:nth-child(1)');
+    expect(li1.innerHTML).toEqual('p5');
+    let li2 = container.querySelector('li:nth-child(2)');
+    expect(li2.innerHTML).toEqual('p4');
+    let li3 = container.querySelector('li:nth-child(3)');
+    expect(li3.innerHTML).toEqual('p3');
+    let li4 = container.querySelector('li:nth-child(4)');
+    expect(li4.innerHTML).toEqual('p2');
+    let li5 = container.querySelector('li:nth-child(5)');
+    expect(li5.innerHTML).toEqual('p1');
+  });
+
+  it('通过 copyWithin 修改数组', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 反转数组
+    rObj.items.copyWithin(3, 1, 4);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    expect(itemFn).toHaveBeenCalledTimes(7);
+
+    // 结果是：
+    // { id: 'id-1', name: 'p1' },
+    // { id: 'id-2', name: 'p2' },
+    // { id: 'id-3', name: 'p3' },
+    // { id: 'id-2', name: 'p2' },
+    // { id: 'id-3', name: 'p3' },
+
+    let li1 = container.querySelector('li:nth-child(1)');
+    expect(li1.innerHTML).toEqual('p1');
+    let li2 = container.querySelector('li:nth-child(2)');
+    expect(li2.innerHTML).toEqual('p2');
+    let li3 = container.querySelector('li:nth-child(3)');
+    expect(li3.innerHTML).toEqual('p3');
+    let li4 = container.querySelector('li:nth-child(4)');
+    expect(li4.innerHTML).toEqual('p2');
+    let li5 = container.querySelector('li:nth-child(5)');
+    expect(li5.innerHTML).toEqual('p3');
+  });
+});
+
+describe('测试 For 组件的更新，3层数据', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    App = () => {
+      const _rObj = useReactive({
+        items: [
+          {
+            id: 'id-1',
+            items: [
+              {
+                id: 'id-1',
+                items: [
+                  { id: 'id-1', name: 'p1' },
+                  { id: 'id-2', name: 'p2' },
+                  { id: 'id-3', name: 'p3' },
+                ],
+              },
+              {
+                id: 'id-2',
+                items: [
+                  { id: 'id-4', name: 'p4' },
+                  { id: 'id-5', name: 'p5' },
+                  { id: 'id-6', name: 'p6' },
+                ],
+              },
+              {
+                id: 'id-3',
+                items: [
+                  { id: 'id-7', name: 'p7' },
+                  { id: 'id-8', name: 'p8' },
+                  { id: 'id-9', name: 'p9' },
+                ],
+              },
+            ],
+          },
+          {
+            id: 'id-2',
+            items: [
+              {
+                id: 'id-1',
+                items: [
+                  { id: 'id-10', name: 'p10' },
+                  { id: 'id-11', name: 'p11' },
+                  { id: 'id-12', name: 'p12' },
+                ],
+              },
+              {
+                id: 'id-2',
+                items: [
+                  { id: 'id-13', name: 'p13' },
+                  { id: 'id-14', name: 'p14' },
+                  { id: 'id-15', name: 'p15' },
+                ],
+              },
+              {
+                id: 'id-3',
+                items: [
+                  { id: 'id-16', name: 'p16' },
+                  { id: 'id-17', name: 'p17' },
+                  { id: 'id-18', name: 'p18' },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <TableList item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('通过 set 更新第三层数据', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    let li = container.querySelector('#id-4');
+    expect(li.innerHTML).toEqual('p4');
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-1',
+            items: [
+              { id: 'id-1', name: 'p1' },
+              { id: 'id-2', name: 'p2' },
+              { id: 'id-3', name: 'p3' },
+            ],
+          },
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-4', name: 'p444' },
+              { id: 'id-5', name: 'p5' },
+              { id: 'id-6', name: 'p6' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p8' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'id-2',
+        items: [
+          {
+            id: 'id-1',
+            items: [
+              { id: 'id-10', name: 'p10' },
+              { id: 'id-11', name: 'p11' },
+              { id: 'id-12', name: 'p12' },
+            ],
+          },
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-13', name: 'p13' },
+              { id: 'id-14', name: 'p14' },
+              { id: 'id-15', name: 'p15' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-16', name: 'p16' },
+              { id: 'id-17', name: 'p17' },
+              { id: 'id-18', name: 'p18' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 只有第一次渲染执行2次
+    expect(itemFn).toHaveBeenCalledTimes(2);
+
+    li = container.querySelector('#id-4');
+    expect(li.innerHTML).toEqual('p444');
+  });
+
+  it('通过 set 删除第3层数据', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    let li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p8');
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-1',
+            items: [{ id: 'id-1', name: 'p1' }],
+          },
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-4', name: 'p4' },
+              { id: 'id-5', name: 'p5' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p888' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'id-2',
+        items: [
+          {
+            id: 'id-1',
+            items: [
+              { id: 'id-10', name: 'p10' },
+              { id: 'id-11', name: 'p11' },
+              { id: 'id-12', name: 'p12' },
+            ],
+          },
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-13', name: 'p13' },
+              { id: 'id-14', name: 'p14' },
+              { id: 'id-15', name: 'p15' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-16', name: 'p16' },
+              { id: 'id-17', name: 'p17' },
+              { id: 'id-18', name: 'p18' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(15);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+
+    li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p888');
+  });
+
+  it('通过 set 删除第1、3层数据', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    let li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p8');
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-1',
+            items: [{ id: 'id-1', name: 'p1' }],
+          },
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-4', name: 'p4' },
+              { id: 'id-5', name: 'p5' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p888' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(6);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+
+    li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p888');
+  });
+
+  it('通过 set 删除第1、2、3层数据', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    let li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p8');
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-2',
+            items: [
+              { id: 'id-4', name: 'p4' },
+              { id: 'id-5', name: 'p5' },
+            ],
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p888' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+
+    li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p888');
+  });
+
+  it('通过 set 把数组设置成boolean和number', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-1',
+            items: [true],
+          },
+          {
+            id: 'id-2',
+            items: 11,
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p8' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+  });
+
+  it('通过 set 把数组设置成boolean和number，再修改下面数据部分', () => {
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(18);
+
+    // 更新
+    rObj.items.set([
+      {
+        id: 'id-1',
+        items: [
+          {
+            id: 'id-1',
+            items: [true],
+          },
+          {
+            id: 'id-2',
+            items: 11, // 数组变数字，不会报错
+            xxx: 'xxx', // 多出来的数据不影响
+          },
+          {
+            id: 'id-3',
+            items: [
+              { id: 'id-7', name: 'p7' },
+              { id: 'id-8', name: 'p888' },
+              { id: 'id-9', name: 'p9' },
+            ],
+          },
+        ],
+      },
+    ]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行2次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(3);
+
+    let li = container.querySelector('#id-8');
+    expect(li.innerHTML).toEqual('p888');
+  });
+
+  it('通过 set 把对象中的数组设置成boolean', () => {
+    App = () => {
+      const _rObj = useReactive({
+        id: 'id-1',
+        items: [
+          { id: 'id-1', name: 'p1' },
+          { id: 'id-2', name: 'p2' },
+          { id: 'id-3', name: 'p3' },
+        ],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return (
+                <li id={item.id} key={item.id}>
+                  {item.name}
+                </li>
+              );
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+
+    // 更新
+    rObj.set({
+      id: 'id-1',
+      items: [true],
+    });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(1);
+    expect(appFn).toHaveBeenCalledTimes(1);
+
+    // 第一次渲染执行3次，更新也触发了1次
+    expect(itemFn).toHaveBeenCalledTimes(4);
+  });
+});
+
+describe('测试 For 组件的更新，反复增删', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    App = () => {
+      const _rObj = useReactive({
+        items: [],
+      });
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('先用 splice 删除1行，再通过 set 新增2行', () => {
+    render(<App />, container);
+
+    function removeFirstRow() {
+      rObj.items.splice(0, 1);
+    }
+
+    removeFirstRow();
+
+    // 新增2行
+    rObj.items.set([
+      { id: 'id-1', name: 'p1' },
+      { id: 'id-2', name: 'p2' },
+    ]);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 再新增2行
+    rObj.items.set(
+      rObj.items.concat([
+        { id: 'id-3', name: 'p3' },
+        { id: 'id-4', name: 'p4' },
+      ])
+    );
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+  });
+
+  it('先用 set 新增6行，删除1行，交换两行位置', () => {
+    render(<App />, container);
+
+    // 新增2行
+    rObj.items.set([
+      { id: 'id-1', name: 'p1' },
+      { id: 'id-2', name: 'p2' },
+      { id: 'id-3', name: 'p3' },
+      { id: 'id-4', name: 'p4' },
+      { id: 'id-5', name: 'p5' },
+      { id: 'id-6', name: 'p6' },
+    ]);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(6);
+
+    // 删除一行
+    rObj.items.splice(0, 1);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    function swapRows() {
+      const arr = rObj.items.slice();
+      const tmp = arr[1];
+      arr[1] = arr[arr.length - 2];
+      arr[arr.length - 2] = tmp;
+      rObj.items.set(arr);
+    }
+
+    swapRows();
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    let li2 = container.querySelector('li:nth-child(2)');
+    expect(li2.innerHTML).toEqual('p5');
+
+    let li4 = container.querySelector('li:nth-child(4)');
+    expect(li4.innerHTML).toEqual('p3');
+  });
+
+  it('先用 set 新增4行，交换两行位置，删除1行', () => {
+    render(<App />, container);
+
+    // 新增2行
+    rObj.items.set([
+      { id: 'id-1', name: 'p1' },
+      { id: 'id-2', name: 'p2' },
+      { id: 'id-3', name: 'p3' },
+      { id: 'id-4', name: 'p4' },
+    ]);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+
+    function swapRows() {
+      const arr = rObj.items.slice();
+      const tmp = arr[1];
+      arr[1] = arr[arr.length - 2];
+      arr[arr.length - 2] = tmp;
+      rObj.items.set(arr);
+    }
+
+    // 前后边上第2行交换
+    swapRows();
+
+    // 删除一行
+    rObj.items.splice(0, 1);
+
+    // 结果是：
+    // { id: 'id-3', name: 'p3' },
+    // { id: 'id-2', name: 'p2' },
+    // { id: 'id-4', name: 'p4' },
+
+    let li2 = container.querySelector('li:nth-child(2)');
+    expect(li2.innerHTML).toEqual('p2');
+  });
+});
+
+describe('测试 For 组件的更新，直接修改raw数组对象', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    globalData = {
+      items: [
+        { id: 'id-1', name: 'p1' },
+        { id: 'id-2', name: 'p2' },
+        { id: 'id-3', name: 'p3' },
+        { id: 'id-4', name: 'p4' },
+        { id: 'id-5', name: 'p5' },
+      ],
+    };
+
+    App = () => {
+      const _rObj = useReactive(globalData);
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('向原始数组中增加1行数据，再通过 set 更新响应式数据，是不会更新的', () => {
+    render(<App />, container);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 新增1行
+    globalData.items.push({ id: 'id-6', name: 'p6' });
+
+    // 无法触发更新，因为globalData.items的引用相同，不会触发监听
+    rObj.set(globalData);
+
+    items = container.querySelectorAll('li');
+    // 不会更新
+    expect(items.length).toEqual(5);
+  });
+
+  it('应该直接修改响应式数据的方式', () => {
+    render(<App />, container);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 直接修改响应式数据的方式，新增1行
+    rObj.items.push({ id: 'id-6', name: 'p6' });
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(6);
+  });
+});
+
+describe('更新多属性对象', () => {
+  beforeEach(() => {
+    ref = createRef();
+    appFn = jest.fn();
+    itemFn = jest.fn();
+
+    globalData = {
+      items: [
+        { id: 'id-1', name: 'p1', class: 'c1' },
+        { id: 'id-2', name: 'p2', class: 'c2' },
+        { id: 'id-3', name: 'p3', class: 'c3' },
+        { id: 'id-4', name: 'p4', class: 'c4' },
+        { id: 'id-5', name: 'p5', class: 'c5' },
+      ],
+    };
+
+    const Row = ({ item }) => {
+      return (
+        <li id={item.id} key={item.id} class={item.class}>
+          {item.name}
+        </li>
+      );
+    };
+
+    App = () => {
+      const _rObj = useReactive(globalData);
+      rObj = _rObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              itemFn();
+              return <Row item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+  });
+
+  it('对象数据的属性类型变化，后面的属性更正常', () => {
+    render(<App />, container);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    let li = container.querySelector('#id-2');
+    expect(li.getAttribute('class')).toEqual('c2');
+
+    rObj.set({
+      items: [
+        { id: 'id-1', name: 'p1', class: 'c1' },
+        { id: 'id-2', name: [true], class: 'c2222' },
+        { id: 'id-3', name: 'p3', class: 'c3' },
+        { id: 'id-4', name: 'p4', class: 'c4' },
+        { id: 'id-5', name: 'p5', class: 'c5' },
+      ],
+    });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    li = container.querySelector('#id-2');
+    expect(li.getAttribute('class')).toEqual('c2222');
+  });
+});
+
+describe('在class组件中使用for组件', () => {
+  it('在类中使用reactive数据', () => {
+    let rObj;
+    let appInst;
+    const ref = createRef();
+
+    class App extends Inula.Component {
+      constructor(props) {
+        super(props);
+
+        appInst = this;
+
+        this.state = {
+          name: 1,
+        };
+
+        this._rObj = reactive(1);
+        rObj = this._rObj;
+      }
+
+      render() {
+        return <div ref={ref}>{this._rObj}</div>;
+      }
+    }
+
+    render(<App />, container);
+
+    expect(ref.current.innerHTML).toEqual('1');
+
+    // 触发组件重新渲染
+    appInst.setState({ name: 2 });
+
+    rObj.set('2');
+
+    // rObj只应该有一个依赖
+    expect(rObj.usedRContexts.size).toEqual(1);
+
+    expect(ref.current.innerHTML).toEqual('2');
+  });
+
+  it('在类中使用reactive数组数据', () => {
+    let rObj;
+    let appInst;
+    const ref = createRef();
+
+    class Row extends Inula.Component {
+      constructor(props) {
+        super(props);
+      }
+
+      render() {
+        const { item } = this.props;
+        return (
+          <li id={item.id} key={item.id}>
+            {item.name}
+          </li>
+        );
+      }
+    }
+
+    class App extends Inula.Component {
+      constructor(props) {
+        super(props);
+
+        appInst = this;
+
+        this.state = {
+          name: 1,
+        };
+
+        this._rObj = reactive({
+          items: [
+            { id: 'id-1', name: 'p1', class: 'c1' },
+            { id: 'id-2', name: 'p2', class: 'c2' },
+            { id: 'id-3', name: 'p3', class: 'c3' },
+            { id: 'id-4', name: 'p4', class: 'c4' },
+            { id: 'id-5', name: 'p5', class: 'c5' },
+          ],
+        });
+        rObj = this._rObj;
+      }
+
+      render() {
+        return (
+          <div ref={ref}>
+            <For each={this._rObj.items}>
+              {item => {
+                return <Row item={item} />;
+              }}
+            </For>
+          </div>
+        );
+      }
+    }
+
+    render(<App />, container);
+
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(5);
+
+    // 直接修改响应式数据的方式，新增1行
+    rObj.items.push({ id: 'id-6', name: 'p6' });
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(6);
+
+    // 触发组件重新渲染
+    appInst.setState({ name: 2 });
+
+    // rObj只应该有一个依赖
+    expect(getRNode(rObj.items).usedRContexts.size).toEqual(1);
+  });
+
+  describe('更新多属性对象', () => {
+    beforeEach(() => {
+      ref = createRef();
+      appFn = jest.fn();
+      itemFn = jest.fn();
+
+      globalData = {
+        items: [
+          { id: 'id-1', name: 'p1', class: 'c1' },
+          { id: 'id-2', name: 'p2', class: 'c2' },
+        ],
+      };
+
+      const Row = ({ item }) => {
+        return (
+          <li id={item.id} key={item.id} class={item.class}>
+            {item.name}
+          </li>
+        );
+      };
+
+      App = () => {
+        const _rObj = useReactive(globalData);
+        rObj = _rObj;
+
+        appFn();
+
+        return (
+          <div ref={ref}>
+            <For each={_rObj.items}>
+              {item => {
+                itemFn();
+                return <Row item={item} />;
+              }}
+            </For>
+          </div>
+        );
+      };
+    });
+
+    it('更新数组的一个原数据，调试subscribeAttr，只被调用一次', () => {
+      render(<App />, container);
+
+      let items = container.querySelectorAll('li');
+      expect(items.length).toEqual(2);
+
+      let li = container.querySelector('#id-2');
+      expect(li.getAttribute('class')).toEqual('c2');
+
+      rObj.set({
+        items: [
+          { id: 'id-1', name: 'p1', class: 'c1' },
+          { id: 'id-2', name: 'p2', class: 'c222' },
+        ],
+      });
+
+      items = container.querySelectorAll('li');
+      expect(items.length).toEqual(2);
+
+      li = container.querySelector('#id-2');
+      expect(li.getAttribute('class')).toEqual('c222');
+    });
+
+    it('更新数组的一个原数据', () => {
+      render(<App />, container);
+
+      let items = container.querySelectorAll('li');
+      expect(items.length).toEqual(2);
+
+      let li = container.querySelector('#id-2');
+      expect(li.getAttribute('class')).toEqual('c2');
+
+      rObj.items[1].set({ id: 'id-2', name: 'p2', class: 'c222' });
+
+      items = container.querySelectorAll('li');
+      expect(items.length).toEqual(2);
+
+      li = container.querySelector('#id-2');
+      expect(li.getAttribute('class')).toEqual('c222');
+
+      expect(itemFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('For的数组是基本数据，更改其中一个，另外两个能精准更新', () => {
+      const rowFn = jest.fn();
+
+      const Row = ({ item, index }) => {
+        rowFn();
+        return <li id={index}>{item}</li>;
+      };
+
+      const App = () => {
+        const _rObj = useReactive({
+          id: 'id-1',
+          items: [{ a: 1 }, 2, 3],
+        });
+        rObj = _rObj;
+
+        appFn();
+
+        return (
+          <div ref={ref}>
+            <For each={_rObj.items}>
+              {(item, index) => {
+                itemFn();
+                return <Row item={item} index={index}></Row>;
+              }}
+            </For>
+          </div>
+        );
+      };
+
+      render(<App />, container);
+      let items = container.querySelectorAll('li');
+      expect(items.length).toEqual(3);
+
+      // 更新
+      rObj.set({
+        id: 'id-1',
+        items: [2, 3, 4],
+      });
+
+      items = container.querySelectorAll('li');
+      expect(items.length).toEqual(3);
+      expect(appFn).toHaveBeenCalledTimes(1);
+
+      // 第一次渲染执行3次，更新也触发了1次
+      expect(itemFn).toHaveBeenCalledTimes(4);
+
+      // 第一次渲染执行3次，更新也触发了1次
+      expect(rowFn).toHaveBeenCalledTimes(4);
+    });
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for.test.js
new file mode 100644
index 00000000..585b60ba
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/For/reactive-component-for.test.js
@@ -0,0 +1,251 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useReactive, reactive, memo, For } from '../../../../../src/index';
+
+const Item = ({ item }) => {
+  return <li key={item.id}>{item.name}</li>;
+};
+
+describe('测试 For 组件', () => {
+  it('使用For组件遍历reactive“数组”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { name: 'p1', id: 1 },
+          { name: 'p2', id: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              return <Item item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.set([{ name: 'p11', id: 1 }]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.push({ name: 'p22', id: 2 });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive“数组”从[]变成有值', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj.items}>
+            {item => {
+              return <Item item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(0);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.set([{ name: 'p11', id: 1 }]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.push({ name: 'p22', id: 2 });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('数组3行变到4行', () => {
+    const state = reactive({
+      data: {
+        lines: [
+          { id: 'id-1', label: '1' },
+          { id: 'id-2', label: '2' },
+          { id: 'id-3', label: '3' },
+        ],
+      },
+    });
+
+    const Row = memo(({ item }) => {
+      return (
+        <tr>
+          <td>{item.id}</td>
+          <td>
+            <a id={item.id}>{item.label}</a>
+          </td>
+        </tr>
+      );
+    });
+
+    const RowList = () => {
+      return <For each={state.data.lines}>{item => <Row item={item} />}</For>;
+    };
+
+    const App = () => {
+      return (
+        <div>
+          <table>
+            <tbody>
+              <RowList />
+            </tbody>
+          </table>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+
+    let a = container.querySelector('#id-1');
+
+    expect(a.innerHTML).toEqual('1');
+    expect(state.data.lines.length).toEqual(3);
+    state.data.set({
+      lines: [
+        { id: 'id-4', label: '4' },
+        { id: 'id-5', label: '5' },
+        { id: 'id-6', label: '6' },
+        { id: 'id-7', label: '7' },
+      ],
+    });
+    expect(state.data.lines.length).toEqual(4);
+    a = container.querySelector('#id-4');
+
+    expect(a.innerHTML).toEqual('4');
+    const b = container.querySelector('#id-6');
+    expect(b.innerHTML).toEqual('6');
+  });
+
+  it('使用基本数据数组的loop方法', () => {
+    let rObj;
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [1, 2, 3, 4],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div>
+          {_rObj.items.map(rItem => {
+            return <li>{rItem}</li>;
+          })}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.set([1, 2, 3]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('数组reverse', () => {
+  it('调用数组的reverse方法', () => {
+    let rObj;
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { id: 1, name: 'p1' },
+          { id: 2, name: 'p2' },
+          { id: 3, name: 'p3' },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div>
+          <For each={_rObj.items}>
+            {item => {
+              return <Item item={item} />;
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+
+    // 反转
+    rObj.items.reverse();
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-block.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-block.test.js
new file mode 100644
index 00000000..fa89e36e
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-block.test.js
@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive } from '../../../../src/index';
+import { Block } from '../../../../src/reactive/components/Block';
+
+describe('测试 Block 组件', () => {
+  it('使用 Block 控制更新范围', () => {
+    let rObj, rColor;
+    const ref = createRef();
+    const fn = jest.fn();
+    const fn1 = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({ count: 0 });
+      const _rColor = useReactive('blue');
+      rObj = _rObj;
+      rColor = _rColor;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          111 222
+          <Block>
+            {() => {
+              fn1();
+              const count = _rObj.count.get();
+              return (
+                <>
+                  <div>Count: {count}</div>
+                  <div>{_rColor}</div>
+                </>
+              );
+            }}
+          </Block>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+
+    expect(ref.current.innerHTML).toEqual('111 222<div>Count: 0</div><div>blue</div>');
+
+    // 会触发View刷新
+    rObj.count.set(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    expect(ref.current.innerHTML).toEqual('111 222<div>Count: 1</div><div>blue</div>');
+
+    // 不会触发View刷新
+    rColor.set('red');
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    expect(ref.current.innerHTML).toEqual('111 222<div>Count: 1</div><div>red</div>');
+  });
+
+  it('使用 Block 包裹一个Atom', () => {
+    let rObj;
+    const ref1 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // div下面有多个元素，_rObj就需要用RText包裹
+        <div ref={ref1}>
+          111 222
+          <Block>{_rObj}</Block>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('111 222blue');
+    rObj.set('red');
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(ref1.current.innerHTML).toEqual('111 222red');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-combination.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-combination.test.js
new file mode 100644
index 00000000..6871e89f
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-combination.test.js
@@ -0,0 +1,105 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useReactive, useComputed, For, Show, Switch } from '../../../../src/index';
+
+describe('测试Switch、Show、For标签的组合使用时的组件渲染', () => {
+  it('Show、For标签的组合使用', () => {
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    let reactiveObj;
+    const ref = createRef();
+    const ref1 = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const dataList = useReactive([]);
+      reactiveObj = dataList;
+
+      const listLen = useComputed(() => {
+        return dataList.get().length;
+      });
+
+      fn();
+
+      return (
+        <>
+          <Show if={() => dataList.get().length > 0} else={() => <div />}>
+            <div ref={ref} style={{ display: 'flex' }}>
+              <For each={dataList}>{item => <Item item={item} />}</For>
+            </div>
+          </Show>
+          <div ref={ref1}>{listLen}</div>
+        </>
+      );
+    };
+    render(<App />, container);
+
+    let liItems = container.querySelectorAll('li');
+    expect(liItems.length).toEqual(0);
+
+    reactiveObj.push({ id: 1, name: '1' });
+    expect(reactiveObj.get().length).toEqual(1);
+    liItems = container.querySelectorAll('li');
+    expect(liItems.length).toEqual(1);
+
+    reactiveObj.push({ id: 2, name: '2' });
+    expect(reactiveObj.get().length).toEqual(2);
+    liItems = container.querySelectorAll('li');
+    expect(liItems.length).toEqual(2);
+
+    expect(ref1.current.innerHTML).toEqual('2');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('Switch、Show和For标签的组合使用', () => {
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    let reactiveObj;
+    const ref = createRef();
+    const App = () => {
+      const dataList = useReactive([]);
+      reactiveObj = dataList;
+
+      return (
+        <Switch>
+          <Show if={() => dataList.get().length === 0}>
+            <div />
+          </Show>
+          <Show if={() => dataList.get().length > 0}>
+            <div ref={ref} style={{ display: 'flex' }}>
+              <For each={dataList}>{item => <Item item={item} />}</For>
+            </div>
+          </Show>
+        </Switch>
+      );
+    };
+    render(<App />, container);
+
+    let liItems = container.querySelectorAll('li');
+    expect(liItems.length).toEqual(0);
+
+    reactiveObj.push({ id: 1, name: '1' });
+    expect(reactiveObj.get().length).toEqual(1);
+
+    liItems = container.querySelectorAll('li');
+    expect(liItems.length).toEqual(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-rtext.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-rtext.test.js
new file mode 100644
index 00000000..167ef990
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-rtext.test.js
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive, useCompute, reactive, RText } from '../../../../src/index';
+
+describe('测试 RText 组件', () => {
+  it('使用RText精准更新', () => {
+    let rObj;
+    const ref1 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // div下面有多个元素，_rObj就需要用RText包裹
+        <div ref={ref1}>
+          111 222
+          <RText>{_rObj}</RText>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('111 222blue');
+    rObj.set('red');
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(ref1.current.innerHTML).toEqual('111 222red');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-show.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-show.test.js
new file mode 100644
index 00000000..ba02ae46
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-show.test.js
@@ -0,0 +1,200 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive, useCompute, reactive, Show } from '../../../../src/index';
+
+describe('测试 Show 组件', () => {
+  it('if为primitive值', () => {
+    let rObj;
+    const ref1 = createRef();
+    const ref2 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // 如果else中的dom和children一个类型，需要增加key，否则会被框架当作同一个dom
+        <Show
+          if={_rObj}
+          else={
+            <div key="else" ref={ref2}>
+              Loading...
+            </div>
+          }
+        >
+          <div key="if" ref={ref1}>
+            {_rObj}
+          </div>
+        </Show>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('blue');
+    rObj.set('');
+    expect(ref2.current.innerHTML).toEqual('Loading...');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('if为primitive值，没有else', () => {
+    let rObj;
+    const ref1 = createRef();
+    const ref2 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // 如果else中的dom和children一个类型，需要增加key，否则会被框架当作同一个dom
+        <Show if={_rObj}>
+          <div ref={ref1}>{_rObj}</div>
+        </Show>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('blue');
+    rObj.set('');
+    expect(ref2.current).toEqual(null);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('if为reactive object值', () => {
+    let rObj;
+    const ref1 = createRef();
+    const ref2 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        color: 'blue',
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // 如果else中的dom和children一个类型，需要增加key，否则会被框架当作同一个dom
+        <Show
+          if={_rObj.color}
+          else={
+            <div key="else" ref={ref2}>
+              Loading...
+            </div>
+          }
+        >
+          <div key="if" ref={ref1}>
+            {_rObj.color}
+          </div>
+        </Show>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('blue');
+    rObj.color.set('');
+    expect(ref2.current.innerHTML).toEqual('Loading...');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('if为函数', () => {
+    let rObj;
+    const ref1 = createRef();
+    const ref2 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        color: 'blue',
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // 如果else中的dom和children一个类型，需要增加key，否则会被框架当作同一个dom
+        <Show
+          if={() => _rObj.color}
+          else={
+            <div key="else" ref={ref2}>
+              Loading...
+            </div>
+          }
+        >
+          <div key="if" ref={ref1}>
+            {_rObj.color}
+          </div>
+        </Show>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('blue');
+    rObj.color.set('');
+    expect(ref2.current.innerHTML).toEqual('Loading...');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('if的children、else是函数', () => {
+    const ref1 = createRef();
+    const ref2 = createRef();
+    const fn = jest.fn();
+    const _count = reactive(0);
+    const _rObj = reactive({
+      color: 'blue',
+    });
+
+    const App = () => {
+      fn();
+
+      return (
+        // 如果else中的dom和children一个类型，需要增加key，否则会被框架当作同一个dom
+        <Show
+          if={() => _rObj.color}
+          else={() => (
+            <div key="else" ref={ref2}>
+              Loading...
+            </div>
+          )}
+        >
+          {() => {
+            const text = useCompute(() => {
+              return _rObj.color.get() + _count.get();
+            });
+
+            return (
+              <div key="if" ref={ref1}>
+                {text}
+              </div>
+            );
+          }}
+        </Show>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('blue0');
+    // 修改children函数中使用到的响应式变量，也会触发Show组件更新
+    _count.set(1);
+    expect(ref1.current.innerHTML).toEqual('blue1');
+    _rObj.color.set('');
+    expect(ref2.current.innerHTML).toEqual('Loading...');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-switch.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-switch.test.js
new file mode 100644
index 00000000..de736293
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/component/reactive-component-switch.test.js
@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive, Show, Switch } from '../../../../src/index';
+
+describe('测试 Switch 组件', () => {
+  it('Switch 配合 Show 使用', () => {
+    let rObj;
+    const refBlue = createRef();
+    const refRed = createRef();
+    const refYellow = createRef();
+    const refNothing = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <Switch default={<div ref={refNothing}>nothing</div>}>
+          {/*if不能写成 _rObj === 'red' 或者 _rObj.get() === 'red' */}
+          <Show if={() => _rObj.get() === 'blue'}>
+            <div id="1" ref={refBlue}>
+              {_rObj}
+            </div>
+          </Show>
+          <Show if={() => _rObj.get() === 'red'}>
+            <div id="2" ref={refRed}>
+              {_rObj}
+            </div>
+          </Show>
+          <Show if={() => _rObj.get() === 'yellow'}>
+            <div id="3" ref={refYellow}>
+              {_rObj}
+            </div>
+          </Show>
+        </Switch>
+      );
+    };
+
+    render(<App />, container);
+    expect(refBlue.current.innerHTML).toEqual('blue');
+    // rObj被3个RContext依赖，分别是Switch组件、Show组件、div[id=1]的Children
+    expect(rObj.usedRContexts.size).toEqual(3);
+
+    act(() => {
+      rObj.set('red');
+    });
+    expect(refRed.current.innerHTML).toEqual('red');
+    // rObj被3个Effect依赖，分别是Switch组件、Show组件、div[id=2]的Children
+    expect(rObj.usedRContexts.size).toEqual(3);
+
+    act(() => {
+      rObj.set('black');
+    });
+    expect(refNothing.current.innerHTML).toEqual('nothing');
+    // rObj被1个RContext依赖，分别是Switch组件
+    expect(rObj.usedRContexts.size).toEqual(1);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/computed.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/computed.test.js
new file mode 100644
index 00000000..78ddac3c
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/computed.test.js
@@ -0,0 +1,51 @@
+import Inula, { computed, createRef, reactive, render } from '../../../src/index';
+
+describe('测试 computed', () => {
+  it('在class组件render中使用computed', () => {
+    let rObj;
+    let appInst;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    class App extends Inula.Component {
+      constructor(props) {
+        super(props);
+
+        appInst = this;
+
+        this.state = {
+          name: 1,
+        };
+
+        this._rObj = reactive(1);
+        rObj = this._rObj;
+      }
+
+      render() {
+        const computedVal = computed(() => {
+          fn();
+          return this._rObj.get() + '!!!';
+        });
+
+        return <div ref={ref}>{computedVal}</div>;
+      }
+    }
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('1!!!'); // computed执行2次
+    expect(fn).toHaveBeenCalledTimes(1);
+    rObj.set('2');
+    expect(ref.current.innerHTML).toEqual('2!!!');
+    expect(fn).toHaveBeenCalledTimes(2); // computed执行2次
+
+    // 触发组件重新渲染
+    appInst.setState({ name: 2 });
+
+    expect(fn).toHaveBeenCalledTimes(3); // 生成新的一个computation，再执行了1次，computed总共执行3次
+
+    rObj.set('3');
+    expect(ref.current.innerHTML).toEqual('3!!!');
+
+    expect(fn).toHaveBeenCalledTimes(5); // 两个computation各执行了一次，computed总共执行5次
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/no-vnode/no-vnode-base.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/no-vnode/no-vnode-base.test.js
new file mode 100644
index 00000000..947eff0f
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/no-vnode/no-vnode-base.test.js
@@ -0,0 +1,558 @@
+import Inula, { computed, createRef, reactive, watchReactive } from '../../../../src/index';
+import { template as _$template, insert as _$insert, setAttribute as _$setAttribute } from '../../../../src/no-vnode/dom';
+import { createComponent as _$createComponent, render } from '../../../../src/no-vnode/core';
+import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../../../../src/no-vnode/event';
+
+import { Show } from '../../../../src/no-vnode/components/Show';
+import { For } from '../../../../src/no-vnode/components/For';
+
+describe('测试 no-vnode', () => {
+  it('简单的使用signal', () => {
+    /**
+     * 源码：
+     * const CountingComponent = () => {
+     *  const [count, setCount] = useSignal(0);
+     *
+     *  return <div id="count">Count value is {count()}.</div>;
+     * };
+     *
+     * render(() => <CountingComponent />, container);
+     */
+
+    let g_count;
+
+    // 编译后：
+    const _tmpl$ = /*#__PURE__*/ _$template(`<div id="count">Count value is <!>.`);
+    const CountingComponent = () => {
+      const count = reactive(0);
+      g_count = count;
+
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$3 = _el$4.nextSibling;
+        _$insert(_el$, count, _el$4);
+        return _el$;
+      })();
+    };
+    render(() => _$createComponent(CountingComponent, {}), container);
+
+    _$delegateEvents(['click']);
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0<!---->.');
+
+    g_count.set(c => c + 1);
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1<!---->.');
+  });
+
+  it('return数组，click事件', () => {
+    /**
+     * 源码：
+     * const CountingComponent = () => {
+     *  const [count, setCount] = createSignal(0);
+     *  const add = () => {
+     *    setCount((c) => c + 1);
+     *  }
+     *  return <>
+     *    <div id="count">Count value is {count()}.</div>
+     *    <div><button onClick={add}>add</button></div>
+     *  </>;
+     * };
+     */
+
+    // 编译后：
+    const _tmpl$ = /*#__PURE__*/ _$template(`<div id="count">Count value is <!>.`),
+      _tmpl$2 = /*#__PURE__*/ _$template(`<div><button id="btn">add`);
+    const CountingComponent = () => {
+      const count = reactive(0);
+      const add = () => {
+        count.set(c => c + 1);
+      };
+      return [
+        (() => {
+          const _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild,
+            _el$4 = _el$2.nextSibling,
+            _el$3 = _el$4.nextSibling;
+          _$insert(_el$, count, _el$4);
+          return _el$;
+        })(),
+        (() => {
+          const _el$5 = _tmpl$2(),
+            _el$6 = _el$5.firstChild;
+          _el$6.$$click = add;
+          return _el$5;
+        })(),
+      ];
+    };
+    render(() => _$createComponent(CountingComponent, {}), container);
+
+    _$delegateEvents(['click']);
+
+    container.querySelector('#btn').click();
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1<!---->.');
+  });
+
+  it('return 自定义组件', () => {
+    /**
+     * 源码：
+     * const CountValue = (props) => {
+     *   return <div>Count value is {props.count} .</div>;
+     * }
+     *
+     * const CountingComponent = () => {
+     *  const [count, setCount] = createSignal(0);
+     *  const add = () => {
+     *       setCount((c) => c + 1);
+     *     }
+     *
+     *  return <div>
+     *      <CountValue count={count} />
+     *    <div><button onClick={add}>add</button></div>
+     *    </div>;
+     * };
+     *
+     * render(() => <CountingComponent />, document.getElementById("app"));
+     */
+
+    // 编译后：
+    const _tmpl$ = /*#__PURE__*/ _$template(`<div id="count">Count value is <!>.`),
+      _tmpl$2 = /*#__PURE__*/ _$template(`<div><div><button id="btn">add`);
+    const CountValue = props => {
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$3 = _el$4.nextSibling;
+        _$insert(_el$, () => props.count, _el$4);
+        return _el$;
+      })();
+    };
+    const CountingComponent = () => {
+      const count = reactive(0);
+      const add = () => {
+        count.set(c => c + 1);
+      };
+      return (() => {
+        const _el$5 = _tmpl$2(),
+          _el$6 = _el$5.firstChild,
+          _el$7 = _el$6.firstChild;
+        _$insert(
+          _el$5,
+          _$createComponent(CountValue, {
+            count: count,
+          }),
+          _el$6
+        );
+        _el$7.$$click = add;
+        return _el$5;
+      })();
+    };
+    render(() => _$createComponent(CountingComponent, {}), container);
+    _$delegateEvents(['click']);
+
+    container.querySelector('#btn').click();
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1<!---->.');
+  });
+
+  it('使用Show组件', () => {
+    /**
+     * 源码：
+     * const CountValue = (props) => {
+     *   return <div id="count">Count value is {props.count()}.</div>;
+     * }
+     *
+     * const CountingComponent = () => {
+     *  const [count, setCount] = createSignal(0);
+     *  const add = () => {
+     *       setCount((c) => c + 1);
+     *     }
+     *
+     *  return <div>
+     *    <Show when={count() > 0} fallback={<CountValue count={999} />}>
+     *      <CountValue count={count} />
+     *    </Show>
+     *    <div><button id="btn" onClick={add}>add</button></div>
+     *    </div>;
+     * };
+     *
+     * render(() => <CountingComponent />, document.getElementById("app"));
+     */
+
+    // 编译后：
+    const _tmpl$ = /*#__PURE__*/ _$template(`<div id="count">Count value is <!>.`),
+      _tmpl$2 = /*#__PURE__*/ _$template(`<div><div><button id="btn">add`);
+    const CountValue = props => {
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$3 = _el$4.nextSibling;
+        _$insert(_el$, () => props.count, _el$4);
+        return _el$;
+      })();
+    };
+    const CountingComponent = () => {
+      const count = reactive(0);
+      const add = () => {
+        count.set(c => c + 1);
+      };
+      return (() => {
+        const _el$5 = _tmpl$2(),
+          _el$6 = _el$5.firstChild,
+          _el$7 = _el$6.firstChild;
+        _$insert(
+          _el$5,
+          _$createComponent(Show, {
+            get if() {
+              return computed(() => count.get() > 0);
+            },
+            get else() {
+              return _$createComponent(CountValue, {
+                count: 999,
+              });
+            },
+            get children() {
+              return _$createComponent(CountValue, {
+                count: count,
+              });
+            },
+          }),
+          _el$6
+        );
+        _el$7.$$click = add;
+        return _el$5;
+      })();
+    };
+    render(() => _$createComponent(CountingComponent, {}), container);
+    _$delegateEvents(['click']);
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 999<!---->.');
+
+    container.querySelector('#btn').click();
+
+    expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1<!---->.');
+  });
+
+  it('使用For组件', () => {
+    /**
+     * 源码：
+     * const Todo = (props) => {
+     *   return <div>Count value is {props.todo.title}.</div>;
+     * }
+     *
+     * const CountingComponent = () => {
+     *  const [state, setState] = createStore({
+     *    counter: 2,
+     *    todoList: [
+     *      { id: 23, title: 'Birds' },
+     *      { id: 27, title: 'Fish' }
+     *    ]
+     *  });
+     *
+     *  const add = () => {
+     *    setState('todoList', () => {
+     *      return [
+     *        { id: 23, title: 'Birds' },
+     *        { id: 27, title: 'Fish' },
+     *        { id: 27, title: 'Cat' }
+     *      ];
+     *    });
+     *  }
+     *
+     *  const push = () => {
+     *         state.todoList.push({
+     *           id: 27,
+     *           title: 'Pig',
+     *         },);
+     *       };
+     *
+     *  return <div>
+     *    <div id="todos">
+     *      <For each={state.todoList}>
+     *        {todo => <><Todo todo={todo} /><Todo todo={todo} /></>}
+     *      </For>
+     *    </div>
+     *    <div><button id="btn" onClick={add}>add</button></div>
+     *    <div><button id="btn-push" onClick={push}>push</button></div>
+     *    </div>;
+     * };
+     *
+     * render(() => <CountingComponent />, document.getElementById("app"));
+     */
+
+    // 编译后：
+    const _tmpl$ = /*#__PURE__*/_$template(`<div>Count value is <!>.`),
+      _tmpl$2 = /*#__PURE__*/_$template(`<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push`);
+    const Todo = props => {
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$3 = _el$4.nextSibling;
+        _$insert(_el$, () => props.todo.title, _el$4);
+        return _el$;
+      })();
+    };
+    const CountingComponent = () => {
+      const state = reactive({
+        counter: 2,
+        todoList: [
+          {
+            id: 23,
+            title: 'Birds',
+          },
+          {
+            id: 27,
+            title: 'Fish',
+          },
+        ],
+      });
+      const add = () => {
+        state.todoList.set(() => {
+          return [
+            {
+              id: 23,
+              title: 'Birds',
+            },
+            {
+              id: 27,
+              title: 'Fish',
+            },
+            {
+              id: 27,
+              title: 'Cat',
+            },
+          ];
+        });
+      };
+
+      const push = () => {
+        state.todoList.push({
+          id: 27,
+          title: 'Pig',
+        },);
+      };
+      return (() => {
+        const _el$5 = _tmpl$2(),
+          _el$6 = _el$5.firstChild,
+          _el$7 = _el$6.nextSibling,
+          _el$8 = _el$7.firstChild,
+          _el$9 = _el$7.nextSibling,
+          _el$10 = _el$9.firstChild;
+        _$insert(
+          _el$6,
+          _$createComponent(For, {
+            get each() {
+              return state.todoList;
+            },
+            children: todo => [
+              _$createComponent(Todo, {
+                todo: todo,
+              }),
+              _$createComponent(Todo, {
+                todo: todo,
+              }),
+            ],
+          })
+        );
+        _el$8.$$click = add;
+        _el$10.$$click = push;
+        return _el$5;
+      })();
+    };
+    render(() => _$createComponent(CountingComponent, {}), container);
+    _$delegateEvents(['click']);
+
+    expect(container.querySelector('#todos').innerHTML).toEqual(
+      '<div>Count value is Birds<!---->.</div><div>Count value is Birds<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Fish<!---->.</div>'
+    );
+
+    container.querySelector('#btn').click();
+
+    expect(container.querySelector('#todos').innerHTML).toEqual(
+      '<div>Count value is Birds<!---->.</div><div>Count value is Birds<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Cat<!---->.</div><div>Count value is Cat<!---->.</div>'
+    );
+
+    container.querySelector('#btn-push').click();
+
+    expect(container.querySelector('#todos').innerHTML).toEqual(
+      '<div>Count value is Birds<!---->.</div><div>Count value is Birds<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Cat<!---->.</div><div>Count value is Cat<!---->.</div><div>Count value is Pig<!---->.</div><div>Count value is Pig<!---->.</div>'
+    );
+  });
+
+  it('使用effect, setAttribute, addEventListener', () => {
+    /**
+     * 源码：
+     * const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean',
+     *   'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive',
+     *   'cheap', 'expensive', 'fancy'];
+     *
+     * const random = (max: any) => Math.round(Math.random() * 1000) % max;
+     *
+     * let nextId = 1;
+     *
+     * function buildData(count: number) {
+     *   let data = new Array(count);
+     *
+     *   for (let i = 0; i < count; i++) {
+     *     data[i] = {
+     *       id: nextId++,
+     *       label: `${A[random(A.length)]}`,
+     *     }
+     *   }
+     *   return data;
+     * }
+     *
+     * const Row = (props) => {
+     *   const selected = createMemo(() => {
+     *     return props.item.selected ? 'danger' : '';
+     *   });
+     *
+     *   return (
+     *     <tr class={selected()}>
+     *       <td class="col-md-1">{props.item.label}</td>
+     *     </tr>
+     *   )
+     * };
+     *
+     * const RowList = (props) => {
+     *   return <For each={props.list}>
+     *     {(item) => <Row item={item}/>}
+     *   </For>;
+     * };
+     *
+     * const Button = (props) => (
+     *   <div class="col-sm-6">
+     *     <button type="button" id={props.id} onClick={props.cb}>{props.title}</button>
+     *   </div>
+     * );
+     *
+     * const Main = () => {
+     *  const [state, setState] = createStore({data: [{id: 1, label: '111', selected: false}, {id: 2, label: '222', selected: false}], num: 2});
+     *
+     *  function run() {
+     *    setState('data', buildData(5));
+     *  }
+     *
+     *   return (
+     *     <div>
+     *       <div>
+     *         <div>
+     *           <div><h1>Horizon-reactive-novnode</h1></div>
+     *           <div>
+     *             <div>
+     *               <Button id="run" title="Create 1,000 rows" cb={run}/>
+     *             </div>
+     *           </div>
+     *         </div>
+     *       </div>
+     *       <table>
+     *         <tbody id="tbody"><RowList list={state.data}/></tbody>
+     *       </table>
+     *     </div>
+     *   );
+     * };
+     *
+     * render(() => <Main />, document.getElementById("app"));
+     */
+
+      // 编译后：
+    const _tmpl$ = /*#__PURE__*/_$template(`<tr><td class="col-md-1">`),
+      _tmpl$2 = /*#__PURE__*/_$template(`<div class="col-sm-6"><button type="button">`),
+      _tmpl$3 = /*#__PURE__*/_$template(`<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">`);
+    const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'];
+    const random = max => Math.round(Math.random() * 1000) % max;
+    let nextId = 1;
+    function buildData(count) {
+      let data = new Array(count);
+      for (let i = 0; i < count; i++) {
+        data[i] = {
+          id: nextId++,
+          label: `${A[random(A.length)]}`
+        };
+      }
+      return data;
+    }
+    const Row = props => {
+      const selected = computed(() => {
+        return props.item.selected.get() ? "danger" : "";
+      });
+
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild;
+        _$insert(_el$2, () => props.item.label);
+        return _el$;
+      })();
+    };
+    const RowList = props => {
+      return _$createComponent(For, {
+        get each() {
+          return props.list;
+        },
+        children: item => _$createComponent(Row, {
+          item: item
+        })
+      });
+    };
+    const Button = props => (() => {
+      const _el$3 = _tmpl$2(),
+        _el$4 = _el$3.firstChild;
+      _$addEventListener(_el$4, "click", props.cb, true);
+      _$insert(_el$4, () => props.title);
+      watchReactive(() => _$setAttribute(_el$4, "id", props.id));
+      return _el$3;
+    })();
+    const Main = () => {
+      const state = reactive({
+        list: [{
+          id: 1,
+          label: '111'
+        }, {
+          id: 2,
+          label: '222'
+        }],
+        num: 2
+      });
+      function run() {
+        state.list.set(buildData(5));
+      }
+      return (() => {
+        const _el$5 = _tmpl$3(),
+          _el$6 = _el$5.firstChild,
+          _el$7 = _el$6.firstChild,
+          _el$8 = _el$7.firstChild,
+          _el$9 = _el$8.nextSibling,
+          _el$10 = _el$9.firstChild,
+          _el$11 = _el$6.nextSibling,
+          _el$12 = _el$11.firstChild;
+        _$insert(_el$10, _$createComponent(Button, {
+          id: "run",
+          title: "Create 1,000 rows",
+          cb: run
+        }));
+        _$insert(_el$12, _$createComponent(RowList, {
+          get list() {
+            return state.list;
+          }
+        }));
+        return _el$5;
+      })();
+    };
+    render(() => _$createComponent(Main, {}), container);
+    _$delegateEvents(["click"]);
+
+    expect(container.querySelector('#tbody').innerHTML).toEqual(
+      '<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>'
+    );
+
+    container.querySelector('#run').click();
+
+    expect(container.querySelector('#tbody').children.length).toEqual(5);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-compute.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-compute.test.js
new file mode 100644
index 00000000..716d36cb
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-compute.test.js
@@ -0,0 +1,377 @@
+/*
+ * 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.
+ */
+
+import Inula, {
+  createRef,
+  For,
+  reactive,
+  render,
+  useCompute,
+  useReactive,
+  computed,
+} from '../../../src/index';
+
+describe('computed 基本使用', () => {
+  it('computed 返回的是一个响应式对象，用到的响应式对象是原始类型', () => {
+    const rObj = reactive('123');
+    const comp = computed(() => {
+      return rObj.get() + '!!!';
+    });
+    expect(comp.get()).toEqual('123!!!');
+
+    rObj.set('456');
+    expect(comp.get()).toEqual('456!!!');
+  });
+
+  it('computed 返回的是一个响应式对象，用到两个响应式对象', () => {
+    const rObj1 = reactive({ name: 'xiaoming' });
+    const rObj2 = reactive({ age: 18 });
+    const comp = computed(() => {
+      return rObj1.name.get() + ' is ' + rObj2.age.get();
+    });
+    expect(comp.get()).toEqual('xiaoming is 18');
+    rObj1.name.set('xiaowang');
+    rObj2.set(prev => ({ age: prev.age + 2 }));
+    expect(comp.get()).toEqual('xiaowang is 20');
+  });
+
+  it('computed 返回的是一个复杂响应式对象', () => {
+    const rObj = reactive({ array: [1, 2, 3, 4, 5, 6] });
+    const comp = computed(() => {
+      return { newArray: rObj.array.get().filter(x => x > 4) };
+    });
+    expect(comp.get()).toEqual({ newArray: [5, 6] });
+    expect(comp.newArray.get()).toEqual([5, 6]);
+    rObj.array.push(...[100]);
+    expect(comp.get()).toEqual({ newArray: [5, 6, 100] });
+  });
+
+  it('computed 返回的是一个响应式对象，用到的响应式对象是对象类型', () => {
+    const rObj = reactive({ array: [1, 2, 3, 4, 5, 6] });
+    const comp = computed(() => {
+      return rObj.array.get().filter(x => x > 4);
+    });
+    expect(comp.get()).toEqual([5, 6]);
+
+    rObj.array.set([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+    expect(comp.get()).toEqual([5, 6, 7, 8, 9]);
+
+    rObj.array.push(...[10, 11]);
+    expect(comp.get()).toEqual([5, 6, 7, 8, 9, 10, 11]);
+
+    rObj.set({ array: [100, 101, 102] });
+    expect(comp.get()).toEqual([100, 101, 102]);
+  });
+
+  it('computed 返回的是一个复杂响应式对象2', () => {
+    const rObj = reactive({ array: [1, 2, 3, 4, 5, 6] });
+    const comp = computed(() => {
+      return { newArray: rObj.array.get().filter(x => x > 4) };
+    });
+    expect(comp.newArray.get()).toEqual([5, 6]);
+    rObj.array.push(...[7, 8]);
+    expect(comp.newArray.get()).toEqual([5, 6, 7, 8]);
+    rObj.array.set([1, 100, 101, 102]);
+    expect(comp.newArray.get()).toEqual([100, 101, 102]);
+    expect(comp.get()).toEqual({ newArray: [100, 101, 102] });
+  });
+});
+
+describe('测试 useCompute', () => {
+  it('useComputed基本使用 使用get方法(组件式更新)', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('123');
+      rObj = _rObj;
+
+      const _cObj = useCompute(() => {
+        return _rObj.get() + '!!!';
+      });
+      fn();
+
+      return <div ref={ref}>{_cObj.get()}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('123!!!');
+    expect(fn).toHaveBeenCalledTimes(1);
+    rObj.set('456');
+    expect(ref.current.innerHTML).toEqual('456!!!');
+    expect(fn).toHaveBeenCalledTimes(2);
+    rObj.set('789');
+    expect(ref.current.innerHTML).toEqual('789!!!');
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+
+  it('useComputed基本使用 直接使用对象(Dom级更新)', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('123');
+      rObj = _rObj;
+
+      const _cObj = useCompute(() => {
+        return _rObj.get() + '!!!';
+      });
+      fn();
+
+      return <div ref={ref}>{_cObj}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('123!!!');
+    expect(fn).toHaveBeenCalledTimes(1);
+    rObj.set('456');
+    expect(ref.current.innerHTML).toEqual('456!!!');
+    rObj.set('789');
+    expect(ref.current.innerHTML).toEqual('789!!!');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('useComputed 基本使用2', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const compFn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({ array: [1, 2, 3, 4, 5, 6] });
+      rObj = _rObj;
+
+      const cObj = useCompute(() => {
+        compFn();
+        return { len: _rObj.array.get().filter(x => x >= 4).length };
+      });
+
+      fn();
+
+      return <div ref={ref}>{cObj.len}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('3');
+    rObj.array.push(...[7, 8]);
+    expect(ref.current.innerHTML).toEqual('5');
+    expect(fn).toHaveBeenCalledTimes(1);
+    rObj.array.unshift(...[0, 100]);
+    expect(ref.current.innerHTML).toEqual('6');
+    rObj.set({ array: [1, 100, 101, 102, 103] });
+    expect(ref.current.innerHTML).toEqual('4');
+    expect(compFn).toHaveBeenCalledTimes(4);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('连锁useComputed使用', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const compFn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      rObj = _rObj;
+
+      const double = useCompute(() => _rObj.get() * 2);
+      const dd = useCompute(() => {
+        compFn();
+        return double.get() * 2;
+      });
+
+      fn();
+
+      return <div ref={ref}>{dd}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('4');
+    expect(compFn).toHaveBeenCalledTimes(1);
+    rObj.set('2');
+    expect(ref.current.innerHTML).toEqual('8');
+    expect(compFn).toHaveBeenCalledTimes(2);
+    rObj.set('4');
+    expect(ref.current.innerHTML).toEqual('16');
+    expect(compFn).toHaveBeenCalledTimes(3);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('useComputed中使用到了两个响应式对象', () => {
+    let _rObj1;
+    let _rObj2;
+    const ref = createRef();
+    const fn = jest.fn();
+    const compFn = jest.fn();
+    const App = () => {
+      const rObj1 = useReactive({ name: 'xiaoming' });
+      const rObj2 = useReactive({ age: 18 });
+      _rObj1 = rObj1;
+      _rObj2 = rObj2;
+
+      const words = useCompute(() => {
+        compFn();
+        return `${rObj1.name.get()} is ${rObj2.age.get()}`;
+      });
+
+      fn();
+
+      return <div ref={ref}>{words}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('xiaoming is 18');
+    expect(compFn).toHaveBeenCalledTimes(1);
+    _rObj1.name.set('xiaowang');
+    expect(ref.current.innerHTML).toEqual('xiaowang is 18');
+    expect(compFn).toHaveBeenCalledTimes(2);
+    _rObj2.set({ age: 20 });
+    expect(ref.current.innerHTML).toEqual('xiaowang is 20');
+    expect(compFn).toHaveBeenCalledTimes(3);
+    _rObj1.name.set('laowang');
+    _rObj2.set({ age: 30 });
+    expect(ref.current.innerHTML).toEqual('laowang is 30');
+    expect(compFn).toHaveBeenCalledTimes(5);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('多个reactive的compute', () => {
+    let a;
+    const ref = createRef();
+    const compFn = jest.fn();
+    const computeFn = jest.fn();
+    const App = () => {
+      const _a = useReactive('a');
+      const b = useReactive('b');
+      const cond = useReactive(true);
+      a = _a;
+      const compute = useCompute(() => {
+        computeFn();
+        return cond.get() ? _a.get() : b.get();
+      });
+
+      compFn();
+
+      return (
+        <button
+          ref={ref}
+          className={compute}
+          onClick={() => {
+            cond.set(false);
+          }}
+        >
+          {compute}
+        </button>
+      );
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('a');
+    ref.current.click();
+    expect(ref.current.innerHTML).toEqual('b');
+    a.set('aa');
+
+    expect(computeFn).toHaveBeenCalledTimes(3);
+
+    expect(ref.current.innerHTML).toEqual('b');
+  });
+
+  it('useCompute返回一个数组对象', () => {
+    let rObj;
+    let cObj;
+    let ref = createRef();
+    let appFn = jest.fn();
+    let itemFn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive([
+        { id: 'id-1', name: 'p1' },
+        { id: 'id-2', name: 'p2' },
+        { id: 'id-3', name: 'p3' },
+      ]);
+      rObj = _rObj;
+
+      const _cObj = useCompute(() => {
+        return _rObj.get().slice();
+      });
+      cObj = _cObj;
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_cObj}>
+            {item => {
+              itemFn();
+              return (
+                <li id={item.id} key={item.id}>
+                  {item.name}
+                </li>
+              );
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+
+    rObj.push({ id: 'id-4', name: 'p4' });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+
+    // rObj[1].name.get();
+    rObj[1].set({ id: 'id-2', name: 'p222' });
+    let li = container.querySelector('#id-2');
+
+    expect(li.innerHTML).toEqual('p222');
+
+    // // 更新
+    // cObj.set([true]);
+    //
+    // items = container.querySelectorAll('li');
+    // expect(items.length).toEqual(1);
+    // expect(appFn).toHaveBeenCalledTimes(1);
+    //
+    // // 第一次渲染执行3次，更新也触发了1次
+    // expect(itemFn).toHaveBeenCalledTimes(4);
+  });
+
+  xit('测试compute在checkbox中的使用', () => {
+    let a;
+    const ref = createRef();
+    const compFn = jest.fn();
+    const computeFn = jest.fn();
+    const App = () => {
+      const rObj = useReactive({ checked: true });
+      const checked = useCompute(() => {
+        return rObj.checked.get();
+      });
+
+      compFn();
+
+      return <Checkbox checked={checked} />;
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('a');
+    ref.current.click();
+    expect(ref.current.innerHTML).toEqual('b');
+    a.set('aa');
+
+    expect(computeFn).toHaveBeenCalledTimes(3);
+
+    expect(ref.current.innerHTML).toEqual('b');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-memory.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-memory.test.js
new file mode 100644
index 00000000..70877a52
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-memory.test.js
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive } from '../../../src/index';
+import { Show } from '../../../src/reactive/components/Show';
+import { Switch } from '../../../src/reactive/components/Switch';
+
+describe('响应式数据usedRContexts', () => {
+  it('测试响应式数据的usedRContexts会随着VNode的删除而清除', () => {
+    let rObj;
+    const refBlue = createRef();
+    const refRed = createRef();
+    const refYellow = createRef();
+    const refNothing = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <Switch default={<div ref={refNothing}>nothing</div>}>
+          {/*if不能写成 _rObj === 'red' 或者 _rObj.get() === 'red' */}
+          <Show if={() => _rObj.get() === 'blue'}>
+            <div id="1" ref={refBlue}>
+              {_rObj}
+            </div>
+          </Show>
+          <Show if={() => _rObj.get() === 'red'}>
+            <div id="2" ref={refRed}>
+              {_rObj}
+            </div>
+          </Show>
+          <Show if={() => _rObj.get() === 'yellow'}>
+            <div id="3" ref={refYellow}>
+              {_rObj}
+            </div>
+          </Show>
+        </Switch>
+      );
+    };
+
+    render(<App />, container);
+    expect(refBlue.current.innerHTML).toEqual('blue');
+    // rObj被3个RContext依赖，分别是Switch组件、Show组件、div[id=1]的Children
+    expect(rObj.usedRContexts.size).toEqual(3);
+
+    act(() => {
+      rObj.set('red');
+    });
+    expect(refRed.current.innerHTML).toEqual('red');
+    // rObj被3个Effect依赖，分别是Switch组件、Show组件、div[id=2]的Children
+    expect(rObj.usedRContexts.size).toEqual(3);
+
+    act(() => {
+      rObj.set('black');
+    });
+    expect(refNothing.current.innerHTML).toEqual('nothing');
+    // rObj被1个RContext依赖，分别是Switch组件
+    expect(rObj.usedRContexts.size).toEqual(1);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mix-use.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mix-use.test.js
new file mode 100644
index 00000000..7e4f0fe7
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mix-use.test.js
@@ -0,0 +1,189 @@
+/*
+ * 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.
+ */
+
+import Inula, {createRef, render, useReactive, useState, useEffect, useRef, Show} from '../../../src/index';
+
+describe('传统API和响应式API混合使用', () => {
+  it('混合使用1', () => {
+    let rObj, isShow, update;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _isShow = useReactive(true);
+      isShow = _isShow;
+
+      const [_, setState] = useState({});
+
+      update = () => setState({});
+      return (
+        <Show if={isShow}>
+          <Child />
+        </Show>
+      );
+    };
+
+    const Child = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} className={_rObj}></div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.className).toEqual('blue');
+
+    // 改变了DOM结构
+    isShow.set(false);
+    expect(ref.current).toEqual(null);
+
+    update();
+
+    expect(ref.current).toEqual(null);
+  });
+
+
+  it('混合使用2', () => {
+    // 全局变量来监听更新次数
+    let guid = 0;
+
+    function ReactiveComponent() {
+      const data = useReactive({ count: 0 });
+      const [count, setCount] = useState(0);
+
+      const [dir, setDir] = useState("asc"); // 用于排序方向
+
+      function add() {
+        data.count.set((c) => c + 1);
+      }
+      function addCount() {
+        setCount((c) => c + 1);
+      }
+
+      function toggleDir() {
+        setDir((d) => (d === "asc" ? "desc" : "asc"));
+      }
+
+      const vnode1 = <div id={"count"}>我是静态数据：{count}</div>;
+
+      const vnode2 = <div id={"rCount"}>我是响应数据：{data.count}</div>;
+
+
+      return (
+        <div>
+          <button id={"reorder"} onClick={toggleDir}>点击切换顺序</button>
+          <button id={"addRCount"} onClick={add}>点击++</button>
+          <button id={"addCount"} onClick={addCount}>点击 count++</button>
+          <div id={"content"}>
+            {dir === "asc" ? [vnode1, vnode2] : [vnode2, vnode1]}
+          </div>
+        </div>
+      );
+    }
+
+    render(<ReactiveComponent />, container);
+
+    // 点击按钮触发reactive count加1
+    container.querySelector('#addRCount').click();
+    expect(container.querySelector('#rCount').innerHTML).toEqual('我是响应数据：1');
+
+    // // 点击按钮触发count加1
+    container.querySelector('#addCount').click();
+    container.querySelector('#addCount').click();
+    container.querySelector('#addCount').click();
+    expect(container.querySelector('#count').innerHTML).toEqual('我是静态数据：3');
+    expect(container.querySelector('#rCount').innerHTML).toEqual('我是响应数据：1');
+
+    expect(container.querySelector('#content').innerHTML).toEqual('<div id="count">我是静态数据：3</div><div id="rCount">我是响应数据：1</div>');
+
+    container.querySelector('#reorder').click();
+
+    expect(container.querySelector('#content').innerHTML).toEqual('<div id="rCount">我是响应数据：1</div><div id="count">我是静态数据：3</div>');
+
+  });
+
+
+  it('混合使用3', () => {
+    // 全局变量来监听更新次数
+    let guid = 0;
+
+    function ReactiveComponent() {
+      const renderCount = ++useRef(0).current;
+
+      const data = useReactive({ count: 0 });
+      const [state, setState] = useState(0);
+
+      const showData = useReactive({show:true});
+
+
+      // 切换显示
+      function handleClick() {
+        showData.show.set(s=> !s)
+      }
+      function add() {
+        data.count.set((c) => c + 1);
+      }
+      function addState() {
+        setState((c) => c + 1);
+      }
+      // 监听生命周期
+      const mounted = useRef();
+
+      useEffect(() => {
+        if (!mounted.current) {
+          console.log("组件Mounted", guid++);
+          mounted.current = true;
+        } else {
+          console.log("组件Updated", guid++);
+        }
+      });
+
+      return (
+        <div>
+          <div>响应式数据：{data.count} </div>
+          <div>传统state: {state}</div>
+          <div>
+            组件渲染次数renderCount:{renderCount} 或guid=：{guid}
+          </div>
+          <hr />
+          <button onClick={handleClick}>点击切换显示</button>
+          <button onClick={add}>点击++</button>
+          <button onClick={addState}>点击state++</button>
+          <hr />
+          <div className="border">
+            <Show if={showData.show}>
+              <div>
+                <h1>我会被隐藏</h1>
+                <div>  我是响应式数据:{data.count}</div>
+              </div>
+            </Show>
+
+            {showData.show.get() && (
+              <div>
+                <h1>我会被隐藏</h1>
+                <div>  我是响应式数据:{data.count}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    render(<ReactiveComponent />, container);
+
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mixed-children.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mixed-children.test.js
new file mode 100644
index 00000000..c6d81e22
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-mixed-children.test.js
@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, act, useReactive } from '../../../src/index';
+
+describe('测试混合型的 children', () => {
+  it('children是 字符串+Atom 场景', () => {
+    let rObj;
+    const ref1 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(0);
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // div下面有多个元素
+        <div ref={ref1}>Count: {_rObj}</div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('Count: 0');
+    rObj.set(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(ref1.current.innerHTML).toEqual('Count: 1');
+  });
+
+  it('children是 字符串+Atom 场景2', () => {
+    let rObj;
+    const ref1 = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({ count: 0 });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        // div下面有多个元素
+        <div ref={ref1}>Count: {_rObj.count}</div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref1.current.innerHTML).toEqual('Count: 0');
+    rObj.count.set(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(ref1.current.innerHTML).toEqual('Count: 1');
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-object.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-object.test.js
new file mode 100644
index 00000000..90ae29fc
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-object.test.js
@@ -0,0 +1,973 @@
+/*
+ * 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.
+ */
+
+import Inula, {
+  render,
+  createRef,
+  useReactive,
+  useCompute,
+  reactive,
+  computed,
+  watchReactive,
+} from '../../../src/index';
+import { GET_R_NODE } from '../../../src/reactive/proxy/RProxyHandler';
+import { isAtom, isReactiveProxy, isRNode } from '../../../src/reactive/Utils';
+
+describe('测试 useReactive(对象)', () => {
+  it('reactive基本使用', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        color: 'blue',
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.color}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('blue');
+    rObj.color.set('red');
+    expect(rObj.color.get()).toEqual('red');
+    expect(ref.current.innerHTML).toEqual('red');
+    rObj.color.set(prev => prev + '!!');
+    expect(rObj.color.get()).toEqual('red!!');
+    expect(ref.current.innerHTML).toEqual('red!!');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('响应式对象赋值修改为一个对象', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: { framework: 'Vue' },
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.data.framework}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('Vue');
+    rObj.data.set({ framework: 'React' });
+    expect(rObj.data.framework.get()).toEqual('React');
+    expect(ref.current.innerHTML).toEqual('React');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('赋值修改复杂响应式对象', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: { framework: { js: 'Vue' } },
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.data.framework.js}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('Vue');
+    rObj.data.set({ framework: { js: 'React' } });
+    expect(rObj.data.framework.get()).toEqual({ js: 'React' });
+    expect(ref.current.innerHTML).toEqual('React');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('赋值修改响应式对象中Atom的值', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        rdata: { framework: 'Vue' },
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.rdata.framework}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('Vue');
+    rObj.rdata.framework.set('React');
+    expect(rObj.rdata.get()).toEqual({ framework: 'React' });
+    expect(ref.current.innerHTML).toEqual('React');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('把响应式属性传递到子组件', () => {
+    let rObj;
+    const ref = createRef();
+    const fn1 = jest.fn();
+    const fn2 = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive({
+        data: {
+          color: 'blue',
+        },
+      });
+      rObj = _rObj;
+
+      fn1();
+      return <Child color={_rObj.data.color} />;
+    };
+
+    const Child = ({ color }) => {
+      fn2();
+
+      const cl = useCompute(() => {
+        return 'cl-' + color.get();
+      });
+
+      return <div ref={ref} className={cl}></div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.className).toEqual('cl-blue');
+    expect(fn1).toHaveBeenCalledTimes(1);
+    expect(fn2).toHaveBeenCalledTimes(1);
+    rObj.data.color.set('red');
+    expect(fn1).toHaveBeenCalledTimes(1);
+    expect(fn2).toHaveBeenCalledTimes(1);
+    expect(ref.current.className).toEqual('cl-red');
+  });
+
+  it('reactive对象中“原始数据”被赋值为“对象”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: 'blue',
+      });
+      rObj = _rObj;
+
+      _rObj.data.set({ color: 'red' });
+
+      fn();
+
+      return <div ref={ref}>{_rObj.data.color}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('red');
+    rObj.data.color.set('blue');
+    expect(rObj.data.color.get()).toEqual('blue');
+    expect(ref.current.innerHTML).toEqual('blue');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive对象中“对象”被赋值为“新对象”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: {
+          cl: 'blue',
+        },
+      });
+      rObj = _rObj;
+
+      _rObj.data.set({ color: 'red' });
+
+      fn();
+
+      return <div ref={ref}>{_rObj.data.color}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('red');
+    rObj.data.color.set('blue');
+    expect(rObj.data.color.get()).toEqual('blue');
+    expect(ref.current.innerHTML).toEqual('blue');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('测试reactive数组', () => {
+  it('reactive“数组”length的使用', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: [
+          { name: 'p1', age: 1 },
+          { name: 'p2', age: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      // 在DOM中使用length无法精细响应式
+      return <div ref={ref}>{_rObj.data.length}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('2');
+    rObj.data.set([{ name: 'p1', age: 1 }]);
+    expect(ref.current.innerHTML).toEqual('1');
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('reactive“数组”的使用', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: [
+          { name: 'p1', age: 1 },
+          { name: 'p2', age: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.data[0].name}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('p1');
+    // 这种修改无法响应！
+    // rObj.data.set([
+    //   { name: 'p11', age: 1 },
+    // ]);
+
+    // 直接修改数组中被使用属性
+    rObj.data[0].name.set('p11');
+    expect(ref.current.innerHTML).toEqual('p11');
+    // 在DOM中使用length无法精细响应式
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('jsx中通过items.get().map遍历reactive“数组”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { name: 'p1', id: 1 },
+          { name: 'p2', id: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          {_rObj.items.get().map(item => {
+            return <li key={item.id}>{item.name}</li>;
+          })}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.set([{ name: 'p11', age: 1 }]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(1);
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.push({ name: 'p22', id: 2 });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+
+  it('jsx中通过items.get().map遍历reactive“数组”，孩子是Item', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { name: 'p1', id: 1 },
+          { name: 'p2', id: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          {/*items必须要调用get()才能map*/}
+          {_rObj.items.get().map(item => {
+            return <Item item={item} />;
+          })}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.set([{ name: 'p11', age: 1 }]);
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(1);
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 每次修改items都会触发整个组件刷新
+    rObj.items.push({ name: 'p22', id: 2 });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+
+  it('jsx中通过items.map遍历reactive“数组”，具有响应式', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const Item = ({ item }) => {
+      return <li key={item.id}>{item.name}</li>;
+    };
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { name: 'p1', id: 1 },
+          { name: 'p2', id: 2 },
+          { name: 'p3', id: 3 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          {_rObj.items.map(item => {
+            return <Item item={item} />;
+          })}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    rObj.items.set([
+      { name: 'p11', age: 1 },
+      { name: 'p22', age: 2 },
+    ]);
+
+    items = container.querySelectorAll('li');
+    // 子元素不会响应式变化
+    expect(items.length).toEqual(2);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('jsx中通过items.map遍历reactive“数组”，孩子是Item，Item对象具有响应式', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const Item = ({ item }) => {
+      const id = useCompute(() => {
+        return `id-${item.id.get()}`;
+      });
+
+      return (
+        <li key={item.id} id={id}>
+          {item.name}
+        </li>
+      );
+    };
+
+    const App = () => {
+      const _rObj = useReactive({
+        items: [
+          { name: 'p1', id: 1 },
+          { name: 'p2', id: 2 },
+        ],
+      });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref}>
+          {_rObj.items.map(item => {
+            return <Item item={item} />;
+          })}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let item = container.querySelector('#id-1');
+    expect(item.innerHTML).toEqual('p1');
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    rObj.items[0].name.set('p111');
+    item = container.querySelector('#id-1');
+    // 子元素会响应式变化
+    expect(item.innerHTML).toEqual('p111');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('测试响应式数据', () => {
+    const obj = reactive({
+      data: [
+        {
+          id: '1',
+          value: 'val-1',
+        },
+        {
+          id: '2',
+          value: 'val-2',
+        },
+      ],
+    });
+
+    // 使用，让创建children
+    obj.data[1].value.read();
+
+    obj.set({
+      data: [
+        {
+          id: '11',
+          value: 'val-11',
+        },
+      ],
+    });
+
+    obj.set({
+      data: [
+        {
+          id: '111',
+          value: 'val-111',
+        },
+        {
+          id: '222',
+          value: 'val-222',
+        },
+      ],
+    });
+
+    expect(obj.data[1].value.get()).toEqual('val-222');
+  });
+
+  it('响应式对象为复杂对象时，使用set重新设置', () => {
+    const rObj = reactive({ data: [1, 2, 3, 4, 5, 6] });
+    rObj.data.push(...[7, 8]);
+    expect(rObj.data.get()).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+    rObj.data.set([100, 101]);
+    expect(rObj.get()).toEqual({ data: [100, 101] });
+  });
+
+  it('使用set直接修改响应式对象数组中某个元素的值', () => {
+    const rObj = reactive({ data: [1, 2, 3] });
+    rObj.data.push(...[4, 5, 6]);
+    expect(rObj.data.get()).toEqual([1, 2, 3, 4, 5, 6]);
+
+    // 修改数组第4个元素
+    rObj.data[1].set({ val: 2 });
+    expect(rObj.get()).toEqual({ data: [1, { val: 2 }, 3, 4, 5, 6] });
+  });
+
+  it('使用set直接修改响应式对象数组中某个元素的值2', () => {
+    const rObj = reactive({ data: [1, 2, 3] });
+    rObj.data.push(...[4, 5, 6]);
+    expect(rObj.data.get()).toEqual([1, 2, 3, 4, 5, 6]);
+
+    // 修改数组第4个元素
+    rObj.data[4].set({ val: 2 });
+    expect(rObj.get()).toEqual({ data: [1, 2, 3, 4, { val: 2 }, 6] });
+  });
+
+  it('在删除数组中一个数字，再加一个对象，类型是RNode', () => {
+    const rObj = reactive({ data: [1, 2, 3, 4] });
+    // 使用最后一个数据，在children中创建出child
+    rObj.data[3].get();
+    // 删除最后一个数据
+    rObj.data.set([1, 2, 3]);
+    // 重新增加一个obj类型的数据
+    rObj.data.set([1, 2, 3, { val: 4 }]);
+
+    // rObj.data[3]是RNode
+    expect(isRNode(rObj.data[3][GET_R_NODE])).toBeTruthy();
+
+    expect(rObj.data[3].val.get()).toEqual(4);
+  });
+
+  xit('钻石问题', () => {
+    const fn = jest.fn();
+    const rObj = reactive(0);
+    const evenOrOdd = computed(() => (rObj.get() % 2 === 0 ? 'even' : 'odd'));
+
+    watchReactive(() => {
+      fn();
+      rObj.get();
+      evenOrOdd.get();
+    });
+
+    rObj.set(1);
+
+    // TODO
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+
+  it('数组中的数据由“对象”变成“字符串”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [
+        { name: 'p1', id: 1 },
+        { name: { n: 'p22' }, id: 2 },
+      ],
+    });
+
+    watchReactive(rObj.items[1].name, () => {
+      fn();
+    });
+    watchReactive(rObj.items[1].name.n, () => {
+      fn1();
+    });
+
+    rObj.items.set([
+      { name: 'p1', id: 1 },
+      { name: 'p2', id: 2 }, // name 改为 基本数据类型
+    ]);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    // 无法触发fn1
+    expect(fn1).toHaveBeenCalledTimes(0);
+  });
+
+  it('数组中的数据由“字符串”变成“对象”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [
+        { name: 'p1', id: 1 },
+        { name: 'p2', id: 2 },
+      ],
+    });
+
+    watchReactive(rObj.items[1].name, () => {
+      fn();
+    });
+    // 允许使用或监听没有定义的属性
+    watchReactive(rObj.items[1].name.n, () => {
+      fn1();
+    });
+
+    rObj.items.set([
+      { name: 'p1', id: 1 },
+      { name: { n: 'p22' }, id: 2 },
+    ]);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    // 可以触发fn1
+    expect(fn1).toHaveBeenCalledTimes(1);
+  });
+
+  it('访问一个不存在的属性，会抛出异常', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [{ name: 'p1' }, { name: 'p2' }],
+    });
+
+    watchReactive(() => {
+      rObj.items[1].get();
+      fn();
+    });
+    watchReactive(() => {
+      // 会抛异常
+      rObj.items[1].name.n.get();
+      fn1();
+    });
+
+    rObj.items.set([{ name: 'p1' }, { name: { n: 'p22' } }]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 无法触发fn1
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的数据由“字符串”变成“对象”3', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: 1 }, 2, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[1].get();
+      fn();
+    });
+
+    rObj.items.set([2, 3, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的数据由“数字”变成“对象”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [1, 2, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].get();
+      fn();
+    });
+
+    watchReactive(() => {
+      rObj.get();
+      fn1();
+    });
+
+    rObj.items.set([{ a: 1 }, 3, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的数据由“对象”变成“数组”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: 1 }, 2, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].get();
+      fn();
+    });
+
+    watchReactive(() => {
+      rObj.get();
+      fn1();
+    });
+
+    rObj.items.set([[1], 3, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的数据由“空数组”变成“空数组”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [[], 2, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].get();
+      fn();
+    });
+
+    watchReactive(() => {
+      rObj.get();
+      fn1();
+    });
+
+    rObj.items.set([[], 3, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的2个数据由“对象”变成“对象”', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: { b: 1 }, b: { c: 2 } }, { a: 2 }, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].a.get();
+      rObj.items[0].b.get();
+      fn();
+    });
+
+    watchReactive(() => {
+      rObj.get();
+      fn1();
+    });
+
+    // 第一个a 由{b: 1} -> {b: 2}能够精准更新
+    rObj.items.set([{ a: { b: 2 }, b: { c: 3 } }, { a: 3 }, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的2个数据由“对象”变成“对象”，前一个属性能精准更新，会触发后面那个', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    let fn2 = jest.fn();
+    let fn3 = jest.fn();
+    let fn4 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: { b: 1 }, b: { c: 2 } }, { a: 2 }, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].a.get();
+      fn();
+    });
+    watchReactive(() => {
+      // b由 { c: 2 } -> { c: 3 } 可以触发
+      rObj.items[0].b.get();
+      fn1();
+    });
+    watchReactive(() => {
+      // b由 1 -> undefined 可以触发
+      rObj.items[0].a.b.get();
+      fn2();
+    });
+    watchReactive(() => {
+      // c由 2 -> 3 可以触发
+      rObj.items[0].b.c.get();
+      fn3();
+    });
+    watchReactive(() => {
+      rObj.get();
+      fn4();
+    });
+
+    // 第一个a 由{b: 1} -> {d: 2}能够精准更新
+    rObj.items.set([{ a: { d: 2 }, b: { c: 3 } }, { a: 3 }, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    expect(fn2).toHaveBeenCalledTimes(2);
+    expect(fn3).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn4).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的2个数据由“对象”变成“对象”，前一个属性不能精准更新，也不再触发后面那个', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    let fn2 = jest.fn();
+    let fn3 = jest.fn();
+    let fn4 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: { b: 1 }, b: { c: 2 } }, { a: 2 }, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].a.get();
+      fn();
+    });
+    watchReactive(() => {
+      // b由 { c: 2 } -> { c: 3 } 可以触发
+      rObj.items[0].b.get();
+      fn1();
+    });
+    watchReactive(() => {
+      rObj.items[0].a.b.get();
+      fn2();
+    });
+    watchReactive(() => {
+      rObj.items[0].b.c.get();
+      fn3();
+    });
+    watchReactive(() => {
+      rObj.get();
+      fn4();
+    });
+
+    // 第一个 a 由{b: 1} -> 1 不能够精准更新
+    rObj.items.set([{ a: 1, b: { c: 3 } }, { a: 3 }, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    // 由 { b: 1 } -> 1 是不会触发 b 精准更新
+    expect(fn2).toHaveBeenCalledTimes(1);
+    // 前一个属性不能精准更新，也不触发后面那个的精准更新
+    expect(fn3).toHaveBeenCalledTimes(1);
+
+    // 父数据也会触发
+    expect(fn4).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的2个数据由“对象”变成“[]”，前一个属性不能精准更新，也不再触发后面那个', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    let fn2 = jest.fn();
+    let fn3 = jest.fn();
+    let fn4 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: { b: 1 }, b: { c: 2 } }, { a: 2 }, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].a.get();
+      fn();
+    });
+    watchReactive(() => {
+      // b由 { c: 2 } -> { c: 3 } 可以触发
+      rObj.items[0].b.get();
+      fn1();
+    });
+    watchReactive(() => {
+      rObj.items[0].a.b.get();
+      fn2();
+    });
+    watchReactive(() => {
+      rObj.items[0].b.c.get();
+      fn3();
+    });
+    watchReactive(() => {
+      rObj.get();
+      fn4();
+    });
+
+    // 第一个 a 由{b: 1} -> [] 不能够精准更新
+    rObj.items.set([{ a: [], b: { c: 3 } }, { a: 3 }, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    // 由 { b: 1 } -> 1 是不会触发 b 精准更新
+    expect(fn2).toHaveBeenCalledTimes(1);
+    // 前一个属性不能精准更新，也不触发后面那个的精准更新
+    expect(fn3).toHaveBeenCalledTimes(1);
+
+    // 父数据也会触发
+    expect(fn4).toHaveBeenCalledTimes(2);
+  });
+
+  it('数组中的2个数据由“对象”变成“null”，前一个属性不能精准更新，也不再触发后面那个', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    let fn2 = jest.fn();
+    let fn3 = jest.fn();
+    let fn4 = jest.fn();
+    const rObj = reactive({
+      items: [{ a: { b: 1 }, b: { c: 2 } }, { a: 2 }, 3],
+    });
+
+    watchReactive(() => {
+      rObj.items[0].a.get();
+      fn();
+    });
+    watchReactive(() => {
+      // b由 { c: 2 } -> { c: 3 } 可以触发
+      rObj.items[0].b.get();
+      fn1();
+    });
+    watchReactive(() => {
+      rObj.items[0].a.b.get();
+      fn2();
+    });
+    watchReactive(() => {
+      rObj.items[0].b.c.get();
+      fn3();
+    });
+    watchReactive(() => {
+      rObj.get();
+      fn4();
+    });
+
+    // 第一个 a 由{b: 1} -> [] 不能够精准更新
+    rObj.items.set([{ a: null, b: { c: 3 } }, { a: 3 }, 4]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn1).toHaveBeenCalledTimes(2);
+    // 由 { b: 1 } -> 1 是不会触发 b 精准更新
+    expect(fn2).toHaveBeenCalledTimes(1);
+    // 前一个属性不能精准更新，也不触发后面那个的精准更新
+    expect(fn3).toHaveBeenCalledTimes(1);
+
+    // 父数据也会触发
+    expect(fn4).toHaveBeenCalledTimes(2);
+  });
+
+  it('执行基本数据数组的loop方法', () => {
+    let fn = jest.fn();
+    let fn1 = jest.fn();
+    const rObj = reactive({
+      items: [1, 2, 3, 4],
+    });
+
+    rObj.items.forEach(rItem => {
+      expect(isReactiveProxy(rItem)).toBeTruthy();
+    });
+
+    watchReactive(() => {
+      rObj.items.get();
+      fn();
+    });
+    watchReactive(() => {
+      rObj.get();
+      fn1();
+    });
+
+    rObj.items.set([1, 2, 3]);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    // 父数据也会触发
+    expect(fn1).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-primitive.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-primitive.test.js
new file mode 100644
index 00000000..79f44515
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-primitive.test.js
@@ -0,0 +1,266 @@
+/*
+ * 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.
+ */
+
+import Inula, { render, createRef, useState, useReactive, useCompute } from '../../../src/index';
+
+describe('测试 useReactive(原生数据)', () => {
+  it('reactive.get()作为children', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('1');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj.get()}</div>;
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('1');
+    rObj.set('2');
+    expect(ref.current.innerHTML).toEqual('2');
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('reactive作为children', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('1');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref}>{_rObj}</div>;
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('1');
+    rObj.set('2');
+    expect(ref.current.innerHTML).toEqual('2');
+    rObj.set(prev => prev + '??');
+    expect(ref.current.innerHTML).toEqual('2??');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive.get()作为prop', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} className={_rObj.get()}></div>;
+    };
+    render(<App />, container);
+    expect(ref.current.className).toEqual('1');
+    rObj.set(2);
+    expect(ref.current.className).toEqual('2');
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('reactive作为prop', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} className={_rObj}></div>;
+    };
+    render(<App />, container);
+    expect(ref.current.className).toEqual('1');
+    rObj.set(2);
+    expect(ref.current.className).toEqual('2');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive.get()传入style', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} style={{ color: _rObj.get() }}></div>;
+    };
+    render(<App />, container);
+    const style = window.getComputedStyle(ref.current);
+    expect(style.color).toEqual('blue');
+
+    rObj.set('red');
+    expect(ref.current.style.color).toEqual('red');
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('reactive传入style', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} style={{ color: _rObj }}></div>;
+    };
+    render(<App />, container);
+    const style = window.getComputedStyle(ref.current);
+    expect(style.color).toEqual('blue');
+
+    rObj.set('red');
+    expect(ref.current.style.color).toEqual('red');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive传入Input value', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <input ref={ref} value={_rObj}></input>;
+    };
+    render(<App />, container);
+    expect(ref.current.value).toEqual('blue');
+
+    rObj.set('red');
+    expect(ref.current.value).toEqual('red');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive传入Textarea value', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <textarea ref={ref} value={_rObj}></textarea>;
+    };
+    render(<App />, container);
+    expect(ref.current.value).toEqual('blue');
+
+    rObj.set('red');
+    expect(ref.current.value).toEqual('red');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('reactive父组件刷新， effect不应该重新监听', () => {
+    let rObj, update;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const [_, setState] = useState({});
+
+      update = () => setState({});
+      return <Child />;
+    };
+
+    const Child = () => {
+      const _rObj = useReactive('blue');
+      rObj = _rObj;
+
+      fn();
+
+      return <div ref={ref} className={_rObj}></div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.className).toEqual('blue');
+    expect(fn).toHaveBeenCalledTimes(1);
+    update();
+    expect(fn).toHaveBeenCalledTimes(2);
+    rObj.set('red');
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(ref.current.className).toEqual('red');
+  });
+
+  it('不允许：从“原生数据”变成“对象”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive('1');
+      rObj = _rObj;
+
+      fn();
+
+      const cp = useCompute(() => {
+        return _rObj.get() === '1' ? '1' : _rObj.data.get();
+      });
+
+      return <div ref={ref}>{cp}</div>;
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('1');
+
+    // 不允许：从“原生数据”变成“对象”
+    expect(() => rObj.set({ data: '2' })).toThrow(Error('Not allowed Change Primitive to Object'));
+  });
+
+  it('允许：一个reactive属性从“原生数据”变成“对象”', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({
+        data: '1',
+      });
+      rObj = _rObj;
+
+      fn();
+
+      const cp = useCompute(() => {
+        return _rObj.data.get() === '1' ? '1' : _rObj.data.num.get();
+      });
+
+      return <div ref={ref}>{cp}</div>;
+    };
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('1');
+
+    rObj.data.set({ num: '2' });
+    expect(ref.current.innerHTML).toEqual('2');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-props-update.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-props-update.test.js
new file mode 100644
index 00000000..e489877d
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-props-update.test.js
@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+import Inula, { createRef, render, useReactive } from '../../../src/index';
+
+describe('测试在DOM的props中使用响应式数据', () => {
+  it('在class props中使用响应式数据', () => {
+    let rObj;
+    const ref = createRef();
+
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({ class: 'c1', color: 'blue' });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref} className={_rObj.class}>
+          {_rObj.color}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('blue');
+    expect(ref.current.getAttribute('class')).toEqual('c1');
+
+    rObj.class.set('c2');
+    expect(ref.current.getAttribute('class')).toEqual('c2');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('在style中使用响应式数据', () => {
+    let rObj;
+    const ref = createRef();
+
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive({ class: 'c1', color: 'blue' });
+      rObj = _rObj;
+
+      fn();
+
+      return (
+        <div ref={ref} style={{ color: _rObj.color }}>
+          {_rObj.color}
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('blue');
+    expect(ref.current.getAttribute('style')).toEqual('color: blue;');
+
+    rObj.color.set('red');
+    expect(ref.current.getAttribute('style')).toEqual('color: red;');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('在input中使用响应式数据', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive({ class: 'c1', color: 'blue' });
+      rObj = _rObj;
+
+      fn();
+
+      return <input ref={ref} value={_rObj.color}></input>;
+    };
+    render(<App />, container);
+    expect(ref.current.value).toEqual('blue');
+
+    rObj.color.set('red');
+    expect(ref.current.value).toEqual('red');
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-watch.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-watch.test.js
new file mode 100644
index 00000000..63e5d257
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactive-watch.test.js
@@ -0,0 +1,122 @@
+import Inula, {render, createRef, useReactive, useWatch, useCompute, For} from '../../../src/index';
+
+describe('测试 watch', () => {
+  it('watch 一个参数', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      useWatch(() => {
+        _rObj.get();
+        fn();
+      });
+
+      rObj = _rObj;
+
+      return <div ref={ref}>{_rObj}</div>;
+    };
+
+    render(<App />, container);
+    rObj.set('2');
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('watch 2个参数', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      useWatch(_rObj, () => {
+        fn();
+      });
+      rObj = _rObj;
+
+      return <div ref={ref}>{_rObj}</div>;
+    };
+
+    render(<App />, container);
+    rObj.set('2');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('watch 2个参数，第一个是函数', () => {
+    let rObj;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const _rObj = useReactive(1);
+      useWatch(
+        () => {
+          _rObj.get();
+        },
+        () => {
+          fn();
+        }
+      );
+      rObj = _rObj;
+
+      return <div ref={ref}>{_rObj}</div>;
+    };
+
+    render(<App />, container);
+    rObj.set('2');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('响应式数据的孩子变更，watch也应该被触发', () => {
+    let rObj;
+    let ref = createRef();
+    let fn = jest.fn();
+    let appFn = jest.fn();
+    let itemFn = jest.fn();
+
+    const App = () => {
+      const _rObj = useReactive([
+        { id: 'id-1', name: 'p1' },
+        { id: 'id-2', name: 'p2' },
+        { id: 'id-3', name: 'p3' },
+      ]);
+      rObj = _rObj;
+
+      useWatch(() => {
+        _rObj.get();
+        fn();
+      });
+
+      appFn();
+
+      return (
+        <div ref={ref}>
+          <For each={_rObj}>
+            {item => {
+              itemFn();
+              return (
+                <li id={item.id} key={item.id}>
+                  {item.name}
+                </li>
+              );
+            }}
+          </For>
+        </div>
+      );
+    };
+
+    render(<App />, container);
+    let items = container.querySelectorAll('li');
+    expect(items.length).toEqual(3);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    rObj.push({ id: 'id-4', name: 'p4' });
+
+    items = container.querySelectorAll('li');
+    expect(items.length).toEqual(4);
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    rObj[1].set({ id: 'id-2', name: 'p222' });
+    let li = container.querySelector('#id-2');
+    expect(li.innerHTML).toEqual('p222');
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactively/reactively.test.js b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactively/reactively.test.js
new file mode 100644
index 00000000..ff67f5e4
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/ReactivityTest/reactively/reactively.test.js
@@ -0,0 +1,90 @@
+import { reactively as r } from '../../../../src/reactively/Reactively';
+import Inula, { createRef, render } from '../../../../src/index';
+
+describe('测试 reactively', () => {
+  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('using reactive with components', () => {
+    let _color;
+    const ref = createRef();
+    const fn = jest.fn();
+    const App = () => {
+      const color = r.reactive('blue');
+      _color = color;
+
+      color.set('red');
+
+      fn();
+
+      return <div ref={ref}>{color}</div>;
+    };
+
+    render(<App />, container);
+    expect(ref.current.innerHTML).toEqual('red');
+    _color.set('blue');
+    expect(_color.get()).toEqual('blue');
+    expect(ref.current.innerHTML).toEqual('blue');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  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);
+  });
+});
diff --git a/packages/inula-reactive/scripts/__tests__/jest/commonComponents.js b/packages/inula-reactive/scripts/__tests__/jest/commonComponents.js
new file mode 100644
index 00000000..1c077786
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/jest/commonComponents.js
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as Inula from '../../../src/index';
+import { getLogUtils } from './testUtils';
+
+export const App = props => {
+  const Parent = props.parent;
+  const Child = props.child;
+
+  return (
+    <div>
+      <Parent>
+        <Child />
+      </Parent>
+    </div>
+  );
+};
+
+export const Text = props => {
+  const LogUtils = getLogUtils();
+  LogUtils.log(props.text);
+  return <p id={props.id}>{props.text}</p>;
+};
+
+export function triggerClickEvent(container, id) {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+  });
+  container.querySelector(`#${id}`).dispatchEvent(event);
+}
diff --git a/packages/inula-reactive/scripts/__tests__/jest/jestEnvironment.js b/packages/inula-reactive/scripts/__tests__/jest/jestEnvironment.js
new file mode 100644
index 00000000..e62beb55
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/jest/jestEnvironment.js
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+global.MessageChannel = function MessageChannel() {
+  this.port1 = {};
+  this.port2 = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    postMessage() {},
+  };
+};
+global.__VERSION__ = require('../../../package.json').version;
diff --git a/packages/inula-reactive/scripts/__tests__/jest/jestSetting.js b/packages/inula-reactive/scripts/__tests__/jest/jestSetting.js
new file mode 100644
index 00000000..12eea3ba
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/jest/jestSetting.js
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+import { unmountComponentAtNode } from '../../../src/dom/DOMExternal';
+import { getLogUtils } from './testUtils';
+
+const LogUtils = getLogUtils();
+global.isDev = process.env.NODE_ENV === 'development';
+global.isTest = true;
+global.container = null;
+global.beforeEach(() => {
+  LogUtils.clear();
+  // 创建一个 DOM 元素作为渲染目标
+  global.container = document.createElement('div');
+  document.body.appendChild(global.container);
+});
+
+global.afterEach(() => {
+  unmountComponentAtNode(global.container);
+  global.container.remove();
+  global.container = null;
+  LogUtils.clear();
+});
+
+function runAssertion(fn) {
+  try {
+    fn();
+  } catch (error) {
+    return {
+      pass: false,
+      message: () => error.message,
+    };
+  }
+  return { pass: true };
+}
+
+function toMatchValue(LogUtils, expectedValues) {
+  return runAssertion(() => {
+    const actualValues = LogUtils.getAndClear();
+    expect(actualValues).toEqual(expectedValues);
+  });
+}
+
+// 使Jest感知自定义匹配器
+expect.extend({
+  toMatchValue,
+});
diff --git a/packages/inula-reactive/scripts/__tests__/jest/logUtils.js b/packages/inula-reactive/scripts/__tests__/jest/logUtils.js
new file mode 100644
index 00000000..ffd9096f
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/jest/logUtils.js
@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+let dataArray = null;
+
+const log = value => {
+  if (dataArray === null) {
+    dataArray = [value];
+  } else {
+    dataArray.push(value);
+  }
+};
+
+const getAndClear = () => {
+  if (dataArray === null) {
+    return [];
+  }
+  const values = dataArray;
+  dataArray = null;
+  return values;
+};
+
+const clear = () => {
+  dataArray = dataArray ? null : dataArray;
+};
+
+exports.clear = clear;
+exports.log = log;
+exports.getAndClear = getAndClear;
diff --git a/packages/inula-reactive/scripts/__tests__/jest/testUtils.js b/packages/inula-reactive/scripts/__tests__/jest/testUtils.js
new file mode 100644
index 00000000..3fa59da0
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/jest/testUtils.js
@@ -0,0 +1,66 @@
+/*
+ * 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 const stopBubbleOrCapture = (e, value) => {
+  const LogUtils = getLogUtils();
+  LogUtils.log(value);
+  e.stopPropagation();
+};
+
+export function triggerClickEvent(container, id) {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+  });
+  container.querySelector(`#${id}`).dispatchEvent(event);
+}
+
+class LogUtils {
+  constructor() {
+    this.dataArray = null;
+  }
+
+  log = value => {
+    if (this.dataArray === null) {
+      this.dataArray = [value];
+    } else {
+      this.dataArray.push(value);
+    }
+  };
+
+  getAndClear = () => {
+    if (this.dataArray === null) {
+      return [];
+    }
+    const values = this.dataArray;
+    this.dataArray = null;
+    return values;
+  };
+
+  getNotClear = () => {
+    return this.dataArray === null ? [] : this.dataArray;
+  };
+
+  clear = () => {
+    this.dataArray = this.dataArray ? null : this.dataArray;
+  };
+}
+
+let logger;
+export function getLogUtils() {
+  if (!logger) {
+    logger = new LogUtils();
+  }
+  return logger;
+}
diff --git a/packages/inula-reactive/scripts/__tests__/utils/dispatchChangeEvent.js b/packages/inula-reactive/scripts/__tests__/utils/dispatchChangeEvent.js
new file mode 100644
index 00000000..a0416d2c
--- /dev/null
+++ b/packages/inula-reactive/scripts/__tests__/utils/dispatchChangeEvent.js
@@ -0,0 +1,20 @@
+/*
+ * 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 default function dispatchChangeEvent(inputEle, value) {
+  const nativeInputSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+  nativeInputSetter.call(inputEle, value);
+
+  inputEle.dispatchEvent(new Event('input', { bubbles: true }));
+}
diff --git a/packages/inula-reactive/scripts/gen3rdLib.js b/packages/inula-reactive/scripts/gen3rdLib.js
new file mode 100644
index 00000000..f3528b5e
--- /dev/null
+++ b/packages/inula-reactive/scripts/gen3rdLib.js
@@ -0,0 +1,39 @@
+/*
+ * 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';
+const path = require('path');
+const fs = require('fs');
+const childProcess = require('child_process');
+
+const inulaEcoPath = path.resolve(__dirname, '../../inula-ecosystem');
+if (!fs.existsSync(inulaEcoPath)) {
+  throw Error('inula-ecosystem not found, put inula-core and inula-ecosystem in same folder plz!');
+}
+
+const cmd = process.argv[2];
+childProcess.exec(
+  `npm run ${cmd}`,
+  {
+    cwd: inulaEcoPath,
+  },
+  function (error, stdout) {
+    if (error) {
+      console.log(`Error: ${error}`);
+    } else {
+      console.log(`STDOUT: ${stdout}`);
+    }
+  }
+);
diff --git a/packages/inula-reactive/scripts/rollup/build-types.js b/packages/inula-reactive/scripts/rollup/build-types.js
new file mode 100644
index 00000000..630cc9e4
--- /dev/null
+++ b/packages/inula-reactive/scripts/rollup/build-types.js
@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+
+function deleteFolder(filePath) {
+  if (fs.existsSync(filePath)) {
+    if (fs.lstatSync(filePath).isDirectory()) {
+      const files = fs.readdirSync(filePath);
+      files.forEach(file => {
+        const nextFilePath = path.join(filePath, file);
+        const states = fs.lstatSync(nextFilePath);
+        if (states.isDirectory()) {
+          deleteFolder(nextFilePath);
+        } else {
+          fs.unlinkSync(nextFilePath);
+        }
+      });
+      fs.rmdirSync(filePath);
+    } else if (fs.lstatSync(filePath).isFile()) {
+      fs.unlinkSync(filePath);
+    }
+  }
+}
+
+/**
+ * 删除非空文件夹
+ * @param folders {string[]}
+ * @returns {{buildEnd(): void, name: string}}
+ */
+export function cleanUp(folders) {
+  return {
+    name: 'clean-up',
+    buildEnd() {
+      folders.forEach(f => deleteFolder(f));
+    },
+  };
+}
+
+function buildTypeConfig() {
+  return {
+    input: ['./build/inula/@types/index.d.ts'],
+    output: {
+      file: './build/inula/@types/index.d.ts',
+      format: 'es',
+    },
+    plugins: [dts(), cleanUp(['./build/inula/@types/'])],
+  };
+}
+
+export default [buildTypeConfig()];
diff --git a/packages/inula-reactive/scripts/rollup/copy-plugin.js b/packages/inula-reactive/scripts/rollup/copy-plugin.js
new file mode 100644
index 00000000..78ff1e77
--- /dev/null
+++ b/packages/inula-reactive/scripts/rollup/copy-plugin.js
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+import fs from 'fs';
+
+export default function copyFiles(copyPairs) {
+  return {
+    name: 'copy-files',
+    generateBundle() {
+      copyPairs.forEach(({ from, to }) => {
+        console.log(`copy files: ${from} → ${to}`);
+        fs.copyFileSync(from, to);
+      });
+    },
+  };
+}
diff --git a/packages/inula-reactive/scripts/rollup/rollup.config.js b/packages/inula-reactive/scripts/rollup/rollup.config.js
new file mode 100644
index 00000000..4ab91071
--- /dev/null
+++ b/packages/inula-reactive/scripts/rollup/rollup.config.js
@@ -0,0 +1,130 @@
+/*
+ * 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.
+ */
+
+import nodeResolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import path from 'path';
+import fs from 'fs';
+import replace from '@rollup/plugin-replace';
+import copy from './copy-plugin';
+import execute from 'rollup-plugin-execute';
+import { terser } from 'rollup-plugin-terser';
+import { version as inulaVersion } from '../../package.json';
+
+const extensions = ['.js', '.ts', '.tsx'];
+
+const libDir = path.join(__dirname, '../..');
+const rootDir = path.join(__dirname, '../..');
+const outDir = path.join(rootDir, 'build', 'inula');
+
+if (!fs.existsSync(path.join(rootDir, 'build'))) {
+  fs.mkdirSync(path.join(rootDir, 'build'));
+}
+if (!fs.existsSync(outDir)) {
+  fs.mkdirSync(outDir);
+}
+
+const outputResolve = (...p) => path.resolve(outDir, ...p);
+
+const isDev = mode => {
+  return mode === 'development';
+};
+
+const getBasicPlugins = mode => {
+  return [
+    nodeResolve({
+      extensions,
+      modulesOnly: true,
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      configFile: path.join(__dirname, '../../babel.config.js'),
+      babelHelpers: 'runtime',
+      extensions,
+    }),
+    replace({
+      values: {
+        'process.env.NODE_ENV': `"${mode}"`,
+        isDev: isDev(mode).toString(),
+        isTest: false,
+        __VERSION__: `"${inulaVersion}"`,
+      },
+      preventAssignment: true,
+    }),
+  ];
+};
+
+function getOutputName(mode) {
+  return mode === 'production' ? `inula.${mode}.min.js` : `inula.${mode}.js`;
+}
+
+function genConfig(mode) {
+  const sourcemap = isDev(mode) ? 'inline' : false;
+  return {
+    input: path.resolve(libDir, 'src', 'index.ts'),
+    output: [
+      {
+        file: outputResolve('cjs', getOutputName(mode)),
+        sourcemap,
+        format: 'cjs',
+      },
+      {
+        file: outputResolve('umd', getOutputName(mode)),
+        sourcemap,
+        name: 'Inula',
+        format: 'umd',
+      },
+    ],
+    plugins: [
+      ...getBasicPlugins(mode),
+      execute('npm run build-types', true),
+      mode === 'production' && terser(),
+      copy([
+        {
+          from: path.join(libDir, '/npm/index.js'),
+          to: path.join(outDir, 'index.js'),
+        },
+        {
+          from: path.join(libDir, 'package.json'),
+          to: path.join(outDir, 'package.json'),
+        },
+      ]),
+    ],
+  };
+}
+
+function genJSXRuntimeConfig(mode) {
+  return {
+    input: path.resolve(libDir, 'src', 'jsx-runtime.ts'),
+    output: {
+      file: outputResolve('jsx-runtime.js'),
+      format: 'cjs',
+    },
+    plugins: [...getBasicPlugins(mode)],
+  };
+}
+
+function genJSXDEVRuntimeConfig(mode) {
+  return {
+    input: path.resolve(libDir, 'src', 'jsx-dev-runtime.ts'),
+    output: {
+      file: outputResolve('jsx-dev-runtime.js'),
+      format: 'cjs',
+    },
+    plugins: [...getBasicPlugins(mode)],
+  };
+}
+
+export default [genConfig('development'), genConfig('production'), genJSXRuntimeConfig(''), genJSXDEVRuntimeConfig('')];
diff --git a/packages/inula-reactive/src/EventTypes.ts b/packages/inula-reactive/src/EventTypes.ts
new file mode 100644
index 00000000..0746cb2e
--- /dev/null
+++ b/packages/inula-reactive/src/EventTypes.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 type DomAnimationEvent = AnimationEvent;
+export type DomClipboardEvent = ClipboardEvent;
+export type DomCompositionEvent = CompositionEvent;
+export type DomDragEvent = DragEvent;
+export type DomFocusEvent = FocusEvent;
+export type DomKeyboardEvent = KeyboardEvent;
+export type DomMouseEvent = MouseEvent;
+export type DomTouchEvent = TouchEvent;
+export type DomPointerEvent = PointerEvent;
+export type DomTransitionEvent = TransitionEvent;
+export type DomUIEvent = UIEvent;
+export type DomWheelEvent = WheelEvent;
diff --git a/packages/inula-reactive/src/dom/DOMExternal.ts b/packages/inula-reactive/src/dom/DOMExternal.ts
new file mode 100644
index 00000000..001d18f5
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMExternal.ts
@@ -0,0 +1,146 @@
+/*
+ * 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.
+ */
+
+import { asyncUpdates, getFirstCustomDom, syncUpdates, startUpdate, createTreeRootVNode } from '../renderer/Renderer';
+import { createPortal } from '../renderer/components/CreatePortal';
+import type { Container } from './DOMOperator';
+import { isElement } from './utils/Common';
+import { findDOMByClassInst } from '../renderer/vnode/VNodeUtils';
+import { listenSimulatedDelegatedEvents } from '../event/EventBinding';
+import { Callback } from '../renderer/Types';
+import { InulaNode } from '../types';
+
+function createRoot(children: any, container: Container, callback?: Callback) {
+  // 清空容器
+  let child = container.lastChild;
+  while (child) {
+    container.removeChild(child);
+    child = container.lastChild;
+  }
+
+  // 调度器创建根节点，并给容器dom赋vNode结构体
+  const treeRoot = createTreeRootVNode(container);
+  container._treeRoot = treeRoot;
+  listenSimulatedDelegatedEvents(treeRoot);
+
+  // 执行回调
+  if (typeof callback === 'function') {
+    const cb = callback;
+    callback = function () {
+      const instance = getFirstCustomDom(treeRoot);
+      cb.call(instance);
+    };
+  }
+
+  // 建VNode树，启动页面绘制
+  syncUpdates(() => {
+    startUpdate(children, treeRoot, callback);
+  });
+
+  return treeRoot;
+}
+
+function executeRender(children: any, container: Container, callback?: Callback) {
+  let treeRoot = container._treeRoot;
+
+  if (!treeRoot) {
+    treeRoot = createRoot(children, container, callback);
+  } else {
+    // container被render过
+    if (typeof callback === 'function') {
+      const cb = callback;
+      callback = function () {
+        const instance = getFirstCustomDom(treeRoot);
+        cb.call(instance);
+      };
+    }
+    // 执行更新操作
+    startUpdate(children, treeRoot, callback);
+  }
+
+  return getFirstCustomDom(treeRoot);
+}
+
+function findDOMNode(domOrEle?: Element): null | Element | Text {
+  if (domOrEle === null || domOrEle === undefined) {
+    return null;
+  }
+
+  // 普通节点
+  if (isElement(domOrEle)) {
+    return domOrEle;
+  }
+
+  // class的实例
+  return findDOMByClassInst(domOrEle);
+}
+
+// 情况根节点监听器
+function removeRootEventLister(container: Container) {
+  const events = (container._treeRoot as any).$EV;
+  if (events) {
+    Object.keys(events).forEach(event => {
+      const listener = events[event];
+
+      if (listener) {
+        container.removeEventListener(event, listener);
+        events[event] = null;
+      }
+    });
+  }
+}
+
+// 卸载入口
+function destroy(container: Element | DocumentFragment | Document): boolean;
+function destroy(container: Container): boolean {
+  if (container._treeRoot) {
+    syncUpdates(() => {
+      executeRender(null, container, () => {
+        removeRootEventLister(container);
+        container._treeRoot = null;
+      });
+    });
+
+    return true;
+  }
+
+  return false;
+}
+
+interface RootElement {
+  render(component: InulaNode): void;
+
+  unmount(): void;
+}
+
+function createRootElement(container: Container, option?: Record<string, any>): RootElement {
+  return {
+    render(component: InulaNode) {
+      executeRender(component, container);
+    },
+    unmount(): void {
+      destroy(container);
+    },
+  };
+}
+
+export {
+  createPortal,
+  asyncUpdates as unstable_batchedUpdates,
+  findDOMNode,
+  executeRender as render,
+  createRootElement as createRoot,
+  destroy as unmountComponentAtNode,
+};
diff --git a/packages/inula-reactive/src/dom/DOMInternalKeys.ts b/packages/inula-reactive/src/dom/DOMInternalKeys.ts
new file mode 100644
index 00000000..a8727261
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMInternalKeys.ts
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+/**
+ * 文件整体功能：给dom节点赋 VNode 的结构体和事件初始化标记
+ */
+
+import type { VNode } from '../renderer/Types';
+import type { Container, Props } from './DOMOperator';
+
+import { DomComponent, DomText, TreeRoot } from '../renderer/vnode/VNodeTags';
+
+const INTERNAL_VNODE = '_inula_VNode';
+const INTERNAL_PROPS = '_inula_Props';
+const INTERNAL_NONDELEGATEEVENTS = '_inula_NonDelegatedEvents';
+
+// 通过 VNode 实例获取 DOM 节点
+export function getDom(vNode: VNode): Element | Text | null {
+  const { tag } = vNode;
+  if (tag === DomComponent || tag === DomText) {
+    return vNode.realNode;
+  }
+  return null;
+}
+
+// 将 VNode 属性相关信息挂到 DOM 对象的特定属性上
+export function saveVNode(vNode: VNode, dom: Element | Text | Container): void {
+  dom[INTERNAL_VNODE] = vNode;
+}
+
+// 用 DOM 节点，来找其对应的 VNode 实例
+export function getVNode(dom: Node | Container): VNode | null {
+  const vNode = dom[INTERNAL_VNODE] || (dom as Container)._treeRoot;
+  if (vNode) {
+    const { tag } = vNode;
+    if (tag === DomComponent || tag === DomText || tag === TreeRoot) {
+      return vNode;
+    }
+  }
+  return null;
+}
+
+// 用 DOM 对象，来寻找其对应或者说是最近父级的 vNode
+export function getNearestVNode(dom: Node): null | VNode {
+  let domNode: Node | null = dom;
+  // 寻找当前节点及其所有祖先节点是否有标记VNODE
+  while (domNode) {
+    const vNode = domNode[INTERNAL_VNODE];
+    if (vNode) {
+      return vNode;
+    }
+    domNode = domNode.parentNode;
+  }
+
+  return null;
+}
+
+// 获取 vNode 上的属性相关信息
+export function getVNodeProps(dom: Element | Text): Props | null {
+  return dom[INTERNAL_PROPS] || null;
+}
+
+// 将 DOM 属性相关信息挂到 DOM 对象的特定属性上
+export function updateVNodeProps(dom: Element | Text, props: Props): void {
+  dom[INTERNAL_PROPS] = props;
+}
+
+export function getNonDelegatedListenerMap(dom: Element | Text): Map<string, EventListener> {
+  let eventsMap = dom[INTERNAL_NONDELEGATEEVENTS];
+  if (!eventsMap) {
+    eventsMap = new Map();
+    dom[INTERNAL_NONDELEGATEEVENTS] = eventsMap;
+  }
+  return eventsMap;
+}
diff --git a/packages/inula-reactive/src/dom/DOMOperator.ts b/packages/inula-reactive/src/dom/DOMOperator.ts
new file mode 100644
index 00000000..56eef88f
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMOperator.ts
@@ -0,0 +1,224 @@
+/*
+ * 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.
+ */
+
+import { saveVNode, updateVNodeProps } from './DOMInternalKeys';
+import { createDom } from './utils/DomCreator';
+import { getSelectionInfo, resetSelectionRange, SelectionData } from './SelectionRangeHandler';
+import { isDocument, shouldAutoFocus } from './utils/Common';
+import { NSS } from './utils/DomCreator';
+import { adjustStyleValue } from './DOMPropertiesHandler/StyleHandler';
+import type { VNode } from '../renderer/Types';
+import { setInitValue, getPropsWithoutValue, updateValue } from './valueHandler';
+import { compareProps, setDomProps } from './DOMPropertiesHandler/DOMPropertiesHandler';
+import { isNativeElement, validateProps } from './validators/ValidateProps';
+import { watchValueChange } from './valueHandler/ValueChangeHandler';
+import { DomComponent, DomText } from '../renderer/vnode/VNodeTags';
+import { updateCommonProp } from './DOMPropertiesHandler/UpdateCommonProp';
+import { getCurrentRoot } from '../renderer/RootStack';
+
+export type Props = Record<string, any> & {
+  autoFocus?: boolean;
+  children?: any;
+  dangerouslySetInnerHTML?: any;
+  disabled?: boolean;
+  hidden?: boolean;
+  style?: { display?: string };
+};
+
+export type Container = (Element & { _treeRoot?: VNode | null }) | (Document & { _treeRoot?: VNode | null });
+
+let selectionInfo: null | SelectionData = null;
+
+function getChildNS(parentNS: string | null, tagName: string): string {
+  if (parentNS === NSS.svg && tagName === 'foreignObject') {
+    return NSS.html;
+  }
+
+  if (parentNS === null || parentNS === NSS.html) {
+    // 没有父命名空间，或父命名空间为xhtml
+    return NSS[tagName] ?? NSS.html;
+  }
+
+  // 默认返回parentNamespace.
+  return parentNS;
+}
+
+// 获取容器
+export function getNSCtx(parentNS: string, type: string, dom?: Container): string {
+  return dom ? getChildNS(dom.namespaceURI ?? null, dom.nodeName) : getChildNS(parentNS, type);
+}
+
+export function prepareForSubmit(): void {
+  selectionInfo = <SelectionData>getSelectionInfo();
+}
+
+export function resetAfterSubmit(): void {
+  resetSelectionRange(selectionInfo);
+  selectionInfo = null;
+}
+
+// 创建 DOM 对象
+export function newDom(tagName: string, props: Props, parentNamespace: string, vNode: VNode): Element {
+  // document取值于treeRoot对应的DOM的ownerDocument。
+  // 解决：在iframe中使用top的inula时，inula在创建DOM时用到的document并不是iframe的document，而是top中的document的问题。
+  const rootDom = getCurrentRoot()?.realNode;
+  const doc = isDocument(rootDom) ? rootDom : rootDom.ownerDocument;
+
+  const dom: Element = createDom(tagName, parentNamespace, doc);
+  // 将 vNode 节点挂到 DOM 对象上
+  saveVNode(vNode, dom);
+  // 将属性挂到 DOM 对象上
+  updateVNodeProps(dom, props);
+
+  return dom;
+}
+
+// 设置节点默认事件、属性
+export function initDomProps(dom: Element, tagName: string, rawProps: Props): boolean {
+  validateProps(tagName, rawProps);
+
+  // 获取不包括value，defaultValue的属性
+  const props: Record<string, any> = getPropsWithoutValue(tagName, dom, rawProps);
+
+  // 初始化DOM属性（不包括value，defaultValue）
+  const isNativeTag = isNativeElement(tagName, props);
+  setDomProps(dom, props, isNativeTag, true);
+
+  if (tagName === 'input' || tagName === 'textarea') {
+    // 增加监听value和checked的set、get方法
+    watchValueChange(dom);
+  }
+
+  // 设置dom.value值，触发受控组件的set方法
+  setInitValue(tagName, dom, rawProps);
+
+  return shouldAutoFocus(tagName, rawProps);
+}
+
+// 准备更新之前进行一系列校验 DOM，寻找属性差异等准备工作
+export function getPropChangeList(
+  dom: Element,
+  type: string,
+  lastRawProps: Props,
+  nextRawProps: Props
+): Record<string, any> {
+  // 校验两个对象的不同
+  validateProps(type, nextRawProps);
+
+  // 重新定义的属性不需要参与对比，被代理的组件需要把这些属性覆盖到props中
+  const oldProps: Record<string, any> = getPropsWithoutValue(type, dom, lastRawProps);
+  const newProps: Record<string, any> = getPropsWithoutValue(type, dom, nextRawProps);
+
+  return compareProps(oldProps, newProps);
+}
+
+export function isTextChild(type: string, props: Props): boolean {
+  if (type === 'textarea' || type === 'option' || type === 'noscript') {
+    return true;
+  }
+  const childType = typeof props.children;
+  if (childType === 'string' || childType === 'number') {
+    return true;
+  } else {
+    return (
+      props.dangerouslySetInnerHTML &&
+      typeof props.dangerouslySetInnerHTML === 'object' &&
+      props.dangerouslySetInnerHTML.__html !== null &&
+      props.dangerouslySetInnerHTML.__html !== undefined
+    );
+  }
+}
+
+export function newTextDom(text: string, processing: VNode): Text {
+  const textNode: Text = document.createTextNode(text);
+  saveVNode(processing, textNode);
+  return textNode;
+}
+
+// 提交vNode的类型为DomComponent或者DomText的更新
+export function submitDomUpdate(tag: string, vNode: VNode) {
+  const newProps = vNode.props;
+  const element: Element | null = vNode.realNode;
+
+  if (tag === DomComponent) {
+    // DomComponent类型
+    if (element !== null && element !== undefined) {
+      const type = vNode.type;
+      const changeList = vNode.changeList;
+      vNode.changeList = null;
+
+      if (changeList !== null) {
+        saveVNode(vNode, element);
+        updateVNodeProps(element, newProps);
+        // 应用diff更新Properties.
+        // 当一个选中的radio改变名称,浏览器使另一个radio的复选框为false.
+        if (
+          type === 'input' &&
+          newProps.type === 'radio' &&
+          newProps.name !== null &&
+          newProps.name !== undefined &&
+          newProps.checked !== null &&
+          newProps.checked !== undefined
+        ) {
+          updateCommonProp(element, 'checked', newProps.checked, true);
+        }
+        const isNativeTag = isNativeElement(type, newProps);
+        setDomProps(element, changeList, isNativeTag, false);
+        updateValue(type, element, newProps);
+      }
+    }
+  } else if (tag === DomText) {
+    if (element != null) {
+      // text类型
+      element.textContent = newProps;
+    }
+  }
+}
+
+export function clearText(dom: Element): void {
+  dom.textContent = '';
+}
+
+// 添加child元素
+export function appendChildElement(parent: Element | Container, child: Element | Text): void {
+  parent.appendChild(child);
+}
+
+// 插入dom元素
+export function insertDomBefore(parent: Element | Container, child: Element | Text, beforeChild: Element | Text) {
+  parent.insertBefore(child, beforeChild);
+}
+
+export function removeChildDom(parent: Element | Container, child: Element | Text) {
+  parent.removeChild(child);
+}
+
+// 隐藏元素
+export function hideDom(tag: string, dom: Element | Text) {
+  if (tag === DomComponent) {
+    (dom as HTMLElement).style.display = 'none';
+  } else if (tag === DomText) {
+    dom.textContent = '';
+  }
+}
+
+// 不隐藏元素
+export function unHideDom(tag: string, dom: Element | Text, props?: Props) {
+  if (tag === DomComponent) {
+    (dom as HTMLElement).style.display = adjustStyleValue('display', props?.style?.display ?? '');
+  } else if (tag === DomText) {
+    dom.textContent = props as any;
+  }
+}
diff --git a/packages/inula-reactive/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts b/packages/inula-reactive/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts
new file mode 100644
index 00000000..7bedfb83
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts
@@ -0,0 +1,202 @@
+/*
+ * 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.
+ */
+
+import { allDelegatedInulaEvents } from '../../event/EventHub';
+import { updateCommonProp } from './UpdateCommonProp';
+import { setStyles } from './StyleHandler';
+import { lazyDelegateOnRoot, listenNonDelegatedEvent } from '../../event/EventBinding';
+import { isEventProp } from '../validators/ValidateProps';
+import { getCurrentRoot } from '../../renderer/RootStack';
+import { getValue, isReactiveObj} from '../../reactive/Utils';
+import { handleReactiveProp } from '../../reactive/RContextCreator';
+import { ReactiveProxy } from '../../reactive/types';
+
+export function unwrapVal(propName: string, propVal: any, dom: Element, styleName?: string) {
+  const rawVal: any = handleReactiveProp(dom, propName, propVal, styleName);
+  return rawVal;
+}
+
+// 初始化DOM属性和更新 DOM 属性
+export function setDomProps(dom: Element, props: Record<string, any>, isNativeTag: boolean, isInit: boolean): void {
+  const keysOfProps = Object.keys(props);
+  let propName;
+  let propVal;
+  const keyLength = keysOfProps.length;
+  for (let i = 0; i < keyLength; i++) {
+    propName = keysOfProps[i];
+    propVal = props[propName];
+
+    if (propName === 'style') {
+      setStyles(dom, propVal);
+    } else if (isEventProp(propName)) {
+      // 事件监听属性处理
+      const currentRoot = getCurrentRoot();
+      if (!allDelegatedInulaEvents.has(propName)) {
+        listenNonDelegatedEvent(propName, dom, propVal);
+      } else if (currentRoot && !currentRoot.delegatedEvents.has(propName)) {
+        lazyDelegateOnRoot(currentRoot, propName);
+      }
+    } else if (propName === 'children') {
+      // 只处理纯文本子节点，其他children在VNode树中处理
+      const type = typeof propVal;
+      if (type === 'string' || type === 'number' || isReactiveObj(propVal)) {
+        dom.textContent = unwrapVal(propName, propVal, dom);
+      }
+    } else if (propName === 'dangerouslySetInnerHTML') {
+      dom.innerHTML = propVal.__html;
+    } else if (!isInit || (propVal !== null && propVal !== undefined)) {
+      updateCommonProp(dom, propName, propVal, isNativeTag);
+    }
+  }
+}
+
+// 找出两个 DOM 属性的差别，生成需要更新的属性集合
+export function compareProps(oldProps: Record<string, any>, newProps: Record<string, any>, dom: Element): Record<string, any> {
+  let updatesForStyle = {};
+  const toUpdateProps: Record<string | number, any> = {};
+  const keysOfOldProps = Object.keys(oldProps);
+  const keysOfNewProps = Object.keys(newProps);
+
+  const oldPropsLength = keysOfOldProps.length;
+  let propName;
+  let oldStyle;
+  let styleProps;
+  let styleProp;
+  // 找到旧属性中需要删除的属性
+  for (let i = 0; i < oldPropsLength; i++) {
+    propName = keysOfOldProps[i];
+    // 新属性中包含该属性或者该属性为空值的属性不需要处理
+    if (oldProps[propName] === null || oldProps[propName] === undefined || keysOfNewProps.includes(propName)) {
+      continue;
+    }
+
+    if (propName === 'style') {
+      oldStyle = oldProps[propName];
+      styleProps = Object.keys(oldStyle);
+      for (let j = 0; j < styleProps.length; j++) {
+        styleProp = styleProps[j];
+        updatesForStyle[styleProp] = '';
+      }
+    } else if (propName === 'autoFocus' || propName === 'children' || propName === 'dangerouslySetInnerHTML') {
+      continue;
+    } else if (isEventProp(propName)) {
+      if (!allDelegatedInulaEvents.has(propName)) {
+        toUpdateProps[propName] = null;
+      }
+    } else {
+      // 其它属性都要加入到删除队列里面，等待删除
+      toUpdateProps[propName] = null;
+    }
+  }
+
+  let newPropValue;
+  let oldPropValue;
+  let oldStyleProps;
+  let newStyleProps;
+  let newHTML;
+  let oldHTML;
+  // 遍历新属性，获取新增和变更属性
+  for (let i = 0; i < keysOfNewProps.length; i++) {
+    propName = keysOfNewProps[i];
+    newPropValue = newProps[propName];
+    oldPropValue = oldProps != null ? oldProps[propName] : null;
+
+    if (
+      newPropValue === oldPropValue ||
+      (newPropValue == null && oldPropValue == null) ||
+      (isReactiveObj(newPropValue) &&
+        isReactiveObj(oldPropValue) &&
+        getValue(newPropValue) === getValue(oldPropValue))
+    ) {
+      // 新旧属性值未发生变化，或者新旧属性皆为空值，不需要进行处理
+      continue;
+    }
+
+    if (propName === 'style') {
+      if (oldPropValue) {
+        // 之前 style 属性有设置非空值
+        // 原来有这个 style，但现在没这个 style 了
+        oldStyleProps = Object.keys(oldPropValue);
+        for (let j = 0; j < oldStyleProps.length; j++) {
+          styleProp = oldStyleProps[j];
+          if (!newPropValue || !Object.prototype.hasOwnProperty.call(newPropValue, styleProp)) {
+            updatesForStyle[styleProp] = '';
+          }
+        }
+
+        // 现在有这个 style，但是和原来不相等
+        newStyleProps = newPropValue ? Object.keys(newPropValue) : [];
+        for (let j = 0; j < newStyleProps.length; j++) {
+          styleProp = newStyleProps[j];
+          if (oldPropValue[styleProp] !== newPropValue[styleProp]) {
+            updatesForStyle[styleProp] = newPropValue[styleProp];
+          }
+        }
+      } else {
+        // 之前未设置 style 属性或者设置了空值
+        if (Object.keys(updatesForStyle).length === 0) {
+          toUpdateProps[propName] = null;
+        }
+        updatesForStyle = newPropValue;
+      }
+    } else if (propName === 'dangerouslySetInnerHTML') {
+      newHTML = newPropValue ? newPropValue.__html : undefined;
+      oldHTML = oldPropValue ? oldPropValue.__html : undefined;
+      if (newHTML != null) {
+        if (oldHTML !== newHTML) {
+          appendToUpdateProps(toUpdateProps, propName, newPropValue, dom);
+        }
+      }
+    } else if (propName === 'children') {
+      if (typeof newPropValue === 'string' || typeof newPropValue === 'number' || isReactiveObj(newPropValue)) {
+        appendToUpdateProps<string | number | ReactiveProxy<any>, string>(
+          toUpdateProps,
+          propName,
+          newPropValue,
+          dom,
+          String
+        );
+      }
+    } else if (isEventProp(propName)) {
+      const currentRoot = getCurrentRoot();
+      if (!allDelegatedInulaEvents.has(propName)) {
+        appendToUpdateProps(toUpdateProps, propName, newPropValue, dom);
+      } else if (currentRoot && !currentRoot.delegatedEvents.has(propName)) {
+        lazyDelegateOnRoot(currentRoot, propName);
+      }
+    } else {
+      appendToUpdateProps(toUpdateProps, propName, newPropValue, dom);
+    }
+  }
+
+  // 处理style
+  if (Object.keys(updatesForStyle).length > 0) {
+    appendToUpdateProps(toUpdateProps, 'style', updatesForStyle, dom);
+  }
+
+  return toUpdateProps;
+}
+
+function appendToUpdateProps<V, R>(
+  toUpdateProps: Record<string | number, any>,
+  propName: string,
+  propVal: V,
+  dom: Element,
+  formatter?: (value: V) => R
+) {
+  const rawVal: any = handleReactiveProp(dom, propName, propVal);
+
+  toUpdateProps[propName] = formatter ? formatter(rawVal) : rawVal;
+}
diff --git a/packages/inula-reactive/src/dom/DOMPropertiesHandler/StyleHandler.ts b/packages/inula-reactive/src/dom/DOMPropertiesHandler/StyleHandler.ts
new file mode 100644
index 00000000..ae8bc0fc
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMPropertiesHandler/StyleHandler.ts
@@ -0,0 +1,100 @@
+/*
+ * 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.
+ */
+
+import { unwrapVal } from './DOMPropertiesHandler';
+
+/**
+ * 不需要加长度单位的 css 属性
+ */
+const noUnitCSS = [
+  'animationIterationCount',
+  'columnCount',
+  'columns',
+  'gridArea',
+  'fontWeight',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+];
+
+const length = noUnitCSS.length;
+for (let i = 0; i < length; i++) {
+  const cssKey = noUnitCSS[i];
+  const attributeKey = cssKey.charAt(0).toUpperCase() + cssKey.slice(1);
+
+  // css 兼容性前缀 webkit: chrome, mo: IE或者Edge, Moz: 火狐
+  noUnitCSS.push('Webkit' + attributeKey);
+  noUnitCSS.push('mo' + attributeKey);
+  noUnitCSS.push('Moz' + attributeKey);
+}
+
+function isNeedUnitCSS(styleName: string) {
+  return !(
+    noUnitCSS.includes(styleName) ||
+    styleName.startsWith('borderImage') ||
+    styleName.startsWith('flex') ||
+    styleName.startsWith('gridRow') ||
+    styleName.startsWith('gridColumn') ||
+    styleName.startsWith('stroke') ||
+    styleName.startsWith('box') ||
+    styleName.endsWith('Opacity')
+  );
+}
+
+/**
+ * 对一些没有写单位的样式进行适配，例如：width: 10 => width: 10px
+ * 对空值或布尔值进行适配，转为空字符串
+ * 去掉多余空字符
+ */
+export function adjustStyleValue(name, value) {
+  let validValue = value;
+
+  if (typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) {
+    validValue = `${value}px`;
+  } else if (value === '' || value === null || value === undefined || typeof value === 'boolean') {
+    validValue = '';
+  }
+
+  return validValue;
+}
+
+/**
+ * 设置 DOM 节点的 style 属性
+ */
+export function setStyles(dom, styles) {
+  if (!styles) {
+    return;
+  }
+
+  const style = dom.style;
+  Object.keys(styles).forEach(name => {
+    const styleVal = styles[name];
+    const val = unwrapVal('style', styleVal, dom, name);
+
+    // 以--开始的样式直接设置即可
+    if (name.indexOf('--') === 0) {
+      style.setProperty(name, val);
+    } else {
+      // 使用这种赋值方式，浏览器可以将'WebkitLineClamp'， 'backgroundColor'分别识别为'-webkit-line-clamp'和'backgroud-color'
+      style[name] = adjustStyleValue(name, val);
+    }
+  });
+}
diff --git a/packages/inula-reactive/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts b/packages/inula-reactive/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts
new file mode 100644
index 00000000..27cc30e0
--- /dev/null
+++ b/packages/inula-reactive/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts
@@ -0,0 +1,155 @@
+/*
+ * 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.
+ */
+
+import { getPropDetails, PROPERTY_TYPE } from '../validators/PropertiesData';
+import { isInvalidValue } from '../validators/ValidateProps';
+import { getNamespaceCtx } from '../../renderer/ContextSaver';
+import { NSS } from '../utils/DomCreator';
+import { getDomTag } from '../utils/Common';
+import { unwrapVal } from './DOMPropertiesHandler';
+
+// 不需要装换的svg属性集合
+const svgHumpAttr = new Set();
+[
+  'allowReorder',
+  'autoReverse',
+  'baseFrequency',
+  'baseProfile',
+  'calcMode',
+  'clipPathUnits',
+  'contentScriptType',
+  'contentStyleType',
+  'diffuseConstant',
+  'edgeMode',
+  'externalResourcesRequired',
+  'filterRes',
+  'filterUnits',
+  'glyphRef',
+  'gradientTransform',
+  'gradientUnits',
+  'kernelMatrix',
+  'kernelUnitLength',
+  'keyPoints',
+  'keySplines',
+  'keyTimes',
+  'lengthAdjust',
+  'limitingConeAngle',
+  'markerHeight',
+  'markerUnits',
+  'markerWidth',
+  'maskContentUnits',
+  'maskUnits',
+  'numOctaves',
+  'pathLength',
+  'patternContentUnits',
+  'patternTransform,',
+  'patternUnits',
+  'pointsAtX',
+  'pointsAtY',
+  'pointsAtZ',
+  'preserveAlpha',
+  'preserveAspectRatio',
+  'primitiveUnits',
+  'referrerPolicy',
+  'refX',
+  'refY',
+  'repeatCount',
+  'repeatDur',
+  'requiredExtensions',
+  'requiredFeatures',
+  'specularConstant',
+  'specularExponent',
+  'spreadMethod',
+  'startOffset',
+  'stdDeviation',
+  'stitchTiles',
+  'surfaceScale',
+  'systemLanguage',
+  'tableValues',
+  'targetX',
+  'targetY',
+  'textLength',
+  'viewBox',
+  'viewTarget',
+  'xChannelSelector',
+  'yChannelSelector',
+  'zoomAndPan',
+].forEach(name => svgHumpAttr.add(name));
+
+// 驼峰 变 “-”
+function convertToLowerCase(str) {
+  const replacer = (match, char) => `-${char.toLowerCase()}`;
+  return str.replace(/([A-Z])/g, replacer);
+}
+
+/**
+ * 给 dom 设置属性
+ * attrName 指代码中属性设置的属性名称（如 class）
+ * 多数情况 attrName 仅用作初始 DOM 节点对象使用，而 property 更多用于页面交互
+ */
+export function updateCommonProp(dom: Element, attrName: string, value: any, isNativeTag: boolean) {
+  const propDetails = getPropDetails(attrName);
+
+  if (isInvalidValue(attrName, value, propDetails, isNativeTag)) {
+    value = null;
+  }
+
+  if (attrName === '') {
+    return;
+  }
+
+  if (!isNativeTag || propDetails === null) {
+    // 特殊处理svg的属性，把驼峰式的属性名称转成'-'
+    if (getDomTag(dom) === 'svg' || getNamespaceCtx() === NSS.svg) {
+      if (!svgHumpAttr.has(attrName)) {
+        attrName = convertToLowerCase(attrName);
+      }
+    }
+
+    if (value === null) {
+      dom.removeAttribute(attrName);
+    } else {
+      dom.setAttribute(attrName, String(unwrapVal(attrName, value, dom)));
+    }
+  } else if (['checked', 'multiple', 'muted', 'selected'].includes(propDetails.attrName)) {
+    if (value === null) {
+      // 必填属性设置默认值
+      dom[propDetails.attrName] = false;
+    } else {
+      dom[propDetails.attrName] = value;
+    }
+  } else {
+    // 处理其他普通属性
+    if (value === null) {
+      dom.removeAttribute(propDetails.attrName);
+    } else {
+      const { type, attrNS } = propDetails; // 数据类型、固有属性命名空间
+      const attributeName = propDetails.attrName; // 固有属性名
+      let attributeValue;
+      if (type === PROPERTY_TYPE.BOOLEAN) {
+        // 即可以用作标志又可以是属性值的属性
+        attributeValue = '';
+      } else {
+        attributeValue = String(unwrapVal(attrName, value, dom));
+      }
+
+      if (attrNS) {
+        dom.setAttributeNS(attrNS, attributeName, attributeValue);
+      } else {
+        dom.setAttribute(attributeName, attributeValue);
+      }
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/dom/SelectionRangeHandler.ts b/packages/inula-reactive/src/dom/SelectionRangeHandler.ts
new file mode 100644
index 00000000..e7769821
--- /dev/null
+++ b/packages/inula-reactive/src/dom/SelectionRangeHandler.ts
@@ -0,0 +1,184 @@
+/*
+ * 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.
+ */
+
+/**
+ * 处理文本框、输入框中框选范围内的数据
+ */
+
+import { getIFrameFocusedDom, isText } from './utils/Common';
+import { isElement } from './utils/Common';
+
+type SelectionRange = {
+  start: number | null,
+  end: number | null
+}
+
+/**
+ * 设置聚焦的 textarea 或 input 节点的选择范围
+ * @param dom 需要设置选择范围的 input 或 textarea
+ * @param range 选择范围对象
+ */
+function setSelectionRange(dom: HTMLInputElement | HTMLTextAreaElement, range) {
+  const { start, end } = range;
+  let realEnd = end;
+
+  if (realEnd === null || realEnd === undefined) {
+    realEnd = start;
+  }
+
+  if (typeof dom.setSelectionRange === 'function') {
+    dom.setSelectionRange(start, realEnd);
+  }
+}
+
+/**
+ * 获取文本框、输入框中选中的文本的范围
+ * @param dom 需要设置选择范围的 input 或 textarea
+ * @return {start: selectionStart, end: selectionEnd}
+ */
+function getSelectionRange(dom: Element | HTMLInputElement | HTMLTextAreaElement | void | null) {
+  const selectionRange: SelectionRange = { start: 0, end: 0 };
+
+  if (!dom) {
+    return selectionRange;
+  }
+  if ('selectionStart' in dom) {
+    // 现代浏览器的 input 或 textarea 有 selectionStart 属性.
+    selectionRange.start = dom.selectionStart;
+    selectionRange.end = dom.selectionEnd;
+  }
+
+  return selectionRange;
+}
+
+// 判断第一个节点和另一个节点是否是包含关系
+function isNodeContainsByTargetNode(targetNode, node) {
+  if (!targetNode || !node) {
+    return false;
+  }
+  if (targetNode === node) {
+    return true;
+  }
+  if (isText(targetNode)) {
+    return false;
+  }
+  if (isText(node)) {
+    return isNodeContainsByTargetNode(targetNode, node.parentNode);
+  }
+  if (typeof targetNode.contains === 'function') {
+    return targetNode.contains(node); // 该的节点是否为目标节点的后代节点
+  }
+  if (typeof targetNode.compareDocumentPosition === 'function') {
+    // compareDocumentPosition 数值，表示两个节点彼此做比较的位置
+    const CONTAINS_CODE = 16;
+    // 返回 16 代表 第二节点在第一节点内部
+    return targetNode.compareDocumentPosition(node) === CONTAINS_CODE;
+  }
+  return false;
+}
+
+function isInDocument(dom) {
+  if (dom && dom.ownerDocument) {
+    return isNodeContainsByTargetNode(dom.ownerDocument.documentElement, dom);
+  }
+  return false;
+}
+
+// 判断一个标签是否有设置选择范围的能力
+export function hasSelectionProperties(dom) {
+  let elementType;
+
+  if (dom && dom.nodeName) {
+    elementType = dom.nodeName.toLowerCase();
+    const validInputType = ['text', 'search', 'tel', 'url', 'password'];
+
+    if (elementType === 'input') {
+      return validInputType.includes(dom.type);
+    } else if (elementType === 'textarea') {
+      return dom.contentEditable === 'true';
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+// 返回当前 focus 的元素以及其选中的范围
+export function getSelectionInfo() {
+  const focusedDom = getIFrameFocusedDom();
+  return {
+    focusedDom,
+    selectionRange: hasSelectionProperties(focusedDom) ? getSelectionRange(focusedDom) : null,
+  };
+}
+
+export interface SelectionData {
+  focusedDom: HTMLInputElement | HTMLTextAreaElement | void;
+  selectionRange?: {
+    start: number;
+    end: number;
+  };
+}
+
+// 防止选择范围内的信息因为节点删除或其他原因导致的信息丢失
+export function resetSelectionRange(preSelectionRangeData: SelectionData | null) {
+  // 当前 focus 的元素
+  const currentFocusedDom = getIFrameFocusedDom();
+
+  // 先前 focus 的元素
+  const preFocusedDom = preSelectionRangeData?.focusedDom;
+
+  if (!preFocusedDom) {
+    return;
+  }
+
+  // 先前的选择范围信息
+  const preSelectionRange = preSelectionRangeData?.selectionRange;
+
+  if (currentFocusedDom !== preFocusedDom && isInDocument(preFocusedDom)) {
+    if (preSelectionRange !== null) {
+      setSelectionRange(preFocusedDom, preSelectionRange);
+    }
+
+    // 滚动条位置可能会因为一个节点的选中变化位置，需要做处理
+    const ancestors: Record<string, any>[] = [];
+    let ancestor: any = preFocusedDom.parentNode;
+    // 查找先前的 focus 节点的先祖
+    while (ancestor) {
+      if (isElement(ancestor)) {
+        // 是元素节点，就把先祖信息放到先祖数组中
+        const { scrollLeft, scrollTop } = ancestor;
+        ancestors.push({
+          dom: ancestor,
+          scrollLeft,
+          scrollTop,
+        });
+      }
+      ancestor = ancestor.parentNode;
+    }
+
+    // 执行先前 focus 节点的 focus 方法
+    if (typeof preFocusedDom.focus === 'function') {
+      preFocusedDom.focus();
+    }
+
+    ancestors.forEach(ancestorInfo => {
+      const ancestorDom = ancestorInfo.dom;
+      ancestorDom.scrollLeft = ancestorInfo.scrollLeft;
+      ancestorDom.scrollTop = ancestorInfo.scrollTop;
+    });
+  }
+}
diff --git a/packages/inula-reactive/src/dom/utils/Common.ts b/packages/inula-reactive/src/dom/utils/Common.ts
new file mode 100644
index 00000000..eb096f8d
--- /dev/null
+++ b/packages/inula-reactive/src/dom/utils/Common.ts
@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+import { InulaDom } from './Interface';
+import { Props } from '../DOMOperator';
+
+/**
+ * 获取当前聚焦的 input 或者 textarea 元素
+ * @param doc 指定 document
+ */
+export function getFocusedDom(doc?: Document): InulaDom | null {
+  const currentDocument = doc ?? document;
+
+  return currentDocument.activeElement ?? currentDocument.body;
+}
+
+// 如果 input 或者 textarea 元素中有文字被选中时，activeElement 属性就会返回该元素
+// 此处是为了返回深层的 iframe 中的真实元素
+export function getIFrameFocusedDom() {
+  const currentWindow = window;
+  let focusedDom = getFocusedDom();
+  // 深度优先，返回的元素如果是 iframe 对象则继续查找
+  while (focusedDom instanceof currentWindow.HTMLIFrameElement) {
+    try {
+      // 访问 HTMLIframeElement 的 contentDocument 可能会导致浏览器抛出错误
+      if (typeof focusedDom.contentWindow?.location.href === 'string') {
+        // iframe 的内容为同源
+        focusedDom = getFocusedDom(focusedDom.contentWindow.document);
+      } else {
+        // 非同源 iframe 因为安全性原因无法获取其中的具体元素
+        break;
+      }
+    } catch (e) {
+      // 非同源 iframe 因为安全性原因无法获取其中的具体元素
+      break;
+    }
+  }
+  return focusedDom;
+}
+
+export function isElement(dom) {
+  return dom.nodeType === 1;
+}
+
+export function isText(dom) {
+  return dom.nodeType === 3;
+}
+
+export function isComment(dom) {
+  return dom.nodeType === 8;
+}
+
+export function isDocument(dom) {
+  return dom.nodeType === 9;
+}
+
+export function isDocumentFragment(dom) {
+  return dom.nodeType === 11;
+}
+
+export function getDomTag(dom) {
+  return dom.nodeName.toLowerCase();
+}
+
+export function isInputElement(dom: Element): dom is HTMLInputElement {
+  return getDomTag(dom) === 'input';
+}
+
+const types = ['button', 'input', 'select', 'textarea'];
+
+// button、input、select、textarea、如果有 autoFocus 属性需要focus
+export function shouldAutoFocus(tagName: string, props: Props): boolean {
+  return types.includes(tagName) ? Boolean(props.autoFocus) : false;
+}
+
+export function isNotNull(object: any): boolean {
+  return object !== null && object !== undefined;
+}
diff --git a/packages/inula-reactive/src/dom/utils/DomCreator.ts b/packages/inula-reactive/src/dom/utils/DomCreator.ts
new file mode 100644
index 00000000..41b36da3
--- /dev/null
+++ b/packages/inula-reactive/src/dom/utils/DomCreator.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 const NSS = {
+  html: 'http://www.w3.org/1999/xhtml',
+  math: 'http://www.w3.org/1998/Math/MathML',
+  svg: 'http://www.w3.org/2000/svg',
+};
+
+// 创建DOM元素
+export function createDom(tagName: string, parentNamespace: string, doc: Document): Element {
+  let dom: Element;
+  const selfNamespace = NSS[tagName] || NSS.html;
+  const ns = parentNamespace !== NSS.html ? parentNamespace : selfNamespace;
+
+  if (ns !== NSS.html) {
+    dom = doc.createElementNS(ns, tagName);
+  } else {
+    dom = doc.createElement(tagName);
+  }
+  return dom;
+}
diff --git a/packages/inula-reactive/src/dom/utils/Interface.ts b/packages/inula-reactive/src/dom/utils/Interface.ts
new file mode 100644
index 00000000..5d3e6eaa
--- /dev/null
+++ b/packages/inula-reactive/src/dom/utils/Interface.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 interface Props {
+  [propName: string]: any;
+}
+
+export interface InulaSelect extends HTMLSelectElement {
+  _multiple?: boolean;
+}
+
+export type InulaDom = Element | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
diff --git a/packages/inula-reactive/src/dom/validators/PropertiesData.ts b/packages/inula-reactive/src/dom/validators/PropertiesData.ts
new file mode 100644
index 00000000..ac47f517
--- /dev/null
+++ b/packages/inula-reactive/src/dom/validators/PropertiesData.ts
@@ -0,0 +1,142 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-sparse-arrays */
+
+// 属性值的数据类型
+export enum PROPERTY_TYPE {
+  BOOLEAN, // 普通布尔类型
+  STRING, // 普通的字符串类型
+  SPECIAL, // 需要特殊处理的属性类型
+  BOOLEAN_STR, // 字符串类型的 true false
+}
+
+export type PropDetails = {
+  propName: string;
+  type: PROPERTY_TYPE;
+  attrName: string;
+  attrNS: string | null;
+};
+
+type PropData = string | PROPERTY_TYPE | undefined | null;
+
+// 属性相关数据
+// 依次为 propertyName、type、attributeName、attributeNamespace，不填则使用默认值
+// type 默认 STRING
+// attributeName 默认与 propertyName 相同
+// attributeNamespace 默认 null
+const propertiesData = [
+  // 一些特殊属性
+  ['children', PROPERTY_TYPE.SPECIAL],
+  ['dangerouslySetInnerHTML', PROPERTY_TYPE.SPECIAL],
+  ['defaultValue', PROPERTY_TYPE.SPECIAL],
+  ['defaultChecked', PROPERTY_TYPE.SPECIAL],
+  ['innerHTML', PROPERTY_TYPE.SPECIAL],
+  ['style', PROPERTY_TYPE.SPECIAL],
+
+  // propertyName 和 attributeName 不一样
+  ['acceptCharset', , 'accept-charset'],
+  ['className', , 'class'],
+  ['htmlFor', , 'for'],
+  ['httpEquiv', , 'http-equiv'],
+  // 字符串类型的 true false
+  ['contentEditable', PROPERTY_TYPE.BOOLEAN_STR, 'contenteditable'],
+  ['spellCheck', PROPERTY_TYPE.BOOLEAN_STR, 'spellcheck'],
+  ['draggable', PROPERTY_TYPE.BOOLEAN_STR],
+  ['value', PROPERTY_TYPE.BOOLEAN_STR],
+  // SVG 相关，字符串类型的 true false
+  ['autoReverse', PROPERTY_TYPE.BOOLEAN_STR],
+  ['externalResourcesRequired', PROPERTY_TYPE.BOOLEAN_STR],
+  ['focusable', PROPERTY_TYPE.BOOLEAN_STR],
+  ['preserveAlpha', PROPERTY_TYPE.BOOLEAN_STR],
+  // 布尔类型
+  ['allowFullScreen', PROPERTY_TYPE.BOOLEAN, 'allowfullscreen'],
+  ['async', PROPERTY_TYPE.BOOLEAN],
+  ['autoFocus', PROPERTY_TYPE.BOOLEAN, 'autofocus'],
+  ['autoPlay', PROPERTY_TYPE.BOOLEAN, 'autoplay'],
+  ['controls', PROPERTY_TYPE.BOOLEAN],
+  ['default', PROPERTY_TYPE.BOOLEAN],
+  ['defer', PROPERTY_TYPE.BOOLEAN],
+  ['disabled', PROPERTY_TYPE.BOOLEAN],
+  ['disablePictureInPicture', PROPERTY_TYPE.BOOLEAN, 'disablepictureinpicture'],
+  ['disableRemotePlayback', PROPERTY_TYPE.BOOLEAN, 'disableremoteplayback'],
+  ['formNoValidate', PROPERTY_TYPE.BOOLEAN, 'formnovalidate'],
+  ['hidden', PROPERTY_TYPE.BOOLEAN],
+  ['loop', PROPERTY_TYPE.BOOLEAN],
+  ['noModule', PROPERTY_TYPE.BOOLEAN, 'nomodule'],
+  ['noValidate', PROPERTY_TYPE.BOOLEAN, 'novalidate'],
+  ['open', PROPERTY_TYPE.BOOLEAN],
+  ['playsInline', PROPERTY_TYPE.BOOLEAN, 'playsinline'],
+  ['readOnly', PROPERTY_TYPE.BOOLEAN, 'readonly'],
+  ['required', PROPERTY_TYPE.BOOLEAN],
+  ['reversed', PROPERTY_TYPE.BOOLEAN],
+  ['scoped', PROPERTY_TYPE.BOOLEAN],
+  ['seamless', PROPERTY_TYPE.BOOLEAN],
+  ['itemScope', PROPERTY_TYPE.BOOLEAN, 'itemscope'],
+  // 框架需要当做 property 来处理的，而不是 attribute 来处理的属性
+  ['checked', PROPERTY_TYPE.BOOLEAN],
+  ['multiple', PROPERTY_TYPE.BOOLEAN],
+  ['muted', PROPERTY_TYPE.BOOLEAN],
+  ['selected', PROPERTY_TYPE.BOOLEAN],
+
+  // SVG 属性
+  // xlink namespace 的 SVG 属性
+  ['xlinkActuate', , 'xlink:actuate', 'http://www.w3.org/1999/xlink'],
+  ['xlinkArcrole', , 'xlink:arcrole', 'http://www.w3.org/1999/xlink'],
+  ['xlinkRole', , 'xlink:role', 'http://www.w3.org/1999/xlink'],
+  ['xlinkShow', , 'xlink:show', 'http://www.w3.org/1999/xlink'],
+  ['xlinkTitle', , 'xlink:title', 'http://www.w3.org/1999/xlink'],
+  ['xlinkType', , 'xlink:type', 'http://www.w3.org/1999/xlink'],
+  // xml namespace 的 SVG 属性
+  ['xmlBase', , 'xml:base', 'http://www.w3.org/XML/1998/namespace'],
+  ['xmlLang', , 'xml:lang', 'http://www.w3.org/XML/1998/namespace'],
+  ['xmlSpace', , 'xml:space', 'http://www.w3.org/XML/1998/namespace'],
+  // HTML and SVG 中都有的属性，大小写敏感
+  ['tabIndex', , 'tabindex'],
+  ['crossOrigin', , 'crossorigin'],
+  // 接受 URL 的属性
+  ['xlinkHref', , 'xlink:href', 'http://www.w3.org/1999/xlink'],
+  ['formAction', , 'formaction'],
+];
+
+const propsDetailData = {};
+
+propertiesData.forEach(record => {
+  const propName = record[0];
+  let [type, attrName, attrNS] = record.slice(1) as PropData[];
+
+  if (type === undefined) {
+    type = PROPERTY_TYPE.STRING;
+  }
+
+  if (!attrName) {
+    attrName = propName;
+  }
+
+  if (!attrNS) {
+    attrNS = null;
+  }
+
+  propsDetailData[propName!] = {
+    propName,
+    type,
+    attrName,
+    attrNS,
+  };
+});
+
+export function getPropDetails(name: string): PropDetails | null {
+  return propsDetailData[name] || null;
+}
diff --git a/packages/inula-reactive/src/dom/validators/ValidateProps.ts b/packages/inula-reactive/src/dom/validators/ValidateProps.ts
new file mode 100644
index 00000000..2a6b27e1
--- /dev/null
+++ b/packages/inula-reactive/src/dom/validators/ValidateProps.ts
@@ -0,0 +1,121 @@
+/*
+ * 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.
+ */
+
+import { getPropDetails, PROPERTY_TYPE, PropDetails } from './PropertiesData';
+
+const INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
+
+// 是内置元素
+export function isNativeElement(tagName: string, props: Record<string, any>) {
+  return !tagName.includes('-') && props.is === undefined;
+}
+
+function isInvalidBoolean(attributeName: string, value: any, propDetails: PropDetails): boolean {
+  if (propDetails.type === PROPERTY_TYPE.SPECIAL) {
+    return false;
+  }
+
+  // 布尔值校验
+  if (typeof value === 'boolean') {
+    const isBooleanType = propDetails.type === PROPERTY_TYPE.BOOLEAN_STR || propDetails.type === PROPERTY_TYPE.BOOLEAN;
+
+    if (isBooleanType || (attributeName.startsWith('data-') && attributeName.startsWith('aria-'))) {
+      return false;
+    }
+
+    // 否则有问题
+    return true;
+  }
+
+  return false;
+}
+
+// 是事件属性
+export function isEventProp(propName) {
+  return propName.substr(0, 2) === 'on';
+}
+
+function isValidProp(tagName, name, value) {
+  // 校验事件名称
+  if (isEventProp(name)) {
+    // 事件名称不满足小驼峰
+    if (INVALID_EVENT_NAME_REGEX.test(name)) {
+      console.error('Invalid event property `%s`, events use the camelCase name.', name);
+    }
+    return true;
+  }
+
+  const propDetails = getPropDetails(name);
+
+  // 当已知属性为错误类型时发出警告
+  if (propDetails !== null && isInvalidBoolean(name, value, propDetails)) {
+    return false;
+  }
+
+  return true;
+}
+
+export function isInvalidValue(
+  name: string,
+  value: any,
+  propDetails: PropDetails | null,
+  isNativeTag: boolean
+): boolean {
+  if (value === null || value === undefined) {
+    return true;
+  }
+
+  if (!isNativeTag) {
+    return false;
+  }
+
+  if (propDetails !== null && isInvalidBoolean(name, value, propDetails)) {
+    return true;
+  }
+
+  if (propDetails !== null && propDetails.type === PROPERTY_TYPE.BOOLEAN) {
+    return !value;
+  }
+
+  return false;
+}
+
+// dev模式下校验属性是否合法
+export function validateProps(type, props) {
+  if (!props) {
+    return;
+  }
+
+  // 非内置的元素
+  if (!isNativeElement(type, props)) {
+    return;
+  }
+
+  // style属性必须是对象
+  if (props.style !== null && props.style !== undefined && typeof props.style !== 'object') {
+    throw new Error('style should be a object.');
+  }
+
+  if (isDev) {
+    // 校验属性
+    const invalidProps = Object.keys(props).filter(key => !isValidProp(type, key, props[key]));
+
+    const propString = invalidProps.map(prop => '`' + prop + '`').join(', ');
+
+    if (invalidProps.length >= 1) {
+      console.error('Invalid value for prop %s on <%s> tag.', propString, type);
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/InputValueHandler.ts b/packages/inula-reactive/src/dom/valueHandler/InputValueHandler.ts
new file mode 100644
index 00000000..cc6d6f8e
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/InputValueHandler.ts
@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+import { updateCommonProp } from '../DOMPropertiesHandler/UpdateCommonProp';
+import { Props } from '../utils/Interface';
+import { getValue } from '../../reactive/Utils';
+import { handleReactiveProp } from '../../reactive/RContextCreator';
+
+function getInitValue(dom: HTMLInputElement, props: Props) {
+  const { value, defaultValue, checked, defaultChecked } = props;
+
+  const defaultValueStr = defaultValue !== null && defaultValue !== undefined ? defaultValue : '';
+  const initValue = value !== null && value !== undefined ? value : defaultValueStr;
+  const initChecked = checked !== null && checked !== undefined ? checked : defaultChecked;
+
+  return { initValue, initChecked };
+}
+
+export function getInputPropsWithoutValue(dom: HTMLInputElement, props: Props) {
+  // checked属于必填属性，无法置
+  let { checked } = props;
+  if (checked === undefined) {
+    checked = getInitValue(dom, props).initChecked;
+  }
+
+  return {
+    ...props,
+    value: undefined,
+    defaultValue: undefined,
+    defaultChecked: undefined,
+    checked,
+  };
+}
+
+export function updateInputValue(dom: HTMLInputElement, props: Props) {
+  const { value, checked } = props;
+
+  const val = getValue(value);
+
+  if (val !== undefined) {
+    // 处理 dom.value 逻辑
+    if (dom.value !== String(val)) {
+      dom.value = String(val);
+    }
+  } else if (checked !== undefined) {
+    updateCommonProp(dom, 'checked', checked, true);
+  }
+}
+
+// 设置input的初始值
+export function setInitInputValue(dom: HTMLInputElement, props: Props) {
+  const { value, defaultValue } = props;
+  const { initValue, initChecked } = getInitValue(dom, props);
+
+  if (value !== undefined || defaultValue !== undefined) {
+    // value 的使用优先级 value 属性 > defaultValue 属性 > 空字符串
+    const initValueStr = getValue(initValue);
+
+    handleReactiveProp(dom, 'value', value);
+
+    dom.value = initValueStr;
+
+    dom.defaultValue = initValueStr;
+  }
+
+  // checked 的使用优先级 checked 属性 > defaultChecked 属性 > false
+  dom.defaultChecked = Boolean(initChecked);
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/OptionValueHandler.ts b/packages/inula-reactive/src/dom/valueHandler/OptionValueHandler.ts
new file mode 100644
index 00000000..13532ff5
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/OptionValueHandler.ts
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+import { Children } from '../../external/ChildrenUtil';
+import { Props } from '../utils/Interface';
+
+// 把 const a = 'a'; <option>gir{a}ffe</option> 转成 giraffe
+function concatChildren(children) {
+  let content = '';
+  Children.forEach(children, function (child) {
+    content += child;
+  });
+
+  return content;
+}
+
+export function getOptionPropsWithoutValue(dom: Element, props: Props) {
+  const content = concatChildren(props.children);
+
+  return {
+    ...props,
+    children: content || undefined, // 覆盖children
+  };
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/SelectValueHandler.ts b/packages/inula-reactive/src/dom/valueHandler/SelectValueHandler.ts
new file mode 100644
index 00000000..8308d44f
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/SelectValueHandler.ts
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+import { InulaSelect, Props } from '../utils/Interface';
+
+function updateMultipleValue(options, newValues) {
+  const newValueSet = new Set();
+
+  newValues.forEach(val => {
+    newValueSet.add(String(val));
+  });
+
+  // options 非数组
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    const newValue = newValueSet.has(option.value);
+
+    if (option.selected !== newValue) {
+      option.selected = newValue;
+    }
+  }
+}
+
+// 单选时传入的选项参数必须是可以转为字符串的类型
+function updateSingleValue(options, newValue) {
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+
+    if (option.value === String(newValue)) {
+      option.selected = true;
+      break;
+    }
+  }
+}
+
+// 更新 <option>
+function updateValue(options, newValues: any, isMultiple: boolean) {
+  if (isMultiple) {
+    updateMultipleValue(options, newValues);
+  } else {
+    updateSingleValue(options, newValues);
+  }
+}
+
+export function getSelectPropsWithoutValue(dom: InulaSelect, properties: Record<string, any>) {
+  return {
+    ...properties,
+    value: undefined,
+  };
+}
+
+export function updateSelectValue(dom: InulaSelect, props: Props, isInit = false) {
+  const { value, defaultValue, multiple } = props;
+
+  const oldMultiple = dom._multiple !== undefined ? dom._multiple : dom.multiple;
+  const newMultiple = Boolean(multiple);
+  dom._multiple = newMultiple;
+
+  // 设置了 value 属性
+  if (value !== null && value !== undefined) {
+    updateValue(dom.options, value, newMultiple);
+  } else if (oldMultiple !== newMultiple) {
+    // 修改了 multiple 属性
+    // 切换 multiple 之后，如果设置了 defaultValue 需要重新应用
+    if (defaultValue !== null && defaultValue !== undefined) {
+      updateValue(dom.options, defaultValue, newMultiple);
+    } else {
+      // 恢复到未选定状态
+      updateValue(dom.options, newMultiple ? [] : '', newMultiple);
+    }
+  } else if (isInit && defaultValue !== null && defaultValue !== undefined) {
+    // 设置了 defaultValue 属性
+    updateValue(dom.options, defaultValue, newMultiple);
+  }
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/TextareaValueHandler.ts b/packages/inula-reactive/src/dom/valueHandler/TextareaValueHandler.ts
new file mode 100644
index 00000000..60015a51
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/TextareaValueHandler.ts
@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+import { Props } from '../utils/Interface';
+import { getValue } from '../../reactive/Utils';
+import { handleReactiveProp } from '../../reactive/RContextCreator';
+
+// 值的优先级 value > children > defaultValue
+function getInitValue(props: Props) {
+  const { value } = props;
+
+  if (value === undefined) {
+    const { defaultValue, children } = props;
+    let initValue = defaultValue;
+
+    // children content存在时，会覆盖defaultValue
+    if (children !== null && children !== undefined) {
+      // 子节点不是纯文本，则取第一个子节点
+      initValue = children instanceof Array ? children[0] : children;
+    }
+
+    // defaultValue 属性未配置，置为空字符串
+    initValue = initValue ?? '';
+    return initValue;
+  } else {
+    return value;
+  }
+}
+
+export function getTextareaPropsWithoutValue(dom: HTMLTextAreaElement, properties: Record<string, any>) {
+  return {
+    ...properties,
+    value: undefined,
+  };
+}
+
+export function updateTextareaValue(dom: HTMLTextAreaElement, props: Props, isInit = false) {
+  if (isInit) {
+    const initValue = getInitValue(props);
+    if (initValue !== '') {
+      dom.value = getValue(initValue);
+
+      handleReactiveProp(dom, 'value', props.value);
+    }
+  } else {
+    // 获取当前节点的 value 值
+    let value = props.value;
+    if (value !== null && value !== undefined) {
+      value = String(value);
+      // 当且仅当值实际发生变化时才去设置节点的value值
+      if (dom.value !== value) {
+        dom.value = value;
+      }
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/ValueChangeHandler.ts b/packages/inula-reactive/src/dom/valueHandler/ValueChangeHandler.ts
new file mode 100644
index 00000000..cd07c35c
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/ValueChangeHandler.ts
@@ -0,0 +1,93 @@
+/*
+ * 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.
+ */
+
+/**
+ * Inula的输入框和文本框的change事件在原生的change事件上做了一层处理
+ * 只有值发生变化时才会触发change事件。
+ */
+
+const HANDLER_KEY = '_valueChangeHandler';
+
+// 判断是否是 check 类型
+function isCheckType(dom: HTMLInputElement): boolean {
+  const { type, nodeName } = dom;
+  if (nodeName && nodeName.toLowerCase() === 'input') {
+    return type === 'checkbox' || type === 'radio';
+  }
+
+  return false;
+}
+
+/**
+ * value值发生变化时，执行value的getter、setter。
+ * 事件触发时，判断currentVal 和 input 的真实值是否一致，从而判断是否实际变更，
+ * 只有发生变更了，事件处理才会生成一个change事件
+ */
+export function watchValueChange(dom) {
+  if (!dom[HANDLER_KEY]) {
+    // check: 复选框、单选框; value: 输入框、文本框等
+    const keyForValue = isCheckType(dom) ? 'checked' : 'value';
+    // 获取 value 属性的描述信息，其 value 在其 constructor 的 原型上
+    const descriptor = Object.getOwnPropertyDescriptor(dom.constructor.prototype, keyForValue);
+
+    if (Object.prototype.hasOwnProperty.call(dom, keyForValue)) {
+      return;
+    }
+
+    // currentVal存储最新值，并重写value的setter、getter
+    let currentVal = String(dom[keyForValue]);
+
+    const setFunc = descriptor?.set;
+    Object.defineProperty(dom, keyForValue, {
+      ...descriptor,
+      set: function (value) {
+        currentVal = String(value);
+        setFunc?.apply(this, [value]);
+      },
+    });
+
+    dom[HANDLER_KEY] = {
+      getValue() {
+        return currentVal;
+      },
+      setValue(value) {
+        currentVal = String(value);
+      },
+    };
+  }
+}
+
+// 更新input dom的handler 状态，返回是否更新
+export function updateInputHandlerIfChanged(dom) {
+  const handler = dom[HANDLER_KEY];
+  if (!handler) {
+    return true;
+  }
+
+  let newValue;
+  if (isCheckType(dom)) {
+    newValue = dom.checked ? 'true' : 'false';
+  } else {
+    newValue = dom.value;
+  }
+
+  const oldValue = handler.getValue();
+  if (newValue !== oldValue) {
+    handler.setValue(newValue);
+    return true;
+  }
+
+  return false;
+}
diff --git a/packages/inula-reactive/src/dom/valueHandler/index.ts b/packages/inula-reactive/src/dom/valueHandler/index.ts
new file mode 100644
index 00000000..216f04c4
--- /dev/null
+++ b/packages/inula-reactive/src/dom/valueHandler/index.ts
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+/**
+ * <input> <textarea> <select> <option> 对 value 做了特殊处理
+ * 处理组件被代理和不被代理情况下的不同逻辑
+ */
+
+import { InulaDom, InulaSelect, Props } from '../utils/Interface';
+import { getInputPropsWithoutValue, setInitInputValue, updateInputValue } from './InputValueHandler';
+import { getOptionPropsWithoutValue } from './OptionValueHandler';
+import { getSelectPropsWithoutValue, updateSelectValue } from './SelectValueHandler';
+import { getTextareaPropsWithoutValue, updateTextareaValue } from './TextareaValueHandler';
+
+// 获取元素除了被代理的值以外的属性
+function getPropsWithoutValue(type: string, dom: InulaDom, props: Props) {
+  switch (type) {
+    case 'input':
+      return getInputPropsWithoutValue(<HTMLInputElement>dom, props);
+    case 'option':
+      return getOptionPropsWithoutValue(dom, props);
+    case 'select':
+      return getSelectPropsWithoutValue(<InulaSelect>dom, props);
+    case 'textarea':
+      return getTextareaPropsWithoutValue(<HTMLTextAreaElement>dom, props);
+    default:
+      return props;
+  }
+}
+
+// 其它属性挂载完成后处理被代理值相关的属性
+function setInitValue(type: string, dom: InulaDom, props: Props) {
+  switch (type) {
+    case 'input':
+      setInitInputValue(<HTMLInputElement>dom, props);
+      break;
+    case 'select':
+      updateSelectValue(<InulaSelect>dom, props, true);
+      break;
+    case 'textarea':
+      updateTextareaValue(<HTMLTextAreaElement>dom, props, true);
+      break;
+    default:
+      break;
+  }
+}
+
+// 更新需要适配的属性
+function updateValue(type: string, dom: InulaDom, props: Props) {
+  switch (type) {
+    case 'input':
+      updateInputValue(<HTMLInputElement>dom, props);
+      break;
+    case 'select':
+      updateSelectValue(<InulaSelect>dom, props);
+      break;
+    case 'textarea':
+      updateTextareaValue(<HTMLTextAreaElement>dom, props);
+      break;
+    default:
+      break;
+  }
+}
+
+export { getPropsWithoutValue, setInitValue, updateValue };
diff --git a/packages/inula-reactive/src/event/EventBinding.ts b/packages/inula-reactive/src/event/EventBinding.ts
new file mode 100644
index 00000000..01b3ea54
--- /dev/null
+++ b/packages/inula-reactive/src/event/EventBinding.ts
@@ -0,0 +1,138 @@
+/*
+ * 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.
+ */
+
+/**
+ * 事件绑定实现，分为绑定委托事件和非委托事件
+ */
+import { allDelegatedInulaEvents, simulatedDelegatedEvents } from './EventHub';
+import { isDocument } from '../dom/utils/Common';
+import { getNearestVNode, getNonDelegatedListenerMap } from '../dom/DOMInternalKeys';
+import { asyncUpdates, runDiscreteUpdates } from '../renderer/TreeBuilder';
+import { handleEventMain } from './InulaEventMain';
+import { decorateNativeEvent } from './EventWrapper';
+import { VNode } from '../renderer/vnode/VNode';
+
+// 触发委托事件
+function triggerDelegatedEvent(
+  nativeEvtName: string,
+  isCapture: boolean,
+  targetDom: EventTarget,
+  nativeEvent // 事件对象event
+) {
+  // 执行之前的调度事件
+  runDiscreteUpdates();
+
+  const nativeEventTarget = nativeEvent.target || nativeEvent.srcElement;
+  const targetVNode = getNearestVNode(nativeEventTarget);
+
+  handleEventMain(nativeEvtName, isCapture, nativeEvent, targetVNode, targetDom);
+}
+
+// 监听委托事件
+function listenToNativeEvent(nativeEvtName: string, delegatedElement: Element, isCapture: boolean) {
+  let dom: Element | Document = delegatedElement;
+  // document层次可能触发selectionchange事件，为了捕获这类事件，selectionchange事件绑定在document节点上
+  if (nativeEvtName === 'selectionchange' && !isDocument(delegatedElement)) {
+    dom = delegatedElement.ownerDocument;
+  }
+
+  const listener = triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, dom);
+  dom.addEventListener(nativeEvtName, listener, isCapture);
+
+  return listener;
+}
+
+// 是否捕获事件
+function isCaptureEvent(inulaEventName) {
+  if (inulaEventName === 'onLostPointerCapture' || inulaEventName === 'onGotPointerCapture') {
+    return false;
+  }
+  return inulaEventName.slice(-7) === 'Capture';
+}
+
+// 事件懒委托，当用户定义事件后，再进行委托到根节点
+export function lazyDelegateOnRoot(currentRoot: VNode, eventName: string) {
+  currentRoot.delegatedEvents.add(eventName);
+
+  const isCapture = isCaptureEvent(eventName);
+  const nativeEvents = allDelegatedInulaEvents.get(eventName);
+
+  nativeEvents.forEach(nativeEvent => {
+    const nativeFullName = isCapture ? nativeEvent + 'capture' : nativeEvent;
+
+    // 事件存储在DOM节点属性，避免多个VNode(root和portal)对应同一个DOM, 造成事件重复监听
+    currentRoot.realNode.$EV = currentRoot.realNode.$EV ?? {};
+    const events = currentRoot.realNode.$EV;
+
+    if (!events[nativeFullName]) {
+      events[nativeFullName] = listenToNativeEvent(nativeEvent, currentRoot.realNode, isCapture);
+    }
+  });
+}
+
+// 利用冒泡事件模拟不冒泡事件，需要直接在根节点绑定
+export function listenSimulatedDelegatedEvents(root: VNode) {
+  for (let i = 0; i < simulatedDelegatedEvents.length; i++) {
+    lazyDelegateOnRoot(root, simulatedDelegatedEvents[i]);
+  }
+}
+
+// 通过inula事件名获取到native事件名
+function getNativeEvtName(inulaEventName, capture) {
+  let nativeName;
+  if (capture) {
+    nativeName = inulaEventName.slice(2, -7);
+  } else {
+    nativeName = inulaEventName.slice(2);
+  }
+  if (!nativeName) {
+    return '';
+  }
+  return nativeName.toLowerCase();
+}
+
+// 封装监听函数
+function getWrapperListener(inulaEventName, nativeEvtName, targetElement, listener) {
+  return event => {
+    const customEvent = decorateNativeEvent(inulaEventName, nativeEvtName, event);
+    asyncUpdates(() => {
+      listener(customEvent);
+    });
+  };
+}
+
+// 非委托事件单独监听到各自dom节点
+export function listenNonDelegatedEvent(inulaEventName: string, domElement: Element, listener): void {
+  const isCapture = isCaptureEvent(inulaEventName);
+  const nativeEvtName = getNativeEvtName(inulaEventName, isCapture);
+
+  // 先判断是否存在老的监听事件，若存在则移除
+  const nonDelegatedListenerMap = getNonDelegatedListenerMap(domElement);
+  const currentListener = nonDelegatedListenerMap.get(inulaEventName);
+  if (currentListener) {
+    domElement.removeEventListener(nativeEvtName, currentListener);
+    nonDelegatedListenerMap.delete(inulaEventName);
+  }
+
+  if (typeof listener !== 'function') {
+    return;
+  }
+
+  // 为了和委托事件对外行为一致，将事件对象封装成CustomBaseEvent
+  const wrapperListener = getWrapperListener(inulaEventName, nativeEvtName, domElement, listener);
+  // 添加新的监听
+  nonDelegatedListenerMap.set(inulaEventName, wrapperListener);
+  domElement.addEventListener(nativeEvtName, wrapperListener, isCapture);
+}
diff --git a/packages/inula-reactive/src/event/EventHub.ts b/packages/inula-reactive/src/event/EventHub.ts
new file mode 100644
index 00000000..2f8e8a1f
--- /dev/null
+++ b/packages/inula-reactive/src/event/EventHub.ts
@@ -0,0 +1,115 @@
+/*
+ * 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.
+ */
+
+// 需要委托的inula事件和原生事件对应关系
+export const allDelegatedInulaEvents = new Map();
+
+// 模拟委托事件，不冒泡事件需要利用其他事件来触发冒泡过程
+export const simulatedDelegatedEvents = ['onMouseEnter', 'onMouseLeave'];
+// 所有委托的原生事件集合
+export const allDelegatedNativeEvents = new Set();
+
+// Inula事件和原生事件对应关系
+export const inulaEventToNativeMap = new Map([
+  ['onKeyPress', ['keypress']],
+  ['onTextInput', ['textInput']],
+  ['onClick', ['click']],
+  ['onDoubleClick', ['dblclick']],
+  ['onFocus', ['focusin']],
+  ['onBlur', ['focusout']],
+  ['onInput', ['input']],
+  ['onWheel', ['wheel']],
+  ['onMouseOut', ['mouseout']],
+  ['onMouseOver', ['mouseover']],
+  ['onPointerOut', ['pointerout']],
+  ['onPointerOver', ['pointerover']],
+  ['onContextMenu', ['contextmenu']],
+  ['onDragEnd', ['dragend']],
+  ['onKeyDown', ['keydown']],
+  ['onKeyUp', ['keyup']],
+  ['onMouseDown', ['mousedown']],
+  ['onMouseMove', ['mousemove']],
+  ['onMouseUp', ['mouseup']],
+  ['onSelectChange', ['selectionchange']],
+  ['onTouchEnd', ['touchend']],
+  ['onTouchMove', ['touchmove']],
+  ['onTouchStart', ['touchstart']],
+
+  ['onCompositionEnd', ['compositionend']],
+  ['onCompositionStart', ['compositionstart']],
+  ['onCompositionUpdate', ['compositionupdate']],
+  ['onChange', ['change', 'click', 'focusout', 'input']],
+  ['onSelect', ['select']],
+  ['onMouseEnter', ['mouseout', 'mouseover']],
+  ['onMouseLeave', ['mouseout', 'mouseover']],
+
+  ['onAnimationEnd', ['animationend']],
+  ['onAnimationIteration', ['animationiteration']],
+  ['onAnimationStart', ['animationstart']],
+  ['onTransitionEnd', ['transitionend']],
+]);
+export const NativeEventToInulaMap = {
+  click: 'click',
+  wheel: 'wheel',
+  dblclick: 'doubleClick',
+  contextmenu: 'contextMenu',
+  dragend: 'dragEnd',
+  focusin: 'focus',
+  focusout: 'blur',
+  input: 'input',
+  select: 'select',
+  keydown: 'keyDown',
+  keypress: 'keyPress',
+  keyup: 'keyUp',
+  mousedown: 'mouseDown',
+  mouseup: 'mouseUp',
+  touchend: 'touchEnd',
+  touchstart: 'touchStart',
+  mousemove: 'mouseMove',
+  mouseout: 'mouseOut',
+  mouseover: 'mouseOver',
+  pointermove: 'pointerMove',
+  pointerout: 'pointerOut',
+  pointerover: 'pointerOver',
+  selectionchange: 'selectChange',
+  textInput: 'textInput',
+  touchmove: 'touchMove',
+  animationend: 'animationEnd',
+  animationiteration: 'animationIteration',
+  animationstart: 'animationStart',
+  transitionend: 'transitionEnd',
+  compositionstart: 'compositionStart',
+  compositionend: 'compositionEnd',
+  compositionupdate: 'compositionUpdate',
+};
+export const CHAR_CODE_SPACE = 32;
+export const EVENT_TYPE_BUBBLE = 'Bubble';
+export const EVENT_TYPE_CAPTURE = 'Capture';
+export const EVENT_TYPE_ALL = 'All';
+
+inulaEventToNativeMap.forEach((dependencies, inulaEvent) => {
+  allDelegatedInulaEvents.set(inulaEvent, dependencies);
+  allDelegatedInulaEvents.set(inulaEvent + 'Capture', dependencies);
+
+  dependencies.forEach(d => {
+    allDelegatedNativeEvents.add(d);
+  });
+});
+
+export function transformToInulaEvent(nativeEvtName: string) {
+  const name = NativeEventToInulaMap[nativeEvtName];
+  // 例：dragEnd -> onDragEnd
+  return !name ? '' : `on${name[0].toUpperCase()}${name.slice(1)}`;
+}
diff --git a/packages/inula-reactive/src/event/EventWrapper.ts b/packages/inula-reactive/src/event/EventWrapper.ts
new file mode 100644
index 00000000..f8fa42a7
--- /dev/null
+++ b/packages/inula-reactive/src/event/EventWrapper.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.
+ */
+
+// 兼容IE的event key
+import { AnyNativeEvent } from './Types';
+
+const uniqueKeyMap = new Map([
+  ['Esc', 'Escape'],
+  ['Spacebar', ' '],
+  ['Left', 'ArrowLeft'],
+  ['Up', 'ArrowUp'],
+  ['Right', 'ArrowRight'],
+  ['Down', 'ArrowDown'],
+  ['Del', 'Delete'],
+]);
+
+const noop = (): void => {};
+
+// 兼容IE浏览器，无法修改Event属性
+export class WrappedEvent {
+  customEventName: string;
+  nativeEvent: AnyNativeEvent;
+  nativeEventType: string;
+  type: string;
+  key: string;
+  currentTarget: EventTarget | null = null;
+
+  target: HTMLElement;
+  relatedTarget: HTMLElement;
+
+  stopPropagation: () => void;
+  preventDefault: () => void;
+
+  propagationStopped = false;
+  isPropagationStopped = (): boolean => this.propagationStopped;
+
+  // 适配Keyboard键盘事件该函数不能由合成事件调用
+  getModifierState?: (keyArgs: string) => boolean;
+  // 适配老版本事件api
+  persist = noop;
+
+  constructor(customEventName: string, nativeEvtName: string, nativeEvent: AnyNativeEvent) {
+    for (const name in nativeEvent) {
+      this[name] = nativeEvent[name];
+      if (name === 'getModifierState') {
+        const keyBoardEvent = nativeEvent as KeyboardEvent;
+        this.getModifierState = keyArg => keyBoardEvent.getModifierState(keyArg);
+      }
+    }
+    // stopPropagation和preventDefault 必须通过Event实例调用
+    this.stopPropagation = () => {
+      nativeEvent.stopPropagation();
+      this.propagationStopped = true;
+    };
+
+    this.preventDefault = () => nativeEvent.preventDefault();
+
+    // custom事件自定义属性
+    this.customEventName = customEventName;
+    this.nativeEvent = nativeEvent;
+    // 保存原生的事件类型，因为下面会修改
+    this.nativeEventType = nativeEvent.type;
+
+    this.type = nativeEvtName;
+
+    // 兼容IE的event key
+    const orgKey = (nativeEvent as any).key ?? '';
+    this.key = uniqueKeyMap.get(orgKey) || orgKey;
+  }
+
+  isDefaultPrevented(): boolean {
+    return this.nativeEvent.defaultPrevented;
+  }
+}
+
+// 创建普通自定义事件对象实例，和原生事件对应
+export function decorateNativeEvent(
+  customEventName: string,
+  nativeEvtName: string,
+  nativeEvent: AnyNativeEvent
+): WrappedEvent {
+  return new WrappedEvent(customEventName, nativeEvtName, nativeEvent);
+}
diff --git a/packages/inula-reactive/src/event/FormValueController.ts b/packages/inula-reactive/src/event/FormValueController.ts
new file mode 100644
index 00000000..eb8eb022
--- /dev/null
+++ b/packages/inula-reactive/src/event/FormValueController.ts
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+
+import { getVNodeProps } from '../dom/DOMInternalKeys';
+import { getDomTag, isNotNull } from '../dom/utils/Common';
+import { Props } from '../dom/utils/Interface';
+import { updateTextareaValue } from '../dom/valueHandler/TextareaValueHandler';
+import { updateInputHandlerIfChanged } from '../dom/valueHandler/ValueChangeHandler';
+import { updateInputValue } from '../dom/valueHandler/InputValueHandler';
+
+// 记录表单控件 input/textarea/select的onChange事件的targets
+let changeEventTargets: Array<any> | null = null;
+
+// 存储队列中缓存组件
+export function recordChangeEventTargets(target: EventTarget): void {
+  if (changeEventTargets) {
+    changeEventTargets.push(target);
+  } else {
+    changeEventTargets = [target];
+  }
+}
+
+// 判断是否需要控制value与props保持一致
+export function shouldControlValue(): boolean {
+  return changeEventTargets !== null && changeEventTargets.length > 0;
+}
+
+function controlInputValue(inputDom: HTMLInputElement, props: Props) {
+  const { name, type } = props;
+
+  // 如果是 radio，找出同一form内，name相同的Radio，更新它们Handler的Value
+  if (type === 'radio' && isNotNull(name)) {
+    const radioList = document.querySelectorAll<HTMLInputElement>(`input[type="radio"][name="${name}"]`);
+    for (let i = 0; i < radioList.length; i++) {
+      const radio = radioList[i];
+      if (radio === inputDom) {
+        continue;
+      }
+      if (isNotNull(radio.form) && isNotNull(inputDom.form) && radio.form !== inputDom.form) {
+        continue;
+      }
+
+      updateInputHandlerIfChanged(radio);
+    }
+  } else {
+    updateInputValue(inputDom, props);
+  }
+}
+
+// 受控组件值重新赋值
+function controlValue(target: Element) {
+  const props = getVNodeProps(target);
+  if (props) {
+    const type = getDomTag(target);
+    switch (type) {
+      case 'input':
+        controlInputValue(<HTMLInputElement>target, props);
+        break;
+      case 'textarea':
+        updateTextareaValue(<HTMLTextAreaElement>target, props);
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+// 从缓存队列中对受控组件进行赋值
+export function tryControlValue() {
+  if (!changeEventTargets) {
+    return;
+  }
+  changeEventTargets.forEach(target => {
+    controlValue(target);
+  });
+  changeEventTargets = null;
+}
diff --git a/packages/inula-reactive/src/event/InulaEventMain.ts b/packages/inula-reactive/src/event/InulaEventMain.ts
new file mode 100644
index 00000000..a281acf1
--- /dev/null
+++ b/packages/inula-reactive/src/event/InulaEventMain.ts
@@ -0,0 +1,198 @@
+/*
+ * 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.
+ */
+
+import { AnyNativeEvent, ListenerUnitList } from './Types';
+import type { VNode } from '../renderer/Types';
+import { isInputElement, setPropertyWritable } from './utils';
+import { decorateNativeEvent } from './EventWrapper';
+import { getListenersFromTree } from './ListenerGetter';
+import { asyncUpdates, runDiscreteUpdates } from '../renderer/Renderer';
+import { findRoot } from '../renderer/vnode/VNodeUtils';
+import {
+  EVENT_TYPE_ALL,
+  EVENT_TYPE_BUBBLE,
+  EVENT_TYPE_CAPTURE,
+  inulaEventToNativeMap,
+  transformToInulaEvent,
+} from './EventHub';
+import { getDomTag } from '../dom/utils/Common';
+import { updateInputHandlerIfChanged } from '../dom/valueHandler/ValueChangeHandler';
+import { getDom } from '../dom/DOMInternalKeys';
+import { recordChangeEventTargets, shouldControlValue, tryControlValue } from './FormValueController';
+import { getMouseEnterListeners } from './MouseEvent';
+
+// web规范，鼠标右键key值
+const RIGHT_MOUSE_BUTTON = 2;
+
+// 返回是否需要触发change事件标记
+// | 元素 | 事件 |  需要值变更 |
+// | --- | ---  | ---------------  |
+// | <select/> / <input type="file/> | change | NO |
+// | <input type="checkbox" /> <input type="radio" /> | click | YES |
+// | <input type="input /> / <input type="text" /> | input / change | YES |
+function shouldTriggerChangeEvent(targetDom, evtName) {
+  const { type } = targetDom;
+  const domTag = getDomTag(targetDom);
+
+  if (domTag === 'select' || (domTag === 'input' && type === 'file')) {
+    return evtName === 'change';
+  } else if (domTag === 'input' && (type === 'checkbox' || type === 'radio')) {
+    if (evtName === 'click') {
+      return updateInputHandlerIfChanged(targetDom);
+    }
+  } else if (isInputElement(targetDom)) {
+    if (evtName === 'input' || evtName === 'change') {
+      return updateInputHandlerIfChanged(targetDom);
+    }
+  }
+  return false;
+}
+
+/**
+ *
+ * 支持input/textarea/select的onChange事件
+ */
+function getChangeListeners(
+  nativeEvtName: string,
+  nativeEvt: AnyNativeEvent,
+  vNode: null | VNode,
+  target: EventTarget
+): ListenerUnitList {
+  if (!vNode) {
+    return [];
+  }
+  const targetDom = getDom(vNode);
+
+  // 判断是否需要触发change事件
+  if (shouldTriggerChangeEvent(targetDom, nativeEvtName)) {
+    recordChangeEventTargets(target);
+
+    const event = decorateNativeEvent('onChange', 'change', nativeEvt);
+    return getListenersFromTree(vNode, 'onChange', event, EVENT_TYPE_ALL);
+  }
+
+  return [];
+}
+
+// 获取事件触发的普通事件监听方法队列
+function getCommonListeners(
+  nativeEvtName: string,
+  vNode: null | VNode,
+  nativeEvent: AnyNativeEvent,
+  target: null | EventTarget,
+  isCapture: boolean
+): ListenerUnitList {
+  const inulaEvtName = transformToInulaEvent(nativeEvtName);
+
+  if (!inulaEvtName) {
+    return [];
+  }
+
+  // 鼠标点击右键
+  if (nativeEvent instanceof MouseEvent && nativeEvtName === 'click' && nativeEvent.button === RIGHT_MOUSE_BUTTON) {
+    return [];
+  }
+
+  if (nativeEvtName === 'focusin') {
+    nativeEvtName = 'focus';
+  }
+
+  if (nativeEvtName === 'focusout') {
+    nativeEvtName = 'blur';
+  }
+
+  const inulaEvent = decorateNativeEvent(inulaEvtName, nativeEvtName, nativeEvent);
+  return getListenersFromTree(vNode, inulaEvtName, inulaEvent, isCapture ? EVENT_TYPE_CAPTURE : EVENT_TYPE_BUBBLE);
+}
+
+// 按顺序执行事件队列
+function processListeners(listenerList: ListenerUnitList): void {
+  listenerList.forEach(eventUnit => {
+    const { currentTarget, listener, event } = eventUnit;
+    if (event.isPropagationStopped()) {
+      return;
+    }
+
+    setPropertyWritable(event, 'currentTarget');
+    event.currentTarget = currentTarget;
+    listener(event);
+    event.currentTarget = null;
+  });
+}
+
+// 触发可以被执行的inula事件监听
+function triggerInulaEvents(
+  nativeEvtName: string,
+  isCapture: boolean,
+  nativeEvent: AnyNativeEvent,
+  vNode: VNode | null
+) {
+  const target = nativeEvent.target || nativeEvent.srcElement!;
+
+  // 触发普通委托事件
+  const listenerList: ListenerUnitList = getCommonListeners(nativeEvtName, vNode, nativeEvent, target, isCapture);
+
+  let mouseEnterListeners: ListenerUnitList = [];
+  if (inulaEventToNativeMap.get('onMouseEnter')!.includes(nativeEvtName)) {
+    mouseEnterListeners = getMouseEnterListeners(nativeEvtName, vNode, nativeEvent, target);
+  }
+
+  let changeEvents: ListenerUnitList = [];
+  // 触发特殊handler委托事件
+  if (!isCapture && inulaEventToNativeMap.get('onChange')!.includes(nativeEvtName)) {
+    changeEvents = getChangeListeners(nativeEvtName, nativeEvent, vNode, target);
+  }
+
+  // 处理触发的事件队列
+  processListeners([...listenerList, ...mouseEnterListeners, ...changeEvents]);
+}
+
+// 其他事件正在执行中标记
+let isInEventsExecution = false;
+
+// 处理委托事件入口
+export function handleEventMain(
+  nativeEvtName: string,
+  isCapture: boolean,
+  nativeEvent: AnyNativeEvent,
+  vNode: null | VNode,
+  targetDom: EventTarget
+): void {
+  let startVNode = vNode;
+  if (startVNode !== null) {
+    startVNode = findRoot(startVNode, targetDom);
+    if (!startVNode) {
+      return;
+    }
+  }
+
+  // 有事件正在执行，同步执行事件
+  if (isInEventsExecution) {
+    triggerInulaEvents(nativeEvtName, isCapture, nativeEvent, startVNode);
+    return;
+  }
+
+  // 没有事件在执行，经过调度再执行事件
+  isInEventsExecution = true;
+  try {
+    asyncUpdates(() => triggerInulaEvents(nativeEvtName, isCapture, nativeEvent, startVNode));
+  } finally {
+    isInEventsExecution = false;
+    if (shouldControlValue()) {
+      runDiscreteUpdates();
+      tryControlValue();
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/event/ListenerGetter.ts b/packages/inula-reactive/src/event/ListenerGetter.ts
new file mode 100644
index 00000000..bd2de631
--- /dev/null
+++ b/packages/inula-reactive/src/event/ListenerGetter.ts
@@ -0,0 +1,163 @@
+/*
+ * 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.
+ */
+
+import { VNode } from '../renderer/Types';
+import { DomComponent } from '../renderer/vnode/VNodeTags';
+import { WrappedEvent } from './EventWrapper';
+import { InulaEventListener, ListenerUnitList } from './Types';
+import { EVENT_TYPE_ALL, EVENT_TYPE_BUBBLE, EVENT_TYPE_CAPTURE } from './EventHub';
+
+// 从vnode属性中获取事件listener
+function getListenerFromVNode(vNode: VNode, eventName: string): InulaEventListener | null {
+  const props = vNode.props;
+  const mouseEvents = ['onClick', 'onDoubleClick', 'onMouseDown', 'onMouseMove', 'onMouseUp', 'onMouseEnter'];
+  const formElements = ['button', 'input', 'select', 'textarea'];
+
+  // 是否应该阻止禁用的表单元素触发鼠标事件
+  const shouldPreventMouseEvent =
+    mouseEvents.includes(eventName) && props.disabled && formElements.includes(vNode.type);
+
+  const listener = props[eventName];
+  if (shouldPreventMouseEvent) {
+    return null;
+  } else {
+    return listener;
+  }
+}
+
+// 获取监听事件
+export function getListenersFromTree(
+  targetVNode: VNode | null,
+  inulaEvtName: string | null,
+  nativeEvent: WrappedEvent,
+  eventType: string
+): ListenerUnitList {
+  if (!inulaEvtName) {
+    return [];
+  }
+
+  const listeners: ListenerUnitList = [];
+
+  let vNode = targetVNode;
+
+  // 从目标节点到根节点遍历获取listener
+  while (vNode !== null) {
+    const { realNode, tag } = vNode;
+    if (tag === DomComponent && realNode !== null) {
+      if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_CAPTURE) {
+        const captureName = inulaEvtName + EVENT_TYPE_CAPTURE;
+        const captureListener = getListenerFromVNode(vNode, captureName);
+        if (captureListener) {
+          listeners.unshift({
+            vNode,
+            listener: captureListener,
+            currentTarget: realNode,
+            event: nativeEvent,
+          });
+        }
+      }
+
+      if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_BUBBLE) {
+        const bubbleListener = getListenerFromVNode(vNode, inulaEvtName);
+        if (bubbleListener) {
+          listeners.push({
+            vNode,
+            listener: bubbleListener,
+            currentTarget: realNode,
+            event: nativeEvent,
+          });
+        }
+      }
+    }
+    vNode = vNode.parent;
+  }
+
+  return listeners;
+}
+
+// 获取父节点
+function getParent(inst: VNode | null): VNode | null {
+  if (inst === null) {
+    return null;
+  }
+  do {
+    inst = inst.parent;
+  } while (inst && inst.tag !== DomComponent);
+  return inst || null;
+}
+
+// 寻找两个节点的共同最近祖先，如果没有则返回null
+function getCommonAncestor(instA: VNode, instB: VNode): VNode | null {
+  const parentsSet = new Set<VNode>();
+  for (let tempA: VNode | null = instA; tempA; tempA = getParent(tempA)) {
+    parentsSet.add(tempA);
+  }
+  for (let tempB: VNode | null = instB; tempB; tempB = getParent(tempB)) {
+    if (parentsSet.has(tempB)) {
+      return tempB;
+    }
+  }
+  return null;
+}
+
+function getMouseListenersFromTree(event: WrappedEvent, target: VNode, commonParent: VNode | null): ListenerUnitList {
+  const registrationName = event.customEventName;
+  const listeners: ListenerUnitList = [];
+
+  let vNode: VNode | null = target;
+  while (vNode !== null) {
+    // commonParent作为终点
+    if (vNode === commonParent) {
+      break;
+    }
+    const { realNode, tag } = vNode;
+    if (tag === DomComponent && realNode !== null) {
+      const currentTarget = realNode;
+      const listener = getListenerFromVNode(vNode, registrationName);
+      if (listener) {
+        listeners.push({
+          vNode,
+          listener,
+          currentTarget,
+          event,
+        });
+      }
+    }
+    vNode = vNode.parent;
+  }
+  return listeners;
+}
+
+// 获取enter和leave事件队列
+export function collectMouseListeners(
+  leaveEvent: null | WrappedEvent,
+  enterEvent: null | WrappedEvent,
+  from: VNode | null,
+  to: VNode | null
+): ListenerUnitList {
+  // 确定公共父节点，作为在树上遍历的终点
+  const commonParent = from && to ? getCommonAncestor(from, to) : null;
+  let leaveEventList: ListenerUnitList = [];
+  if (from && leaveEvent) {
+    // 遍历树，获取绑定的leave事件
+    leaveEventList = getMouseListenersFromTree(leaveEvent, from, commonParent);
+  }
+  let enterEventList: ListenerUnitList = [];
+  if (to && enterEvent) {
+    // 先触发父节点enter事件，所以需要逆序
+    enterEventList = getMouseListenersFromTree(enterEvent, to, commonParent).reverse();
+  }
+  return [...leaveEventList, ...enterEventList];
+}
diff --git a/packages/inula-reactive/src/event/MouseEvent.ts b/packages/inula-reactive/src/event/MouseEvent.ts
new file mode 100644
index 00000000..b817db36
--- /dev/null
+++ b/packages/inula-reactive/src/event/MouseEvent.ts
@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+
+import { getNearestVNode } from '../dom/DOMInternalKeys';
+import { WrappedEvent } from './EventWrapper';
+import { VNode } from '../renderer/vnode/VNode';
+import { AnyNativeEvent, ListenerUnitList } from './Types';
+import { DomComponent, DomText } from '../renderer/vnode/VNodeTags';
+import { collectMouseListeners } from './ListenerGetter';
+import { getNearestMountedVNode } from './utils';
+
+/**
+ * 背景： mouseEnter和mouseLeave事件不冒泡，所以无法直接委托给根节点进行代理
+ * 实现方案：利用mouseout、mouseover事件的，找到事件触发的起点和终点，判断出鼠标移动轨迹，在轨迹中的节点触发mouseEnter和mouseLeave事件
+ * 步骤：
+ *  1. 根节点绑定mouseout和mouseover事件
+ *  2. 事件触发后找到事件的起点和终点
+ *  3. 封装装enter和leave事件
+ *  4. 根据起止点找到公共父节点，作为事件冒泡的终点
+ *  5. 遍历treeNode，找到每个节点绑定的mouseEnter和mouseLeave监听方法
+ *  例如： mouseOut事件由D->C, A节点作为公共父节点，将触发 D、B的mouseLeave事件和C节点的mouseEnter事件
+ *       A
+ *     /  \
+ *    B    C
+ *   / \
+ * D    E
+ *
+ */
+
+function getWrapperEvents(nativeEventTarget, fromInst, toInst, nativeEvent, targetInst): (WrappedEvent | null)[] {
+  const vWindow =
+    nativeEventTarget.window === nativeEventTarget ? nativeEventTarget : nativeEventTarget.ownerDocument.defaultView;
+
+  // 起点或者终点为空的话默认值为所在window
+  const fromNode = fromInst?.realNode || vWindow;
+  const toNode = toInst?.realNode || vWindow;
+  let leave: WrappedEvent | null = null;
+  let enter: WrappedEvent | null = null;
+  const nativeTargetInst = getNearestVNode(nativeEventTarget);
+
+  // 在Mounted的dom节点上render一个子组件，系统中存在两个根节点，子节点的mouseout事件触发两次，取离target近的根节点生效
+  if (nativeTargetInst === targetInst) {
+    leave = new WrappedEvent('onMouseLeave', 'mouseleave', nativeEvent);
+    leave.target = fromNode;
+    leave.relatedTarget = toNode;
+
+    enter = new WrappedEvent('onMouseEnter', 'mouseenter', nativeEvent);
+    enter.target = toNode;
+    enter.relatedTarget = fromNode;
+  }
+  return [leave, enter];
+}
+
+function getEndpointVNode(
+  domEventName: string,
+  targetInst: null | VNode,
+  nativeEvent: AnyNativeEvent
+): (VNode | null)[] {
+  let fromVNode;
+  let toVNode;
+  if (domEventName === 'mouseover') {
+    fromVNode = null;
+    toVNode = targetInst;
+  } else {
+    const related = (nativeEvent as any).relatedTarget || (nativeEvent as any).toElement;
+    fromVNode = targetInst;
+    toVNode = related ? getNearestVNode(related) : null;
+    if (toVNode !== null) {
+      const nearestMounted = getNearestMountedVNode(toVNode);
+      if (toVNode !== nearestMounted || (toVNode.tag !== DomComponent && toVNode.tag !== DomText)) {
+        toVNode = null;
+      }
+    }
+  }
+  return [fromVNode, toVNode];
+}
+
+export function getMouseEnterListeners(
+  domEventName: string,
+  targetInst: null | VNode,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: null | EventTarget
+): ListenerUnitList {
+  // 获取起点和终点的VNode
+  const [fromVNode, toVNode] = getEndpointVNode(domEventName, targetInst, nativeEvent);
+  if (fromVNode === toVNode) {
+    return [];
+  }
+
+  // 获取包装后的leave和enter事件
+  const [leave, enter] = getWrapperEvents(nativeEventTarget, fromVNode, toVNode, nativeEvent, targetInst);
+
+  // 收集事件的监听方法
+  return collectMouseListeners(leave, enter, fromVNode, toVNode);
+}
diff --git a/packages/inula-reactive/src/event/Types.ts b/packages/inula-reactive/src/event/Types.ts
new file mode 100644
index 00000000..4a43c789
--- /dev/null
+++ b/packages/inula-reactive/src/event/Types.ts
@@ -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.
+ */
+
+import type { VNode } from '../renderer/Types';
+import { WrappedEvent } from './EventWrapper';
+
+export type AnyNativeEvent = KeyboardEvent | MouseEvent | TouchEvent | UIEvent | Event;
+
+export interface InulaEventListener {
+  (event: WrappedEvent): void;
+}
+
+export type ListenerUnit = {
+  vNode: null | VNode;
+  listener: InulaEventListener;
+  currentTarget: EventTarget;
+  event: WrappedEvent;
+};
+
+export type ListenerUnitList = Array<ListenerUnit>;
diff --git a/packages/inula-reactive/src/event/utils.ts b/packages/inula-reactive/src/event/utils.ts
new file mode 100644
index 00000000..2b2a66b1
--- /dev/null
+++ b/packages/inula-reactive/src/event/utils.ts
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import { VNode } from '../renderer/vnode/VNode';
+import { Addition, FlagUtils } from '../renderer/vnode/VNodeFlags';
+import { TreeRoot } from '../renderer/vnode/VNodeTags';
+
+export function isInputElement(dom?: HTMLElement): boolean {
+  return dom instanceof HTMLInputElement || dom instanceof HTMLTextAreaElement;
+}
+
+export function setPropertyWritable(obj, propName) {
+  const desc = Object.getOwnPropertyDescriptor(obj, propName);
+  if (!desc || !desc.writable) {
+    Object.defineProperty(obj, propName, { writable: true });
+  }
+}
+
+// 获取离 vNode 最近的已挂载 vNode，包含它自己
+export function getNearestMountedVNode(vNode: VNode): null | VNode {
+  let node = vNode;
+  let target = vNode;
+  // 如果没有alternate，说明是可能是未插入的新树，需要处理插入的副作用。
+  while (node.parent) {
+    // 存在更新，节点未挂载，查找父节点，但是父节点也可能未挂载，需要继续往上查找无更新节点
+    if (FlagUtils.hasFlag(node, Addition)) {
+      target = node.parent;
+    }
+    node = node.parent;
+  }
+  // 如果根节点是 Dom 类型节点，表示已经挂载
+  if (node.tag === TreeRoot) {
+    return target;
+  }
+  // 如果没有找到根节点，意味着Tree已经卸载或者未挂载
+  return null;
+}
diff --git a/packages/inula-reactive/src/external/ChildrenUtil.ts b/packages/inula-reactive/src/external/ChildrenUtil.ts
new file mode 100644
index 00000000..61ffa1ac
--- /dev/null
+++ b/packages/inula-reactive/src/external/ChildrenUtil.ts
@@ -0,0 +1,134 @@
+/*
+ * 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.
+ */
+
+import { throwIfTrue } from '../renderer/utils/throwIfTrue';
+import { TYPE_COMMON_ELEMENT, TYPE_PORTAL } from './JSXElementType';
+
+import { isValidElement, JSXElement } from './JSXElement';
+import { BELONG_CLASS_VNODE_KEY } from '../renderer/vnode/VNode';
+import type { ChildrenType } from '../types';
+
+type Callback = ((param: any) => any) | undefined;
+
+// 生成key
+function getItemKey(item: any, index: number): string {
+  if (typeof item === 'object' && item !== null && item.key !== null && item.key !== undefined) {
+    return '.$' + item.key;
+  }
+  // 使用36进制减少生成字符串的长度以节省空间
+  return '.' + index.toString(36);
+}
+
+function processArrayChildren(children: any, arr: Array<any>, prefix: string, callback: Callback) {
+  for (let i = 0; i < children.length; i++) {
+    const childItem = children[i];
+    const nextPrefix = prefix + getItemKey(childItem, i);
+    mapChildrenToArray(childItem, arr, nextPrefix, callback);
+  }
+}
+
+function callMapFun(children: any, arr: Array<any>, prefix: string, callback: Callback) {
+  let mappedChild = callback!(children);
+  if (Array.isArray(mappedChild)) {
+    // 维持原有规格，如果callback返回结果是数组，处理函数修改为返回数组item
+    processArrayChildren(mappedChild, arr, prefix + '/', subChild => subChild);
+  } else if (mappedChild !== null && mappedChild !== undefined) {
+    // 给一个key值，确保返回的对象一定带有key
+    if (isValidElement(mappedChild as any)) {
+      const childKey = prefix === '' ? getItemKey(children, 0) : '';
+      const mappedKey = getItemKey(mappedChild, 0);
+      const newKey =
+        prefix + childKey + (mappedChild.key && mappedKey !== getItemKey(children, 0) ? '.$' + mappedChild.key : '');
+      // 返回一个修改key的children
+      mappedChild = JSXElement(
+        mappedChild.type,
+        newKey,
+        mappedChild.ref,
+        mappedChild[BELONG_CLASS_VNODE_KEY],
+        mappedChild.props,
+        mappedChild.src
+      );
+    }
+    arr.push(mappedChild);
+  }
+}
+
+function mapChildrenToArray(children: any, arr: Array<any>, prefix: string, callback?: Callback): number | void {
+  const type = typeof children;
+  switch (type) {
+    // 继承原有规格，undefined和boolean类型按照null处理
+    case 'undefined':
+    case 'boolean':
+      callMapFun(null, arr, prefix, callback);
+      return;
+    case 'number':
+    case 'string':
+      callMapFun(children, arr, prefix, callback);
+      return;
+    case 'object':
+      if (children === null) {
+        callMapFun(null, arr, prefix, callback);
+        return;
+      }
+      if (children.vtype === TYPE_COMMON_ELEMENT || children.vtype === TYPE_PORTAL) {
+        callMapFun(children, arr, prefix, callback);
+        return;
+      }
+      if (Array.isArray(children)) {
+        processArrayChildren(children, arr, prefix, callback);
+        return;
+      }
+      throw new Error('Object is invalid as a Inula child. ');
+    // No Default
+  }
+}
+
+// 在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg
+function mapChildren(children: any, func: (a, b) => any, context?: any): Array<any> {
+  if (children === null || children === undefined) {
+    return children;
+  }
+  let count = 0;
+  const result = [];
+  mapChildrenToArray(children, result, '', child => func.call(context, child, count++));
+  return result;
+}
+
+const Children = {
+  forEach: (children, func, context?: any) => {
+    // 不返回数组即可
+    mapChildren(children, func, context);
+  },
+  map: mapChildren,
+  // 并非所有元素都会计数,只计数调用callMapFun函数次数
+  count: children => {
+    let n = 0;
+    mapChildren(children, () => {
+      n++;
+    });
+    return n;
+  },
+  only: (children: any) => {
+    throwIfTrue(!isValidElement(children), 'Inula.Children.only function received invalid element.');
+    return children;
+  },
+  toArray: children => {
+    const result = [];
+    mapChildrenToArray(children, result, '', child => child);
+    return result;
+  },
+} as ChildrenType;
+
+export { Children };
diff --git a/packages/inula-reactive/src/external/InulaIs.ts b/packages/inula-reactive/src/external/InulaIs.ts
new file mode 100644
index 00000000..1e3fab99
--- /dev/null
+++ b/packages/inula-reactive/src/external/InulaIs.ts
@@ -0,0 +1,113 @@
+/*
+ * 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.
+ */
+import {
+  TYPE_COMMON_ELEMENT,
+  TYPE_CONTEXT,
+  TYPE_FORWARD_REF,
+  TYPE_FRAGMENT,
+  TYPE_LAZY,
+  TYPE_MEMO,
+  TYPE_PORTAL,
+  TYPE_PROVIDER,
+  TYPE_SUSPENSE,
+} from './JSXElementType';
+import { InulaElement, LazyComponent, MemoComponent } from '../types';
+
+function isObject(anyThing) {
+  return Object.prototype.toString.call(anyThing) === '[object Object]';
+}
+
+function isBuiltinTag(type: any) {
+  return [TYPE_FRAGMENT, TYPE_SUSPENSE].includes(type);
+}
+
+function isBuiltinComponent(type: any) {
+  return [TYPE_MEMO, TYPE_PROVIDER, TYPE_LAZY, TYPE_FORWARD_REF, TYPE_CONTEXT].includes(type);
+}
+/**
+ * 获取传入的element的类型
+ * 1. fragment, suspense 属于内置标签，类型位于type
+ * 2. memo, lazy, forwardRef 属于包装函数，产生新的对象，类型位于type.vtype
+ * 3. Context.Provider/Consumer 的类型是框架定义的对象，类型位于type.vtype
+ * 4. portal比较特殊，函数结果直接可以作为element，类型位于vtype
+ * @param ele
+ */
+function getType(ele: any) {
+  if (isObject(ele)) {
+    const type = ele.type;
+    if (isBuiltinTag(type)) {
+      return type;
+    }
+
+    const vtypeOfType = type?.vtype;
+    if (isBuiltinComponent(vtypeOfType)) {
+      return vtypeOfType;
+    }
+
+    const vtype = ele.vtype;
+    if (TYPE_PORTAL === vtype) {
+      return vtype;
+    }
+  }
+
+  return undefined;
+}
+
+export function isElement(ele: any): ele is InulaElement {
+  return isObject(ele) && ele.vtype === TYPE_COMMON_ELEMENT;
+}
+
+export function isFragment(ele: any): ele is InulaElement {
+  return getType(ele) === TYPE_FRAGMENT;
+}
+
+export function isForwardRef(ele: any): ele is InulaElement {
+  return getType(ele) === TYPE_FORWARD_REF;
+}
+
+export function isLazy(ele: any): ele is LazyComponent<any> {
+  return getType(ele) === TYPE_LAZY;
+}
+
+export function isMemo(ele: any): ele is MemoComponent<any> {
+  return getType(ele) === TYPE_MEMO;
+}
+
+export function isPortal(ele: any): ele is InulaElement {
+  return getType(ele) === TYPE_PORTAL;
+}
+
+export function isContextProvider(ele: any): ele is InulaElement {
+  return getType(ele) === TYPE_PROVIDER;
+}
+
+// Context.consumer的类型就是context的类型
+export function isContextConsumer(ele: any): ele is InulaElement {
+  return getType(ele) === TYPE_CONTEXT;
+}
+
+export function isValidElementType(type: any) {
+  if (typeof type === 'string' || typeof type === 'function' || isBuiltinTag(type)) {
+    return true;
+  }
+
+  if (isObject(type)) {
+    if (isBuiltinComponent(type.vtype)) {
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/packages/inula-reactive/src/external/JSXElement.ts b/packages/inula-reactive/src/external/JSXElement.ts
new file mode 100644
index 00000000..31f412cf
--- /dev/null
+++ b/packages/inula-reactive/src/external/JSXElement.ts
@@ -0,0 +1,144 @@
+/*
+ * 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.
+ */
+
+import { TYPE_COMMON_ELEMENT } from './JSXElementType';
+import { getProcessingClassVNode } from '../renderer/GlobalVar';
+import { Source } from '../renderer/Types';
+import { BELONG_CLASS_VNODE_KEY } from '../renderer/vnode/VNode';
+import { InulaElement, KVObject } from '../types';
+import { isReactiveObj } from '../reactive/Utils';
+
+/**
+ * vtype 节点的类型，这里固定是element
+ * type 保存dom节点的名称或者组件的函数地址
+ * key key属性
+ * ref ref属性
+ * props 其他常规属性
+ */
+export function JSXElement(type, key, ref, vNode, props, source: Source | null) {
+  const ele = {
+    // 元素标识符
+    vtype: TYPE_COMMON_ELEMENT,
+    src: null,
+
+    // 属于元素的内置属性
+    type: type,
+    key: key,
+    ref: ref,
+    props: props,
+
+    // 所属的class组件,clonedeep jsxElement时需要防止无限循环
+    [BELONG_CLASS_VNODE_KEY]: vNode,
+  };
+  // 兼容IE11不支持Symbol
+  if (typeof BELONG_CLASS_VNODE_KEY === 'string') {
+    Object.defineProperty(ele, BELONG_CLASS_VNODE_KEY, {
+      configurable: false,
+      enumerable: false,
+      value: vNode,
+    });
+  }
+  if (isDev) {
+    // 为了test判断两个 JSXElement 对象是否相等时忽略src属性，需要设置src的enumerable为false
+    Object.defineProperty(ele, 'src', {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: source,
+    });
+  }
+
+  return ele;
+}
+
+function mergeDefault(sourceObj, defaultObj) {
+  Object.keys(defaultObj).forEach(key => {
+    if (sourceObj[key] === undefined) {
+      sourceObj[key] = defaultObj[key];
+    }
+  });
+}
+
+// ['key', 'ref', '__source', '__self']属性不从setting获取
+const keyArray = ['key', 'ref', '__source', '__self'];
+
+function buildElement(isClone, type, setting, children) {
+  // setting中的值优先级最高，clone情况下从 type 中取值，创建情况下直接赋值为 null
+  let key;
+  if (setting && setting.key !== undefined) {
+    if (isReactiveObj(setting.key)) {
+      key = setting.key;
+    } else {
+      key = String(setting.key);
+    }
+  } else {
+    key = isClone ? type.key : null;
+  }
+
+  const ref = setting && setting.ref !== undefined ? setting.ref : isClone ? type.ref : null;
+  const props = isClone ? { ...type.props } : {};
+  let vNode = isClone ? type[BELONG_CLASS_VNODE_KEY] : getProcessingClassVNode();
+
+  if (setting !== null && setting !== undefined) {
+    for (const k in setting) {
+      if (!keyArray.includes(k)) {
+        props[k] = setting[k];
+      }
+    }
+    if (setting.ref !== undefined && isClone) {
+      vNode = getProcessingClassVNode();
+    }
+  }
+
+  if (children.length) {
+    props.children = children.length === 1 ? children[0] : children;
+  }
+  const element = isClone ? type.type : type;
+  // 合并默认属性
+  if (element && element.defaultProps) {
+    mergeDefault(props, element.defaultProps);
+  }
+  let src: Source | null = null;
+  if (setting?.__source) {
+    src = {
+      fileName: setting.__source.fileName,
+      lineNumber: setting.__source.lineNumber,
+    };
+  }
+  return JSXElement(element, key, ref, vNode, props, src);
+}
+
+// 创建Element结构体，供JSX编译时调用
+export function createElement(type, setting, ...children) {
+  return buildElement(false, type, setting, children);
+}
+
+export function cloneElement(element, setting, ...children) {
+  return buildElement(true, element, setting, children);
+}
+
+// 检测结构体是否为合法的Element
+export function isValidElement<P>(element: KVObject | null | undefined): element is InulaElement<P> {
+  return !!(element && element.vtype === TYPE_COMMON_ELEMENT);
+}
+
+// 兼容高版本的babel编译方式
+export function jsx(type, setting, key) {
+  if (setting.key === undefined && key !== undefined) {
+    setting.key = key;
+  }
+
+  return buildElement(false, type, setting, []);
+}
diff --git a/packages/inula-reactive/src/external/JSXElementType.ts b/packages/inula-reactive/src/external/JSXElementType.ts
new file mode 100644
index 00000000..638c5aa2
--- /dev/null
+++ b/packages/inula-reactive/src/external/JSXElementType.ts
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+import { Fragment, InulaProfiler, StrictMode, Suspense } from '../types';
+
+export const TYPE_COMMON_ELEMENT = 1;
+export const TYPE_PORTAL = 2;
+export const TYPE_FRAGMENT = 3 as unknown as Fragment;
+export const TYPE_STRICT_MODE = 4 as unknown as StrictMode;
+export const TYPE_PROVIDER = 5;
+export const TYPE_CONTEXT = 6;
+export const TYPE_FORWARD_REF = 7;
+export const TYPE_SUSPENSE = 8 as unknown as Suspense;
+export const TYPE_PROFILER = 9 as unknown as InulaProfiler;
+export const TYPE_MEMO = 10;
+export const TYPE_LAZY = 11;
diff --git a/packages/inula-reactive/src/external/TestUtil.ts b/packages/inula-reactive/src/external/TestUtil.ts
new file mode 100644
index 00000000..f156b535
--- /dev/null
+++ b/packages/inula-reactive/src/external/TestUtil.ts
@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+import { asyncUpdates } from '../renderer/TreeBuilder';
+import { callRenderQueueImmediate } from '../renderer/taskExecutor/RenderQueue';
+import { hasAsyncEffects, runAsyncEffects } from '../renderer/submit/HookEffectHandler';
+import { isPromise } from '../renderer/ErrorHandler';
+
+interface Thenable {
+  then(resolve: (val?: any) => void, reject: (err: any) => void): void;
+}
+
+// 防止死循环
+const LOOPING_LIMIT = 50;
+let loopingCount = 0;
+function callRenderQueue() {
+  callRenderQueueImmediate();
+
+  while (hasAsyncEffects() && loopingCount < LOOPING_LIMIT) {
+    loopingCount++;
+    runAsyncEffects();
+    // effects可能产生刷新任务，这里再执行一次
+    callRenderQueueImmediate();
+  }
+}
+
+// act用于测试，作用是：如果fun触发了刷新（包含了异步刷新），可以保证在act后面的代码是在刷新完成后才执行。
+function act(fun: () => void | Thenable): Thenable {
+  const funRet = asyncUpdates(fun);
+
+  callRenderQueue();
+
+  // 如果fun返回的是Promise
+  if (isPromise(funRet)) {
+    // testing-library会返回Promise
+    return {
+      then(resolve, reject) {
+        funRet.then(
+          () => {
+            if (typeof setImmediate === 'function') {
+              // 通过setImmediate回调，用于等待业务的setTimeout完成
+              setImmediate(() => {
+                callRenderQueue();
+                resolve();
+              });
+            } else {
+              callRenderQueue();
+              resolve();
+            }
+          },
+          err => {
+            reject(err);
+          }
+        );
+      },
+    };
+  } else {
+    return {
+      then(resolve) {
+        resolve();
+      },
+    };
+  }
+}
+
+export { act };
diff --git a/packages/inula-reactive/src/external/devtools.ts b/packages/inula-reactive/src/external/devtools.ts
new file mode 100644
index 00000000..5b6d7ff7
--- /dev/null
+++ b/packages/inula-reactive/src/external/devtools.ts
@@ -0,0 +1,137 @@
+/*
+ * 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.
+ */
+
+import { travelVNodeTree } from '../renderer/vnode/VNodeUtils';
+import { Hook, Reducer, MutableRef, Effect, CallBack, Memo } from '../renderer/hooks/HookType';
+import { VNode } from '../renderer/vnode/VNode';
+import { launchUpdateFromVNode } from '../renderer/TreeBuilder';
+import { DomComponent } from '../renderer/vnode/VNodeTags';
+import { getElementTag } from '../renderer/vnode/VNodeCreator';
+import { JSXElement } from '../renderer/Types';
+import { EffectConstant } from '../renderer/hooks/EffectConstant';
+
+const isEffectHook = (state: any): state is Effect => !!state.effect;
+const isRefHook = (state: any): state is MutableRef<any> => Object.prototype.hasOwnProperty.call(state, 'current');
+const isCallbackHook = (state: any): state is CallBack<any> => Object.prototype.hasOwnProperty.call(state, 'func');
+const isMemoHook = (state: any): state is Memo<any> => Object.prototype.hasOwnProperty.call(state, 'result');
+
+const HookName = {
+  StateHook: 'State',
+  EffectHook: 'Effect',
+  LayoutEffectHook: 'LayoutEffect',
+  MemoHook: 'Memo',
+  RefHook: 'Ref',
+  ReducerHook: 'Reducer',
+  CallbackHook: 'Callback',
+};
+
+export const helper = {
+  travelVNodeTree: (rootVNode, fun, childFilter: ((node: VNode) => boolean) | null = null) => {
+    travelVNodeTree(rootVNode, fun, childFilter, rootVNode, null);
+  },
+  // 获取 hook 名，hIndex值和存储的值
+  getHookInfo: (hook: Hook<any, any>) => {
+    const { hIndex, state } = hook;
+    if ((state as Reducer<any, any>).trigger) {
+      if ((state as Reducer<any, any>).isUseState) {
+        return { name: HookName.StateHook, hIndex, value: (state as Reducer<any, any>).stateValue };
+      } else if ((state as Reducer<any, any>).reducer) {
+        return { name: HookName.ReducerHook, hIndex, value: (state as Reducer<any, any>).stateValue };
+      }
+    } else if (isRefHook(state)) {
+      return { name: HookName.RefHook, hIndex, value: (state as MutableRef<any>).current };
+    } else if (isEffectHook(state)) {
+      const name =
+        state.effectConstant == EffectConstant.LayoutEffect || EffectConstant.LayoutEffect | EffectConstant.DepsChange
+          ? HookName.LayoutEffectHook
+          : HookName.EffectHook;
+      return { name, hIndex, value: (state as Effect).effect };
+    } else if (isCallbackHook(state)) {
+      return { name: HookName.CallbackHook, hIndex, value: (state as CallBack<any>).func };
+    } else if (isMemoHook(state)) {
+      return { name: HookName.MemoHook, hIndex, value: (state as Memo<any>).result };
+    }
+    return null;
+  },
+  updateProps: (vNode: VNode, props: any) => {
+    vNode.devProps = props;
+    launchUpdateFromVNode(vNode);
+  },
+  updateState: (vNode: VNode, nextState) => {
+    const instance = vNode.realNode;
+    instance.setState(nextState);
+  },
+  updateHooks: (vNode: VNode, hIndex, nextState) => {
+    const hooks = vNode.hooks;
+    if (hooks) {
+      const editHook = hooks[hIndex];
+      const editState = editHook.state as Reducer<any, any>;
+      // 暂时只支持更新 useState 的值
+      if (editState.trigger && editState.isUseState) {
+        editState.trigger(nextState);
+      }
+    } else {
+      console.error('Target vNode is not a hook vNode: ', vNode);
+    }
+  },
+  getComponentInfo: (vNode: VNode) => {
+    const { props, state, hooks } = vNode;
+    const info: any = {};
+    if (props && Object.keys(props).length !== 0) {
+      info['Props'] = props;
+    }
+    if (state && Object.keys(state).length !== 0) {
+      info['State'] = state;
+    }
+    if (hooks && hooks.length !== 0) {
+      const logHookInfo: any[] = [];
+      hooks.forEach(hook => {
+        const state = hook.state as Reducer<any, any>;
+        if (state.trigger && state.isUseState) {
+          logHookInfo.push(state.stateValue);
+        }
+      });
+      info['Hooks'] = logHookInfo;
+    }
+    travelVNodeTree(
+      vNode,
+      (node: VNode) => {
+        if (node.tag === DomComponent) {
+          // 找到组件的第一个dom元素，返回它所在父节点的全部子节点
+          const dom = node.realNode;
+          info['Nodes'] = dom?.parentNode?.childNodes;
+          return true;
+        }
+        return false;
+      },
+      null,
+      vNode,
+      null
+    );
+    return info;
+  },
+  getElementTag: (element: JSXElement) => {
+    return getElementTag(element);
+  },
+};
+
+export function injectUpdater() {
+  const hook = window.__INULA_DEV_HOOK__;
+  if (hook) {
+    hook.init(helper);
+  }
+}
+
+injectUpdater();
diff --git a/packages/inula-reactive/src/index.ts b/packages/inula-reactive/src/index.ts
new file mode 100644
index 00000000..30def4cc
--- /dev/null
+++ b/packages/inula-reactive/src/index.ts
@@ -0,0 +1,226 @@
+/*
+ * 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.
+ */
+
+import {
+  TYPE_FRAGMENT as Fragment,
+  TYPE_PROFILER as Profiler,
+  TYPE_STRICT_MODE as StrictMode,
+  TYPE_SUSPENSE as Suspense,
+  TYPE_FORWARD_REF as ForwardRef,
+  TYPE_MEMO as Memo,
+} from './external/JSXElementType';
+
+import { Component, PureComponent } from './renderer/components/BaseClassComponent';
+import { createRef } from './renderer/components/CreateRef';
+import { Children } from './external/ChildrenUtil';
+import { createElement, cloneElement, isValidElement } from './external/JSXElement';
+import { createContext } from './renderer/components/context/CreateContext';
+import { lazy } from './renderer/components/Lazy';
+import { forwardRef } from './renderer/components/ForwardRef';
+import { memo } from './renderer/components/Memo';
+import './external/devtools';
+
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useDebugValue,
+  useAtom,
+  useCompute,
+  useComputed,
+  useReactive,
+  useWatch,
+} from './renderer/hooks/HookExternal';
+import {
+  isContextProvider,
+  isContextConsumer,
+  isElement,
+  isValidElementType,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+} from './external/InulaIs';
+import { createStore, useStore, clearStore } from './inulax/store/StoreHandler';
+import * as reduxAdapter from './inulax/adapters/redux';
+import { watch } from './inulax/proxy/watch';
+import { act } from './external/TestUtil';
+
+import {
+  render,
+  createPortal,
+  unstable_batchedUpdates,
+  findDOMNode,
+  unmountComponentAtNode,
+  createRoot,
+} from './dom/DOMExternal';
+
+import { syncUpdates as flushSync } from './renderer/TreeBuilder';
+import { toRaw } from './inulax/proxy/ProxyHandler';
+
+import { For } from './reactive/components/For';
+import { Show } from './reactive/components/Show';
+import { Switch } from './reactive/components/Switch';
+import { RText } from './reactive/components/RText';
+import { reactive } from './reactive/Reactive';
+import { computed } from './reactive/Computed';
+import { isReactiveObj } from './reactive/Utils';
+import { watch as watchReactive } from './reactive/Watch';
+
+const Inula = {
+  Children,
+  createRef,
+  Component,
+  PureComponent,
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  useDebugValue,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  createElement,
+  cloneElement,
+  isValidElement,
+  render,
+  createRoot,
+  createPortal,
+  unstable_batchedUpdates,
+  findDOMNode,
+  unmountComponentAtNode,
+  act,
+  flushSync,
+  createStore,
+  useStore,
+  clearStore,
+  reduxAdapter,
+  watch,
+  isFragment,
+  isElement,
+  isValidElementType,
+  isForwardRef,
+  isLazy,
+  isMemo,
+  isPortal,
+  isContextProvider,
+  isContextConsumer,
+  ForwardRef,
+  Memo,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+  // reactive
+  reactive,
+  computed,
+  watchReactive,
+  isReactiveObj,
+  For,
+  Show,
+  Switch,
+  RText,
+  useAtom,
+  useReactive,
+  useCompute,
+  useComputed,
+  useWatch,
+};
+
+export const version = __VERSION__;
+export {
+  Children,
+  createRef,
+  Component,
+  PureComponent,
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  useDebugValue,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  createElement,
+  cloneElement,
+  isValidElement,
+  createRoot,
+  render,
+  createPortal,
+  unstable_batchedUpdates,
+  findDOMNode,
+  unmountComponentAtNode,
+  act,
+  flushSync,
+  // 状态管理器InulaX接口
+  createStore,
+  useStore,
+  clearStore,
+  reduxAdapter,
+  watch,
+  toRaw,
+  // 兼容ReactIs
+  isFragment,
+  isElement,
+  isValidElementType,
+  isForwardRef,
+  isLazy,
+  isMemo,
+  isPortal,
+  isContextProvider,
+  isContextConsumer,
+  ForwardRef,
+  Memo,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+  // reactive
+  reactive,
+  computed,
+  watchReactive,
+  isReactiveObj,
+  For,
+  Show,
+  Switch,
+  RText,
+  useAtom,
+  useReactive,
+  useCompute,
+  useComputed,
+  useWatch,
+};
+
+export * from './types';
+export default Inula;
diff --git a/packages/inula-reactive/src/inulax/CommonUtils.ts b/packages/inula-reactive/src/inulax/CommonUtils.ts
new file mode 100644
index 00000000..a6c47181
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/CommonUtils.ts
@@ -0,0 +1,174 @@
+/*
+ * 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 function isObject(obj: any): boolean {
+  const type = typeof obj;
+  return (obj !== null || obj !== undefined) && (type === 'object' || type === 'function');
+}
+
+export function isSet(obj: any): boolean {
+  return (
+    (obj !== null || obj !== undefined) &&
+    (Object.prototype.toString.call(obj) === '[object Set]' || obj.constructor === Set)
+  );
+}
+
+export function isWeakSet(obj: any): boolean {
+  return (
+    (obj !== null || obj !== undefined) &&
+    (Object.prototype.toString.call(obj) === '[object WeakSet]' || obj.constructor === WeakSet)
+  );
+}
+
+export function isMap(obj: any): boolean {
+  return (
+    (obj !== null || obj !== undefined) &&
+    (Object.prototype.toString.call(obj) === '[object Map]' || obj.constructor === Map)
+  );
+}
+
+export function isWeakMap(obj: any): boolean {
+  return (
+    (obj !== null || obj !== undefined) &&
+    (Object.prototype.toString.call(obj) === '[object WeakMap]' || obj.constructor === WeakMap)
+  );
+}
+
+export function isArray(obj: any): boolean {
+  return Object.prototype.toString.call(obj) === '[object Array]';
+}
+
+export function isCollection(obj: any): boolean {
+  return isSet(obj) || isWeakSet(obj) || isMap(obj) || isWeakMap(obj);
+}
+
+export function isString(obj: any): boolean {
+  return typeof obj === 'string';
+}
+
+// key是有效的正整数字的字符串
+export function isValidIntegerKey(key: any): boolean {
+  return isString(key) && key !== 'NaN' && key[0] !== '-' && String(parseInt(key, 10)) === key;
+}
+
+export function isPromise(obj: any): boolean {
+  return isObject(obj) && typeof obj.then === 'function';
+}
+
+export function isSame(x, y) {
+  if (!(typeof Object.is === 'function')) {
+    if (x === y) {
+      // +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // NaN == NaN
+      return x !== x && y !== y;
+    }
+  } else {
+    return Object.is(x, y);
+  }
+}
+
+export function getDetailedType(val: any) {
+  if (val === undefined) return 'undefined';
+  if (val === null) return 'null';
+  if (isPromise(val)) return 'promise';
+  if (isArray(val)) return 'array';
+  if (isWeakMap(val)) return 'weakMap';
+  if (isMap(val)) return 'map';
+  if (isWeakSet(val)) return 'weakSet';
+  if (isSet(val)) return 'set';
+  return typeof val;
+}
+
+export function resolveMutation(from, to) {
+  if (getDetailedType(from) !== getDetailedType(to)) {
+    return { mutation: true, from, to };
+  }
+
+  switch (getDetailedType(from)) {
+    case 'array': {
+      const len = Math.max(from.length, to.length);
+      const res: any[] = [];
+      let found = false;
+      for (let i = 0; i < len; i++) {
+        if (from.length <= i) {
+          res[i] = { mutation: true, to: to[i] };
+          found = true;
+        } else if (to.length <= i) {
+          res[i] = { mutation: true, from: from[i] };
+          found = true;
+        } else {
+          res[i] = resolveMutation(from[i], to[i]);
+          if (res[i].mutation) found = true;
+        }
+      }
+
+      // need to resolve shifts
+      return { mutation: found, items: res, from, to };
+    }
+
+    case 'object': {
+      if (from._type && from._type === to._type) {
+        if (from._type === 'Map') {
+          const entries = resolveMutation(from.entries, to.entries);
+          return {
+            mutation: entries.items.some(item => item.mutation),
+            from,
+            to,
+            entries: entries.items,
+          };
+        }
+
+        if (from._type === 'Set') {
+          const values = resolveMutation(from.values, to.values);
+          return { mutation: values.items.some(item => item.mutation), from, to, values: values.items };
+        }
+      }
+
+      const keys = Object.keys({ ...from, ...to }).filter(key => key !== '_inulaObserver');
+      const res = {};
+      let found = false;
+      keys.forEach(key => {
+        if (!(key in from)) {
+          res[key] = { mutation: true, to: to[key] };
+          found = true;
+          return;
+        }
+
+        if (!(key in to)) {
+          res[key] = { mutation: true, from: from[key] };
+          found = true;
+          return;
+        }
+        res[key] = resolveMutation(from[key], to[key]);
+        if (res[key].mutation) found = true;
+      });
+      return { mutation: found, attributes: res, from, to };
+    }
+
+    default: {
+      if (from === to) return { mutation: false };
+
+      return { mutation: true, from, to };
+    }
+  }
+}
+
+export function omit(obj, ...attrs) {
+  const res = { ...obj };
+  attrs.forEach(attr => delete res[attr]);
+  return res;
+}
diff --git a/packages/inula-reactive/src/inulax/Constants.ts b/packages/inula-reactive/src/inulax/Constants.ts
new file mode 100644
index 00000000..3e27a7b4
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/Constants.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 const OBSERVER_KEY = typeof Symbol === 'function' ? Symbol('_inulaObserver') : '_inulaObserver';
+
+export const RAW_VALUE = '_rawValue';
diff --git a/packages/inula-reactive/src/inulax/adapters/redux.ts b/packages/inula-reactive/src/inulax/adapters/redux.ts
new file mode 100644
index 00000000..b996abed
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/adapters/redux.ts
@@ -0,0 +1,203 @@
+/*
+ * 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.
+ */
+
+import { createStore as createStoreX } from '../store/StoreHandler';
+
+export { thunk } from './reduxThunk';
+
+export {
+  Provider,
+  useSelector,
+  useStore,
+  useDispatch,
+  connect,
+  createSelectorHook,
+  createDispatchHook,
+} from './reduxReact';
+
+export type ReduxStoreHandler = {
+  reducer: (state: any, action: { type: string }) => any;
+  dispatch: (action: { type: string }) => void;
+  getState: () => any;
+  subscribe: (listener: () => void) => () => void;
+  replaceReducer: (reducer: (state: any, action: { type: string }) => any) => void;
+};
+
+export type ReduxAction = {
+  type: string;
+  [key: string]: any;
+};
+
+export type ReduxMiddleware = (
+  store: ReduxStoreHandler,
+  extraArgument?: any
+) => (
+  next: (action: ReduxAction) => any
+) => (
+  action:
+    | ReduxAction
+    | ((dispatch: (action: ReduxAction) => void, store: ReduxStoreHandler, extraArgument?: any) => any)
+) => ReduxStoreHandler;
+
+type Reducer = (state: any, action: ReduxAction) => any;
+
+function mergeData(state, data) {
+  if (!data) {
+    state.stateWrapper = data;
+    return;
+  }
+
+  if (Array.isArray(data) && Array.isArray(state?.stateWrapper)) {
+    state.stateWrapper.length = data.length;
+    data.forEach((item, idx) => {
+      if (item != state.stateWrapper[idx]) {
+        state.stateWrapper[idx] = item;
+      }
+    });
+    return;
+  }
+
+  if (typeof data === 'object' && typeof state?.stateWrapper === 'object') {
+    Object.keys(state.stateWrapper).forEach(key => {
+      if (!Object.prototype.hasOwnProperty.call(data, key)) {
+        delete state.stateWrapper[key];
+      }
+    });
+
+    Object.entries(data).forEach(([key, value]) => {
+      if (state.stateWrapper[key] !== value) {
+        state.stateWrapper[key] = value;
+      }
+    });
+    return;
+  }
+
+  state.stateWrapper = data;
+}
+
+export function createStore(reducer: Reducer, preloadedState?: any, enhancers?): ReduxStoreHandler {
+  const store = createStoreX({
+    id: 'defaultStore',
+    state: { stateWrapper: preloadedState },
+    actions: {
+      dispatch: (state: { stateWrapper?: any }, action) => {
+        let result;
+        if (state.stateWrapper !== undefined && state.stateWrapper !== null) {
+          result = reducer(state.stateWrapper, action);
+        } else {
+          result = reducer(undefined, action);
+        }
+
+        if (result === undefined) {
+          return;
+        } // NOTE: reducer should never return undefined, in this case, do not change state
+        state.stateWrapper = result;
+      },
+    },
+    options: {
+      isReduxAdapter: true,
+    },
+  })();
+
+  const result: Record<string, any> = {
+    reducer,
+    getState: function () {
+      return store.$s.stateWrapper;
+    },
+    subscribe: listener => {
+      store.$subscribe(listener);
+
+      return () => {
+        store.$unsubscribe(listener);
+      };
+    },
+    replaceReducer: newReducer => {
+      reducer = newReducer;
+    },
+    _inulaXstore: store,
+    dispatch: store.$a.dispatch,
+  };
+
+  enhancers && enhancers(result);
+
+  result.dispatch({ type: 'InulaX' });
+
+  store.reduxHandler = result;
+
+  return result as ReduxStoreHandler;
+}
+
+export function combineReducers(reducers: { [key: string]: Reducer }): Reducer {
+  return (state, action) => {
+    state = state || {};
+    const newState = {};
+    Object.entries(reducers).forEach(([key, reducer]) => {
+      newState[key] = reducer(state[key], action);
+    });
+    return newState;
+  };
+}
+
+function applyMiddlewares(store: ReduxStoreHandler, middlewares: ReduxMiddleware[]): void {
+  middlewares = middlewares.slice();
+  middlewares.reverse();
+  let dispatch = store.dispatch;
+  middlewares.forEach(middleware => {
+    dispatch = middleware(store)(dispatch);
+  });
+  store.dispatch = dispatch;
+}
+
+export function applyMiddleware(...middlewares: ReduxMiddleware[]): (store: ReduxStoreHandler) => void {
+  return store => {
+    return applyMiddlewares(store, middlewares);
+  };
+}
+
+type ActionCreator = (...params: any[]) => ReduxAction;
+type ActionCreators = { [key: string]: ActionCreator };
+export type BoundActionCreator = (...params: any[]) => void;
+type BoundActionCreators = { [key: string]: BoundActionCreator };
+type Dispatch = (action) => any;
+
+export function bindActionCreators(actionCreators: ActionCreators, dispatch: Dispatch): BoundActionCreators {
+  const boundActionCreators = {};
+  Object.entries(actionCreators).forEach(([key, value]) => {
+    boundActionCreators[key] = (...args) => {
+      dispatch(value(...args));
+    };
+  });
+
+  return boundActionCreators;
+}
+
+export function compose(...middlewares: ReduxMiddleware[]) {
+  return (store: ReduxStoreHandler, extraArgument: any) => {
+    let val;
+    middlewares.reverse().forEach((middleware: ReduxMiddleware, index) => {
+      if (!index) {
+        val = middleware(store, extraArgument);
+        return;
+      }
+      val = middleware(val);
+    });
+    return val;
+  };
+}
+
+// InulaX batches updates by default, this function is only for backwards compatibility
+export function batch(fn: () => void) {
+  fn();
+}
diff --git a/packages/inula-reactive/src/inulax/adapters/reduxReact.ts b/packages/inula-reactive/src/inulax/adapters/reduxReact.ts
new file mode 100644
index 00000000..51650f98
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/adapters/reduxReact.ts
@@ -0,0 +1,177 @@
+/*
+ * 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.
+ */
+
+import { useState, useContext, useEffect, useRef } from '../../renderer/hooks/HookExternal';
+import { createContext } from '../../renderer/components/context/CreateContext';
+import { createElement } from '../../external/JSXElement';
+import type { ReduxStoreHandler, ReduxAction, BoundActionCreator } from './redux';
+
+const DefaultContext = createContext(null);
+type Context = typeof DefaultContext;
+
+export function Provider({
+  store,
+  context = DefaultContext,
+  children,
+}: {
+  store: ReduxStoreHandler;
+  context: Context;
+  children?: any[];
+}) {
+  const Context = context; // NOTE: bind redux API to inula API requires this renaming;
+  return createElement(Context.Provider, { value: store }, children);
+}
+
+export function createStoreHook(context: Context): () => ReduxStoreHandler {
+  return () => {
+    return useContext(context) as unknown as ReduxStoreHandler;
+  };
+}
+
+export function createSelectorHook(context: Context): (selector?: (any) => any) => any {
+  const store = createStoreHook(context)() as unknown as ReduxStoreHandler;
+  return function (selector = state => state) {
+    const [b, fr] = useState(false);
+
+    useEffect(() => {
+      const unsubscribe = store.subscribe(() => fr(!b));
+      return () => {
+        unsubscribe();
+      };
+    });
+
+    return selector(store.getState());
+  };
+}
+
+export function createDispatchHook(context: Context): () => BoundActionCreator {
+  const store = createStoreHook(context)() as unknown as ReduxStoreHandler;
+  return function () {
+    return action => {
+      store.dispatch(action);
+    };
+  }.bind(store);
+}
+
+export const useSelector = selector => {
+  return createSelectorHook(DefaultContext)(selector);
+};
+
+export const useDispatch = () => {
+  return createDispatchHook(DefaultContext)();
+};
+
+export const useStore = () => {
+  return createStoreHook(DefaultContext)();
+};
+
+type MapStateToPropsP<StateProps, OwnProps> = (state: any, ownProps: OwnProps) => StateProps;
+type MapDispatchToPropsP<DispatchProps, OwnProps> =
+  | { [key: string]: (...args: any[]) => ReduxAction }
+  | ((dispatch: (action: ReduxAction) => any, ownProps: OwnProps) => DispatchProps);
+type MergePropsP<StateProps, DispatchProps, OwnProps, MergedProps> = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: OwnProps
+) => MergedProps;
+
+type WrappedComponent<OwnProps> = (props: OwnProps) => ReturnType<typeof createElement>;
+type OriginalComponent<MergedProps> = (props: MergedProps) => ReturnType<typeof createElement>;
+type Connector<OwnProps, MergedProps> = (Component: OriginalComponent<MergedProps>) => WrappedComponent<OwnProps>;
+
+export function connect<StateProps, DispatchProps, OwnProps, MergedProps>(
+  mapStateToProps: MapStateToPropsP<StateProps, OwnProps> = () => ({} as StateProps),
+  mapDispatchToProps: MapDispatchToPropsP<DispatchProps, OwnProps> = () => ({} as DispatchProps),
+  mergeProps: MergePropsP<StateProps, DispatchProps, OwnProps, MergedProps> = (
+    stateProps,
+    dispatchProps,
+    ownProps
+  ): MergedProps => ({ ...stateProps, ...dispatchProps, ...ownProps } as unknown as MergedProps),
+  options?: {
+    areStatesEqual?: (oldState: any, newState: any) => boolean;
+    context?: Context;
+  }
+): Connector<OwnProps, MergedProps> {
+  if (!options) {
+    options = {};
+  }
+
+  //this component should bear the type returned from mapping functions
+  return (Component: OriginalComponent<MergedProps>): WrappedComponent<OwnProps> => {
+    const useStore = createStoreHook(options?.context || DefaultContext);
+
+    //this component should mimic original type of component used
+    const Wrapper: WrappedComponent<OwnProps> = (props: OwnProps) => {
+      const [f, forceReload] = useState(true);
+
+      const store = useStore() as unknown as ReduxStoreHandler;
+
+      useEffect(() => {
+        const unsubscribe = store.subscribe(() => forceReload(!f));
+        return () => {
+          unsubscribe();
+        };
+      });
+
+      const previous = useRef({
+        state: {},
+        mappedState: {},
+      }) as {
+        current: {
+          state: { [key: string]: any };
+          mappedState: StateProps;
+        };
+      };
+
+      let mappedState: StateProps;
+      if (options?.areStatesEqual) {
+        if (options.areStatesEqual(previous.current.state, store.getState())) {
+          mappedState = previous.current.mappedState as StateProps;
+        } else {
+          mappedState = mapStateToProps ? mapStateToProps(store.getState(), props) : ({} as StateProps);
+          previous.current.mappedState = mappedState;
+        }
+      } else {
+        mappedState = mapStateToProps ? mapStateToProps(store.getState(), props) : ({} as StateProps);
+        previous.current.mappedState = mappedState;
+      }
+      let mappedDispatch: DispatchProps = {} as DispatchProps;
+      if (mapDispatchToProps) {
+        if (typeof mapDispatchToProps === 'object') {
+          Object.entries(mapDispatchToProps).forEach(([key, value]) => {
+            mappedDispatch[key] = (...args: ReduxAction[]) => {
+              store.dispatch(value(...args));
+            };
+          });
+        } else {
+          mappedDispatch = mapDispatchToProps(store.dispatch, props);
+        }
+      }
+      const mergedProps = (
+        mergeProps ||
+        ((state, dispatch, originalProps) => {
+          return { ...state, ...dispatch, ...originalProps };
+        })
+      )(mappedState, mappedDispatch, props);
+
+      previous.current.state = store.getState();
+
+      const node = createElement(Component, mergedProps);
+      return node;
+    };
+
+    return Wrapper;
+  };
+}
diff --git a/packages/inula-reactive/src/inulax/adapters/reduxThunk.ts b/packages/inula-reactive/src/inulax/adapters/reduxThunk.ts
new file mode 100644
index 00000000..cd14fee6
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/adapters/reduxThunk.ts
@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import { ReduxStoreHandler, ReduxAction, ReduxMiddleware } from './redux';
+
+function createThunkMiddleware(extraArgument?: any): ReduxMiddleware {
+  return (store: ReduxStoreHandler) =>
+    (next: (action: ReduxAction) => any) =>
+    (
+      action:
+        | ReduxAction
+        | ((dispatch: (action: ReduxAction) => void, store: ReduxStoreHandler, extraArgument?: any) => any)
+    ) => {
+      // This gets called for every action you dispatch.
+      // If it's a function, call it.
+      if (typeof action === 'function') {
+        return action(store.dispatch, store.getState.bind(store), extraArgument);
+      }
+
+      // Otherwise, just continue processing this action as usual
+      return next(action);
+    };
+}
+
+export const thunk = createThunkMiddleware();
+// @ts-ignore
+thunk.withExtraArgument = createThunkMiddleware;
diff --git a/packages/inula-reactive/src/inulax/devtools/constants.ts b/packages/inula-reactive/src/inulax/devtools/constants.ts
new file mode 100644
index 00000000..e3470e84
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/devtools/constants.ts
@@ -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.
+ */
+
+export const INITIALIZED = 'inulax store initialized';
+export const STATE_CHANGE = 'inulax state change';
+export const SUBSCRIBED = 'inulax subscribed';
+export const UNSUBSCRIBED = 'inulax unsubscribed';
+export const ACTION = 'inulax action';
+export const ACTION_QUEUED = 'inulax action queued';
+export const QUEUE_PENDING = 'inulax queue pending';
+export const QUEUE_FINISHED = 'inulax queue finished';
+export const RENDER_TRIGGERED = 'inulax render triggered';
+export const OBSERVED_COMPONENTS = 'inulax observed components';
diff --git a/packages/inula-reactive/src/inulax/devtools/index.ts b/packages/inula-reactive/src/inulax/devtools/index.ts
new file mode 100644
index 00000000..10c71a9e
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/devtools/index.ts
@@ -0,0 +1,251 @@
+/*
+ * 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.
+ */
+
+import { isMap, isSet, isWeakMap, isWeakSet } from '../CommonUtils';
+import { getStore, getAllStores } from '../store/StoreHandler';
+import { OBSERVED_COMPONENTS } from './constants';
+import { VNode } from "../../renderer/vnode/VNode";
+
+const sessionId = Date.now();
+
+// this function is used to detect devtool connection
+export function isPanelActive() {
+  return window['__INULA_DEV_HOOK__'];
+}
+
+// safely serializes variables containing values wrapped in Proxy object
+function getType(value) {
+  if (!value) return 'nullish';
+  if (value.nativeEvent) return 'event';
+  if (typeof value === 'function') return 'function';
+  if (value.constructor?.name === 'VNode') return 'vnode';
+  if (isWeakMap(value)) return 'weakMap';
+  if (isWeakSet(value)) return 'weakSet';
+  if (isMap(value)) return 'map';
+  if (isSet(value)) return 'set';
+  if (Array.isArray(value)) return 'array';
+  if (typeof value === 'object') return 'object';
+  return 'primitive';
+}
+
+function makeProxySnapshot(obj, visited: any[] = []) {
+  const type = getType(obj);
+  let clone;
+
+  try {
+    //NULLISH VALUE
+    if (type === 'nullish') {
+      return obj;
+    }
+    //EVENT
+    if (type === 'event') return obj.type + 'Event';
+    // FUNCTION
+    if (type === 'function') {
+      return obj.toString();
+    }
+    // VNODE
+    if (type === 'vnode') {
+      return {
+        _type: 'VNode',
+        id: window['__INULA_DEV_HOOK__'].getVnodeId(obj),
+        tag: obj.tag,
+      };
+    }
+    // WEAK MAP
+    if (type === 'weakMap') {
+      return {
+        _type: 'WeakMap',
+      };
+    }
+    // WEAK SET
+    if (type === 'weakSet') {
+      return {
+        _type: 'WeakSet',
+      };
+    }
+    // MAP
+    if (type === 'map') {
+      return {
+        _type: 'Map',
+        entries: Array.from(obj.entries()).map(([key, value]) => ({
+          key: makeProxySnapshot(key),
+          value: makeProxySnapshot(value),
+        })),
+      };
+    }
+    // SET
+    if (type === 'set') {
+      return {
+        _type: 'Set',
+        values: Array.from(obj).map(value => makeProxySnapshot(value)),
+      };
+    }
+    // ARRAY
+    if (type === 'array') {
+      if (visited.some(item => item === obj)) return `<Cyclic ${obj.toString()}>`;
+      clone = [];
+      obj.forEach(item => clone.push(makeProxySnapshot(item, visited.concat([obj]))));
+      return clone;
+    }
+    // OBJECT
+    if (type === 'object') {
+      if (visited.some(item => item === obj)) return `<Cyclic ${obj.toString()}>`;
+      clone = {};
+      Object.entries(obj).forEach(([id, value]) => (clone[id] = makeProxySnapshot(value, visited.concat([obj]))));
+      return clone;
+    }
+    // PRIMITIVE
+    return obj;
+  } catch (err) {
+    console.error('cannot serialize object. ', { err, obj, type });
+  }
+}
+
+// serializes store and creates expanded object with baked-in containing current computed values
+function makeStoreSnapshot({ type, data }) {
+  const expanded = {};
+  Object.keys(data.store.$c).forEach(key => {
+    expanded[key] = data.store[key];
+  });
+  data.store.expanded = expanded;
+  const snapshot = makeProxySnapshot({
+    data,
+    type,
+    sessionId,
+  });
+  return snapshot;
+}
+
+export const devtools = {
+  // returns vNode id from inula devtools
+  getVNodeId: vNode => {
+    if (!isPanelActive()) {
+      return null;
+    }
+    window['__INULA_DEV_HOOK__'].send(); // update list first
+    return window['__INULA_DEV_HOOK__'].getVnodeId(vNode);
+  },
+  // sends inulax devtool message to extension
+  emit: (type, data) => {
+    if (!isPanelActive()) {
+      return;
+    }
+    window.postMessage(
+      {
+        type: 'INULA_DEV_TOOLS',
+        payload: makeStoreSnapshot({ type, data }),
+        from: 'dev tool hook',
+      },
+      ''
+    );
+  },
+};
+
+// collects components that are dependent on inulax store and their ids
+function getAffectedComponents() {
+  const allStores = getAllStores();
+  const keys = Object.keys(allStores);
+  const res = {};
+  keys.forEach(key => {
+    if (!allStores[key].$config.state._inulaObserver.keyVNodes) {
+      res[key] = [];
+      return;
+    }
+    const subRes = new Set();
+    const process = Array.from(allStores[key].$config.state._inulaObserver.keyVNodes.values());
+    while (process.length) {
+      const pivot = process.shift() as { tag: 'string' };
+      if (pivot.tag) {
+        subRes.add(pivot);
+      }
+      if (pivot.toString() === '[object Set]') {
+        Array.from(pivot as any).forEach(item => process.push(item));
+      }
+    }
+    res[key] = Array.from(subRes).map((vNode: VNode) => {
+      return {
+        name: vNode?.type
+          .toString()
+          .replace(/\{.*\}/, '{...}')
+          .replace('function ', ''),
+        nodeId: window.__INULA_DEV_HOOK__.getVnodeId(vNode),
+      };
+    });
+  });
+
+  return res;
+}
+
+// listens to messages from background
+window.addEventListener('message', (messageEvent?) => {
+  if (messageEvent?.data?.payload?.type === 'inulax request observed components') {
+    // get observed components
+    setTimeout(() => {
+      window.postMessage(
+        {
+          type: 'INULA_DEV_TOOLS',
+          payload: { type: OBSERVED_COMPONENTS, data: getAffectedComponents() },
+          from: 'dev tool hook',
+        },
+        ''
+      );
+    }, 100);
+  }
+
+  // executes store action
+  if (messageEvent.data?.payload?.type === 'inulax executue action') {
+    const data = messageEvent.data.payload.data;
+    const store = getStore(data.storeId);
+    if (!store?.[data.action]) return;
+
+    const action = store[data.action];
+    const params = data.params;
+    action(...params);
+  }
+
+  // queues store action
+  if (messageEvent?.data?.payload?.type === 'inulax queue action') {
+    const data = messageEvent.data.payload.data;
+    const store = getStore(data.storeId);
+    if (!store?.[data.action]) return;
+
+    const action: any = store.$queue[data.action];
+    const params = data.params;
+    action(...params);
+  }
+
+  // queues change store state
+  if (messageEvent?.data?.payload?.type === 'inulax change state') {
+    const data = messageEvent.data.payload;
+    const store = getStore(data.storeId);
+    if (!store) return;
+    let parent = store.$s;
+    if (data.operation === 'edit') {
+      try {
+        const path = messageEvent.data.payload.path;
+
+        while (path.length > 1) {
+          parent = parent[path.pop()];
+        }
+
+        parent[path[0]] = messageEvent.data.payload.value;
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    // need to implement add and delete element
+  }
+});
diff --git a/packages/inula-reactive/src/inulax/proxy/HooklessObserver.ts b/packages/inula-reactive/src/inulax/proxy/HooklessObserver.ts
new file mode 100644
index 00000000..6a626102
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/HooklessObserver.ts
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+import type { IObserver } from './Observer';
+
+/**
+ * 一个对象（对象、数组、集合）对应一个Observer
+ */
+export class HooklessObserver implements IObserver {
+  listeners: ((mutation) => void)[] = [];
+
+  useProp(key: string | symbol): void {}
+
+  addListener(listener: (mutation) => void) {
+    this.listeners.push(listener);
+  }
+
+  removeListener(listener: (mutation) => void) {
+    this.listeners = this.listeners.filter(item => item != listener);
+  }
+
+  getListeners() {
+    return this.listeners;
+  }
+
+  setProp(key: string | symbol, mutation: any): void {
+    this.triggerChangeListeners(mutation);
+  }
+
+  triggerChangeListeners(mutation: any): void {
+    this.listeners.forEach(listener => {
+      listener(mutation);
+    });
+  }
+
+  triggerUpdate(vNode): void {}
+
+  allChange(): void {}
+
+  clearByVNode(vNode): void {}
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/Observer.ts b/packages/inula-reactive/src/inulax/proxy/Observer.ts
new file mode 100644
index 00000000..0154fa67
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/Observer.ts
@@ -0,0 +1,160 @@
+/*
+ * 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.
+ */
+
+import { launchUpdateFromVNode } from '../../renderer/TreeBuilder';
+import { getProcessingVNode } from '../../renderer/GlobalVar';
+import { VNode } from '../../renderer/vnode/VNode';
+import { devtools } from '../devtools';
+
+export interface IObserver {
+  useProp: (key: string) => void;
+
+  addListener: (listener: () => void) => void;
+
+  removeListener: (listener: () => void) => void;
+
+  setProp: (key: string, mutation: any) => void;
+
+  triggerChangeListeners: (mutation: any) => void;
+
+  triggerUpdate: (vNode: any) => void;
+
+  allChange: () => void;
+
+  clearByVNode: (vNode: any) => void;
+}
+
+/**
+ * 一个对象（对象、数组、集合）对应一个Observer
+ */
+export class Observer implements IObserver {
+  vNodeKeys = new WeakMap();
+
+  keyVNodes = new Map();
+
+  listeners: ((mutation) => void)[] = [];
+
+  watchers = {} as { [key: string]: ((key: string, oldValue: any, newValue: any, mutation: any) => void)[] };
+
+  // 对象的属性被使用时调用
+  useProp(key: string | symbol): void {
+    const processingVNode = getProcessingVNode();
+    if (processingVNode === null || !processingVNode.observers) {
+      // 异常场景
+      return;
+    }
+
+    // vNode -> Observers
+    processingVNode.observers.add(this);
+
+    // key -> vNodes，记录这个prop被哪些VNode使用了
+    let vNodes = this.keyVNodes.get(key);
+    if (!vNodes) {
+      vNodes = new Set();
+      this.keyVNodes.set(key, vNodes);
+    }
+    vNodes.add(processingVNode);
+
+    // vNode -> keys，记录这个VNode使用了哪些props
+    let keys = this.vNodeKeys.get(processingVNode);
+    if (!keys) {
+      keys = new Set();
+      this.vNodeKeys.set(processingVNode, keys);
+    }
+    keys.add(key);
+  }
+
+  // 对象的属性被赋值时调用
+  setProp(key: string | symbol, mutation: any): void {
+    const vNodes = this.keyVNodes.get(key);
+    //NOTE: using Set directly can lead to deadlock
+    const vNodeArray = Array.from(vNodes || []);
+    vNodeArray.forEach((vNode: VNode) => {
+      if (vNode.isStoreChange) {
+        // VNode已经被触发过，不再重复触发
+        return;
+      }
+      vNode.isStoreChange = true;
+
+      // 触发vNode更新
+      this.triggerUpdate(vNode);
+    });
+
+    // NOTE: mutations are different in dev and production.
+    this.triggerChangeListeners({ mutation, vNodes });
+  }
+
+  triggerUpdate(vNode: VNode): void {
+    // 触发VNode更新
+    launchUpdateFromVNode(vNode);
+  }
+
+  addListener(listener: (mutation) => void): void {
+    this.listeners.push(listener);
+  }
+
+  removeListener(listener: (mutation) => void): void {
+    this.listeners = this.listeners.filter(item => item != listener);
+  }
+
+  triggerChangeListeners({ mutation, vNodes }): void {
+    const nodesList = vNodes ? Array.from(vNodes) : [];
+    this.listeners.forEach(listener =>
+      listener({
+        mutation,
+        vNodes: nodesList.map((vNode: VNode) => {
+          let realNode = vNode.realNode;
+          let searchedNode: VNode | null | undefined = vNode;
+          while (!realNode) {
+            searchedNode = searchedNode?.child;
+            realNode = searchedNode?.realNode;
+          }
+          return {
+            type: vNode?.type?.name,
+            id: devtools.getVNodeId(vNode),
+            path: vNode.path,
+            element: realNode?.outerHTML?.substr(0, 100),
+          };
+        }),
+      })
+    );
+  }
+
+  // 触发所有使用的props的VNode更新
+  allChange(): void {
+    const keyIt = this.keyVNodes.keys();
+    let keyItem = keyIt.next();
+    while (!keyItem.done) {
+      this.setProp(keyItem.value, {});
+      keyItem = keyIt.next();
+    }
+  }
+
+  // 删除Observer中保存的这个VNode的关系数据
+  clearByVNode(vNode: VNode): void {
+    const keys = this.vNodeKeys.get(vNode);
+    if (keys) {
+      keys.forEach((key: any) => {
+        const vNodes = this.keyVNodes.get(key);
+        vNodes.delete(vNode);
+        if (vNodes.size === 0) {
+          this.keyVNodes.delete(key);
+        }
+      });
+    }
+
+    this.vNodeKeys.delete(vNode);
+  }
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/ProxyHandler.ts b/packages/inula-reactive/src/inulax/proxy/ProxyHandler.ts
new file mode 100644
index 00000000..84480f85
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/ProxyHandler.ts
@@ -0,0 +1,124 @@
+/*
+ * 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.
+ */
+
+import { createObjectProxy } from './handlers/ObjectProxyHandler';
+import { Observer } from './Observer';
+import { HooklessObserver } from './HooklessObserver';
+import { isArray, isCollection, isObject } from '../CommonUtils';
+import { createArrayProxy } from './handlers/ArrayProxyHandler';
+import { createCollectionProxy } from './handlers/CollectionProxyHandler';
+import type { IObserver } from '../types';
+import { OBSERVER_KEY, RAW_VALUE } from '../Constants';
+
+// 保存rawObj -> Proxy
+const proxyMap = new WeakMap();
+
+export const hookObserverMap = new WeakMap();
+
+export function getObserver(rawObj: any): Observer {
+  return rawObj[OBSERVER_KEY];
+}
+
+const setObserverKey =
+  typeof OBSERVER_KEY === 'string'
+    ? (rawObj, observer) => {
+        Object.defineProperty(rawObj, OBSERVER_KEY, {
+          configurable: false,
+          enumerable: false,
+          value: observer,
+        });
+      }
+    : (rawObj, observer) => {
+        rawObj[OBSERVER_KEY] = observer;
+      };
+
+export function createProxy(rawObj: any, listener: { current: (...args) => any }, isHookObserver = true): any {
+  // 不是对象（是原始数据类型）不用代理
+  if (!(rawObj && isObject(rawObj))) {
+    return rawObj;
+  }
+
+  // 已代理过
+  const existProxy = proxyMap.get(rawObj);
+  if (existProxy) {
+    return existProxy;
+  }
+
+  // Observer不需要代理
+  if (rawObj instanceof Observer) {
+    return rawObj;
+  }
+
+  // 创建Observer
+  let observer: IObserver = getObserver(rawObj);
+  if (!observer) {
+    observer = isHookObserver ? new Observer() : new HooklessObserver();
+    setObserverKey(rawObj, observer);
+  }
+
+  hookObserverMap.set(rawObj, isHookObserver);
+
+  // 创建Proxy
+  let proxyObj;
+  if (!isHookObserver) {
+    proxyObj = createObjectProxy(
+      rawObj,
+      {
+        current: change => {
+          listener.current(change);
+        },
+      },
+      true
+    );
+  } else if (isArray(rawObj)) {
+    // 数组
+    proxyObj = createArrayProxy(rawObj as [], {
+      current: change => {
+        listener.current(change);
+      },
+    });
+  } else if (isCollection(rawObj)) {
+    // 集合
+    proxyObj = createCollectionProxy(
+      rawObj,
+      {
+        current: change => {
+          listener.current(change);
+        },
+      },
+      true
+    );
+  } else {
+    // 原生对象 或 函数
+    proxyObj = createObjectProxy(
+      rawObj,
+      {
+        current: change => {
+          listener.current(change);
+        },
+      },
+      false
+    );
+  }
+
+  proxyMap.set(rawObj, proxyObj);
+  proxyMap.set(proxyObj, proxyObj);
+
+  return proxyObj;
+}
+
+export function toRaw<T>(observed: T): T {
+  return observed && observed[RAW_VALUE];
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/ArrayProxyHandler.ts b/packages/inula-reactive/src/inulax/proxy/handlers/ArrayProxyHandler.ts
new file mode 100644
index 00000000..3745443c
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/ArrayProxyHandler.ts
@@ -0,0 +1,162 @@
+/*
+ * 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.
+ */
+
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { isSame, isValidIntegerKey } from '../../CommonUtils';
+import { resolveMutation } from '../../CommonUtils';
+import { isPanelActive } from '../../devtools';
+import { OBSERVER_KEY, RAW_VALUE } from '../../Constants';
+
+function set(rawObj: any[], key: string, value: any, receiver: any) {
+  const oldValue = rawObj[key];
+  const oldLength = rawObj.length;
+  const newValue = value;
+
+  const oldArray = isPanelActive() ? JSON.parse(JSON.stringify(rawObj)) : null;
+
+  const ret = Reflect.set(rawObj, key, newValue, receiver);
+
+  const newLength = rawObj.length;
+  const observer = getObserver(rawObj);
+
+  const mutation = isPanelActive() ? resolveMutation(oldArray, rawObj) : resolveMutation(null, rawObj);
+
+  if (!isSame(newValue, oldValue)) {
+    // 值不一样，触发监听器
+    if (observer.watchers?.[key]) {
+      observer.watchers[key].forEach(cb => {
+        cb(key, oldValue, newValue, mutation);
+      });
+    }
+
+    // 触发属性变化
+    observer.setProp(key, mutation);
+  }
+
+  if (oldLength !== newLength) {
+    // 触发数组的大小变化
+    observer.setProp('length', mutation);
+  }
+
+  return ret;
+}
+
+export function createArrayProxy(rawObj: any[], listener: { current: (...args) => any }): any[] {
+  let listeners = [] as ((...args) => void)[];
+
+  function objectGet(rawObj: Record<string, any>, key: string | symbol, receiver: any, singleLevel = false): any {
+    // The observer object of symbol ('_inulaObserver') cannot be accessed from Proxy to prevent errors caused by clonedeep.
+    if (key === OBSERVER_KEY) {
+      return undefined;
+    }
+
+    const observer = getObserver(rawObj);
+
+    if (key === 'watch') {
+      return (prop, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+
+    observer.useProp(key);
+
+    const value = Reflect.get(rawObj, key, receiver);
+
+    // 对于prototype不做代理
+    if (key !== 'prototype') {
+      // 对于value也需要进一步代理
+      const valProxy = singleLevel
+        ? value
+        : createProxy(
+            value,
+            {
+              current: change => {
+                if (!change.parents) change.parents = [];
+                change.parents.push(rawObj);
+                const mutation = resolveMutation(
+                  { ...rawObj, [key]: change.mutation.from },
+                  { ...rawObj, [key]: change.mutation.to }
+                );
+                listener.current(mutation);
+                listeners.forEach(lst => lst(mutation));
+              },
+            },
+            hookObserverMap.get(rawObj)
+          );
+
+      return valProxy;
+    }
+
+    return value;
+  }
+
+  function get(rawObj: any[], key: string, receiver: any) {
+    if (key === 'watch') {
+      const observer = getObserver(rawObj);
+
+      return (prop: any, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (isValidIntegerKey(key) || key === 'length') {
+      return objectGet(rawObj, key, receiver);
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    return Reflect.get(rawObj, key, receiver);
+  }
+
+  const handle = {
+    get,
+    set,
+  };
+
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+
+  return new Proxy(rawObj, handle);
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/CollectionProxyHandler.ts b/packages/inula-reactive/src/inulax/proxy/handlers/CollectionProxyHandler.ts
new file mode 100644
index 00000000..c0f35926
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/CollectionProxyHandler.ts
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+import { isWeakMap, isWeakSet, isSet } from '../../CommonUtils';
+import { createWeakSetProxy } from './WeakSetProxy';
+import { createSetProxy } from './SetProxy';
+import { createWeakMapProxy } from './WeakMapProxy';
+import { createMapProxy } from './MapProxy';
+
+export function createCollectionProxy(
+  rawObj: Object,
+  listener: { current: (...args) => any },
+  hookObserver = true
+): Object {
+  if (isWeakSet(rawObj)) {
+    return createWeakSetProxy(rawObj, listener, hookObserver);
+  }
+  if (isSet(rawObj)) {
+    return createSetProxy(rawObj, listener, hookObserver);
+  }
+  if (isWeakMap(rawObj)) {
+    return createWeakMapProxy(rawObj, listener, hookObserver);
+  }
+  return createMapProxy(rawObj, listener, hookObserver);
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/MapProxy.ts b/packages/inula-reactive/src/inulax/proxy/handlers/MapProxy.ts
new file mode 100644
index 00000000..57a4ccd1
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/MapProxy.ts
@@ -0,0 +1,429 @@
+/*
+ * 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.
+ */
+
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { isSame } from '../../CommonUtils';
+import { resolveMutation } from '../../CommonUtils';
+import { isPanelActive } from '../../devtools';
+import { RAW_VALUE } from '../../Constants';
+
+const COLLECTION_CHANGE = '_collectionChange';
+
+export function createMapProxy(
+  rawObj: Record<string, any>,
+  listener: { current: (...args) => any },
+  hookObserver = true
+): Record<string, any> {
+  let listeners: ((mutation) => Record<string, any>)[] = [];
+  let oldData: [any, any][] = [];
+  const proxies = new Map();
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function getFun(rawObj: { get: (key: any) => any; has: (key: any) => boolean }, key: any): any {
+    const keyProxy = rawObj.has(key) ? key : proxies.get(key);
+    if (!keyProxy) return;
+    const observer = getObserver(rawObj);
+    observer.useProp(key);
+    const value = rawObj.get(keyProxy);
+
+    // 对于value也需要进一步代理
+    const valProxy = createProxy(
+      value,
+      {
+        current: change => {
+          if (!change.parents) change.parents = [];
+          change.parents.push(rawObj);
+          const mutation = resolveMutation(
+            { ...rawObj, [key]: change.mutation.from },
+            { ...rawObj, [key]: change.mutation.to }
+          );
+          listener.current({ ...change, mutation });
+          listeners.forEach(lst => lst({ ...change, mutation }));
+        },
+      },
+      hookObserverMap.get(rawObj)
+    );
+
+    return valProxy;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Map的set方法
+  function set(
+    rawObj: {
+      get: (key: any) => any;
+      set: (key: any, value: any) => any;
+      has: (key: any) => boolean;
+      entries: () => [any, any][];
+    },
+    key: any,
+    value: any
+  ): any {
+    if (rawObj.has(key) || rawObj.has(proxies.get(key))) {
+      // VALUE CHANGE (whole value for selected key is changed)
+      const oldValue = rawObj.get(proxies.get(key));
+      if (isSame(value, oldValue)) return;
+      rawObj.set(proxies.get(key), value);
+      const mutation = isPanelActive() ? resolveMutation(oldValue, rawObj) : resolveMutation(null, rawObj);
+      const observer = getObserver(rawObj);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+
+      if (observer.watchers[key]) {
+        observer.watchers[key].forEach(cb => {
+          cb(key, oldValue, value, mutation);
+        });
+      }
+
+      observer.setProp(key, mutation);
+      oldData = [...Array.from(rawObj.entries())];
+    } else {
+      // NEW VALUE
+      const keyProxy = createProxy(
+        key,
+        {
+          current: change => {
+            // KEY CHANGE
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, ['_keyChange']: change.mutation.from },
+              { ...rawObj, ['_keyChange']: change.mutation.to }
+            );
+            listener.current({ ...change, mutation });
+            listeners.forEach(lst => lst({ ...change, mutation }));
+          },
+        },
+        hookObserverMap.get(rawObj)
+      );
+      proxies.set(key, keyProxy);
+
+      rawObj.set(keyProxy, value);
+      const observer = getObserver(rawObj);
+      const mutation = resolveMutation(
+        {
+          _type: 'Map',
+          entries: oldData,
+        },
+        {
+          _type: 'Map',
+          entries: Array.from(rawObj.entries()),
+        }
+      );
+      observer.setProp(COLLECTION_CHANGE, mutation);
+
+      if (observer.watchers?.[key]) {
+        observer.watchers[key].forEach(cb => {
+          cb(key, null, value, mutation);
+        });
+      }
+      observer.setProp(key, mutation);
+      oldData = [...Array.from(rawObj.entries())];
+    }
+
+    return rawObj;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function has(rawObj: { has: (any) => boolean }, key: any): boolean {
+    const observer = getObserver(rawObj);
+    observer.useProp(key);
+    if (rawObj.has(key)) {
+      return true;
+    }
+    return proxies.has(key);
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function clear(rawObj: { size: number; clear: () => void; entries: () => [any, any][] }) {
+    const oldSize = rawObj.size;
+    rawObj.clear();
+
+    if (oldSize > 0) {
+      const observer = getObserver(rawObj);
+      observer.allChange();
+      oldData = [...Array.from(rawObj.entries())];
+    }
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function deleteFun(
+    rawObj: { has: (key: any) => boolean; delete: (key: any) => void; entries: () => [any, any][] },
+    key: any
+  ) {
+    if (rawObj.has(key) || proxies.has(key)) {
+      rawObj.delete(key || proxies.get(key));
+
+      const observer = getObserver(rawObj);
+      const mutation = resolveMutation(
+        {
+          _type: 'Map',
+          entries: oldData,
+        },
+        {
+          _type: 'Map',
+          entries: Array.from(rawObj.entries()),
+        }
+      );
+      observer.setProp(key, mutation);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+
+      oldData = [...Array.from(rawObj.entries())];
+      return true;
+    }
+
+    return false;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function forEach(
+    rawObj: { forEach: (callback: (value: any, key: any) => void) => void },
+    callback: (valProxy: any, keyProxy: any, rawObj: any) => void
+  ) {
+    const observer = getObserver(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+    rawObj.forEach((value, key) => {
+      const keyProxy = createProxy(
+        value,
+        {
+          current: change => {
+            //KEY ATTRIBUTES CHANGED
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, ['_keyChange']: change.mutation.from },
+              { ...rawObj, ['_keyChange']: change.mutation.to }
+            );
+            listener.current({ ...change, mutation });
+            listeners.forEach(lst => lst({ ...change, mutation }));
+          },
+        },
+        hookObserverMap.get(rawObj)
+      );
+      const valProxy = createProxy(
+        key,
+        {
+          current: change => {
+            // VALUE ATTRIBUTE CHANGED
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, key: change.mutation.from },
+              { ...rawObj, key: change.mutation.to }
+            );
+            listener.current({ ...change, mutation });
+            listeners.forEach(lst => lst({ ...change, mutation }));
+          },
+        },
+        hookObserverMap.get(rawObj)
+      );
+      // 最后一个参数要返回代理对象
+      return callback(keyProxy, valProxy, rawObj);
+    });
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function wrapIterator(rawObj: Record<string, any>, rawIt: { next: () => { value: any; done: boolean } }, type) {
+    const observer = getObserver(rawObj);
+    const hookObserver = hookObserverMap.get(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+
+    return {
+      next() {
+        const { value, done } = rawIt.next();
+        if (done) {
+          return {
+            value: createProxy(
+              value,
+              {
+                current: change => {
+                  if (!change.parents) change.parents = [];
+                  change.parents.push(rawObj);
+                  const mutation = resolveMutation(
+                    { ...rawObj, [value]: change.mutation.from },
+                    { ...rawObj, [value]: change.mutation.to }
+                  );
+                  listener.current({ ...change, mutation });
+                  listeners.forEach(lst => lst({ ...change, mutation }));
+                },
+              },
+              hookObserver
+            ),
+            done,
+          };
+        }
+
+        observer.useProp(COLLECTION_CHANGE);
+        let newVal;
+        if (type === 'entries') {
+          //ENTRY CHANGED
+          newVal = [
+            createProxy(
+              value[0],
+              {
+                current: change => {
+                  if (!change.parents) change.parents = [];
+                  change.parents.push(rawObj);
+                  const mutation = resolveMutation(
+                    { ...rawObj, ['itemChange']: { key: change.mutation.from, value: value[1] } },
+                    { ...rawObj, ['itemChange']: { key: change.mutation.to, value: value[1] } }
+                  );
+                  listener.current({ ...change, mutation });
+                  listeners.forEach(lst => lst({ ...change, mutation }));
+                },
+              },
+              hookObserver
+            ),
+            createProxy(
+              value[1],
+              {
+                current: change => {
+                  if (!change.parents) change.parents = [];
+                  change.parents.push(rawObj);
+                  const mutation = resolveMutation(
+                    { ...rawObj, item: { key: value[0], value: change.mutation.from } },
+                    { ...rawObj, item: { key: value[0], value: change.mutation.to } }
+                  );
+                  listener.current({ ...change, mutation });
+                  listeners.forEach(lst => lst({ ...change, mutation }));
+                },
+              },
+              hookObserver
+            ),
+          ];
+        } else {
+          // SINGLE VALUE CHANGED
+          newVal = createProxy(
+            value,
+            {
+              current: change => {
+                if (!change.parents) change.parents = [];
+                change.parents.push(rawObj);
+                const mutation = resolveMutation(
+                  { ...rawObj, [type === 'keys' ? 'key' : 'value']: change.mutation.from },
+                  { ...rawObj, [type === 'keys' ? 'key' : 'value']: change.mutation.to }
+                );
+                listener.current({ ...change, mutation });
+                listeners.forEach(lst => lst({ ...change, mutation }));
+              },
+            },
+            hookObserver
+          );
+        }
+
+        return { value: newVal, done };
+      },
+      // 判断Symbol类型，兼容IE
+      [typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']() {
+        return this;
+      },
+    };
+  }
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function size(rawObj: { size: number }) {
+    const observer = getObserver(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+    return rawObj.size;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function keys(rawObj: { keys: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.keys(), 'keys');
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function values(rawObj: { values: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.values(), 'values');
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function entries(rawObj: { entries: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.entries(), 'entries');
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function forOf(rawObj: {
+    entries: () => { next: () => { value: any; done: boolean } };
+    values: () => { next: () => { value: any; done: boolean } };
+  }) {
+    return wrapIterator(rawObj, rawObj.entries(), 'entries');
+  }
+
+  const handler = {
+    get,
+    set,
+    delete: deleteFun,
+    clear,
+    has,
+    entries,
+    forEach,
+    keys,
+    values,
+    // 判断Symbol类型，兼容IE
+    [typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
+  };
+
+  function get(rawObj: { size: number }, key: any, receiver: any): any {
+    if (key === 'size') {
+      return size(rawObj);
+    }
+
+    if (key === 'get') {
+      return getFun.bind(null, rawObj);
+    }
+
+    if (Object.prototype.hasOwnProperty.call(handler, key)) {
+      const value = Reflect.get(handler, key, receiver);
+      return value.bind(null, rawObj);
+    }
+
+    if (key === 'watch') {
+      const observer = getObserver(rawObj);
+
+      return (prop: any, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    return Reflect.get(rawObj, key, receiver);
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  const boundHandler = {};
+  Object.entries(handler).forEach(([id, val]) => {
+    boundHandler[id] = (...args: any[]) => {
+      return (val as any)(...args, hookObserver);
+    };
+  });
+
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+  return new Proxy(rawObj, { ...boundHandler });
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/ObjectProxyHandler.ts b/packages/inula-reactive/src/inulax/proxy/handlers/ObjectProxyHandler.ts
new file mode 100644
index 00000000..669335ce
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/ObjectProxyHandler.ts
@@ -0,0 +1,130 @@
+/*
+ * 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.
+ */
+
+import { isSame, resolveMutation } from '../../CommonUtils';
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { OBSERVER_KEY, RAW_VALUE } from '../../Constants';
+import { isPanelActive } from '../../devtools';
+
+function set(rawObj: Record<string, any>, key: string, value: any, receiver: any): boolean {
+  const oldObject = isPanelActive() ? JSON.parse(JSON.stringify(rawObj)) : null;
+  const observer = getObserver(rawObj);
+
+  const oldValue = rawObj[key];
+  const newValue = value;
+
+  const ret = Reflect.set(rawObj, key, newValue, receiver);
+  const mutation = isPanelActive() ? resolveMutation(oldObject, rawObj) : resolveMutation(null, rawObj);
+
+  if (!isSame(newValue, oldValue)) {
+    if (observer.watchers?.[key]) {
+      observer.watchers[key].forEach(cb => {
+        cb(key, oldValue, newValue, mutation);
+      });
+    }
+    observer.setProp(key, mutation);
+  }
+  return ret;
+}
+
+export function createObjectProxy<T extends Record<string, any>>(
+  rawObj: T,
+  listener: { current: (...args) => any },
+  singleLevel = false
+): ProxyHandler<T> {
+  let listeners = [] as ((...args) => void)[];
+
+  function get(rawObj: Record<string, any>, key: string | symbol, receiver: any): any {
+    // The observer object of symbol ('_inulaObserver') cannot be accessed from Proxy to prevent errors caused by clonedeep.
+    if (key === OBSERVER_KEY) {
+      return undefined;
+    }
+
+    const observer = getObserver(rawObj);
+
+    if (key === 'watch') {
+      return (prop, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    observer.useProp(key);
+
+    const value = Reflect.get(rawObj, key, receiver);
+
+    // 对于prototype不做代理
+    if (key !== 'prototype') {
+      // 对于value也需要进一步代理
+      const valProxy = singleLevel
+        ? value
+        : createProxy(
+            value,
+            {
+              current: change => {
+                if (!change.parents) change.parents = [];
+                change.parents.push(rawObj);
+                const mutation = resolveMutation(
+                  { ...rawObj, [key]: change.mutation.from },
+                  { ...rawObj, [key]: change.mutation.to }
+                );
+                listener.current({ ...change, mutation });
+                listeners.forEach(lst => lst({ ...change, mutation }));
+              },
+            },
+            hookObserverMap.get(rawObj)
+          );
+
+      return valProxy;
+    }
+
+    return value;
+  }
+
+  const proxy = new Proxy(rawObj, {
+    get,
+    set,
+  });
+
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+
+  return proxy;
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/SetProxy.ts b/packages/inula-reactive/src/inulax/proxy/handlers/SetProxy.ts
new file mode 100644
index 00000000..102d08a8
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/SetProxy.ts
@@ -0,0 +1,310 @@
+/*
+ * 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.
+ */
+
+import { resolveMutation } from '../../CommonUtils';
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { RAW_VALUE } from '../../Constants';
+
+const COLLECTION_CHANGE = '_collectionChange';
+
+export function createSetProxy<T extends Record<string, any>>(
+  rawObj: T,
+  listener: { current: (...args) => any },
+  hookObserver = true
+): ProxyHandler<T> {
+  let listeners: ((mutation) => Record<string, any>)[] = [];
+  const proxies = new WeakMap();
+
+  // Set的add方法
+  function add(
+    rawObj: { add: (any) => void; has: (any) => boolean; values: () => any[] },
+    value: any
+  ): Record<string, any> {
+    if (!rawObj.has(proxies.get(value))) {
+      const proxy = createProxy(
+        value,
+        {
+          current: change => {
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, valueChange: change.mutation.from },
+              { ...rawObj, valueChange: change.mutation.to }
+            );
+            listener.current({
+              ...change,
+              mutation,
+            });
+            listeners.forEach(lst =>
+              lst({
+                ...change,
+                mutation,
+              })
+            );
+          },
+        },
+        hookObserverMap.get(rawObj)
+      );
+      const oldValues = Array.from(rawObj.values());
+
+      proxies.set(value, proxy);
+
+      rawObj.add(proxies.get(value));
+
+      const observer = getObserver(rawObj);
+      const mutation = resolveMutation(
+        {
+          _type: 'Set',
+          values: oldValues,
+        },
+        {
+          _type: 'Set',
+          values: Array.from(rawObj.values()),
+        }
+      );
+
+      observer.setProp(value, mutation);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+    }
+
+    return rawObj;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function has(rawObj: { has: (string) => boolean }, value: any): boolean {
+    const observer = getObserver(rawObj);
+    observer.useProp(value);
+
+    return rawObj.has(proxies.get(value));
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function deleteFun(
+    rawObj: { has: (key: any) => boolean; delete: (value: any) => void; values: () => any[] },
+    value: any
+  ) {
+    const val = rawObj.has(proxies.get(value)) ? proxies.get(value) : value;
+    if (rawObj.has(val)) {
+      const oldValues = Array.from(rawObj.values());
+      rawObj.delete(val);
+
+      proxies.delete(value);
+
+      const observer = getObserver(rawObj);
+      const mutation = resolveMutation(
+        {
+          _type: 'Set',
+          values: oldValues,
+        },
+        {
+          _type: 'Set',
+          values: Array.from(rawObj.values()),
+        }
+      );
+
+      observer.setProp(value, mutation);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+
+      return true;
+    }
+
+    return false;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function clear(rawObj: { size: number; clear: () => void }) {
+    const oldSize = rawObj.size;
+    rawObj.clear();
+
+    if (oldSize > 0) {
+      const observer = getObserver(rawObj);
+      observer.allChange();
+    }
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function size(rawObj: { size: number }) {
+    const observer = getObserver(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+    return rawObj.size;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  const handler = {
+    get,
+    add,
+    delete: deleteFun,
+    has,
+    clear,
+    forEach,
+    forOf,
+    entries,
+    keys,
+    values,
+    [typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
+  };
+
+  function get(rawObj: { size: number }, key: any, receiver: any): any {
+    if (Object.prototype.hasOwnProperty.call(handler, key)) {
+      const value = Reflect.get(handler, key, receiver);
+      return value.bind(null, rawObj);
+    }
+
+    if (key === 'size') {
+      return size(rawObj);
+    }
+
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+    if (key === 'watch') {
+      const observer = getObserver(rawObj);
+
+      return (prop: any, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    return Reflect.get(rawObj, key, receiver);
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+  function wrapIterator(rawObj: Record<string, any>, rawIt: { next: () => { value: any; done: boolean } }) {
+    const observer = getObserver(rawObj);
+    const hookObserver = hookObserverMap.get(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+
+    return {
+      next() {
+        const currentListener = {
+          current: change => {
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, valueChange: change.mutation.from },
+              { ...rawObj, valueChange: change.mutation.to }
+            );
+            listener.current({
+              ...change,
+              mutation,
+            });
+            listeners.forEach(lst =>
+              lst({
+                ...change,
+                mutation,
+              })
+            );
+          },
+        };
+        const { value, done } = rawIt.next();
+        if (done) {
+          return { value: createProxy(value, currentListener, hookObserver), done };
+        }
+
+        observer.useProp(COLLECTION_CHANGE);
+
+        const newVal = createProxy(value, currentListener, hookObserver);
+
+        return { value: newVal, done };
+      },
+      // 判断Symbol类型，兼容IE
+      [typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']() {
+        return this;
+      },
+    };
+  }
+
+  function keys(rawObj: { keys: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.keys());
+  }
+
+  function values(rawObj: { values: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.values());
+  }
+
+  function entries(rawObj: { entries: () => { next: () => { value: any; done: boolean } } }) {
+    return wrapIterator(rawObj, rawObj.entries());
+  }
+
+  function forOf(rawObj: {
+    entries: () => { next: () => { value: any; done: boolean } };
+    values: () => { next: () => { value: any; done: boolean } };
+  }) {
+    const iterator = rawObj.values();
+    return wrapIterator(rawObj, iterator);
+  }
+
+  function forEach(
+    rawObj: { forEach: (callback: (value: any, key: any) => void) => void },
+    callback: (valProxy: any, keyProxy: any, rawObj: any) => void
+  ) {
+    const observer = getObserver(rawObj);
+    observer.useProp(COLLECTION_CHANGE);
+    rawObj.forEach((value, key) => {
+      const currentListener = {
+        current: change => {
+          if (!change.parents) change.parents = [];
+          change.parents.push(rawObj);
+          const mutation = resolveMutation(
+            { ...rawObj, valueChange: change.mutation.from },
+            { ...rawObj, valueChange: change.mutation.to }
+          );
+          listener.current({
+            ...change,
+            mutation,
+          });
+          listeners.forEach(lst =>
+            lst({
+              ...change,
+              mutation,
+            })
+          );
+        },
+      };
+      const valProxy = createProxy(value, currentListener, hookObserverMap.get(rawObj));
+      const keyProxy = createProxy(key, currentListener, hookObserverMap.get(rawObj));
+      // 最后一个参数要返回代理对象
+      return callback(valProxy, keyProxy, rawObj);
+    });
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  const boundHandler = {};
+  Object.entries(handler).forEach(([id, val]) => {
+    boundHandler[id] = (...args: any[]) => {
+      return (val as any)(...args, hookObserver);
+    };
+  });
+  return new Proxy(rawObj, { ...boundHandler });
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/WeakMapProxy.ts b/packages/inula-reactive/src/inulax/proxy/handlers/WeakMapProxy.ts
new file mode 100644
index 00000000..4f44d4c6
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/WeakMapProxy.ts
@@ -0,0 +1,209 @@
+/*
+ * 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.
+ */
+
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { isSame } from '../../CommonUtils';
+import { resolveMutation } from '../../CommonUtils';
+import { isPanelActive } from '../../devtools';
+import { RAW_VALUE } from '../../Constants';
+
+const COLLECTION_CHANGE = '_collectionChange';
+
+export function createWeakMapProxy(
+  rawObj: Record<string, any>,
+  listener: { current: (...args) => any },
+  hookObserver = true
+): Record<string, any> {
+  let listeners: ((mutation) => Record<string, any>)[] = [];
+
+  const handler = {
+    get,
+    set,
+    add,
+    delete: deleteFun,
+    clear,
+    has,
+  };
+
+  function getFun(rawObj: { get: (key: any) => any }, key: any) {
+    const observer = getObserver(rawObj);
+    observer.useProp(key);
+
+    const value = rawObj.get(key);
+    // 对于value也需要进一步代理
+    const valProxy = createProxy(
+      value,
+      {
+        current: change => {
+          if (!change.parents) change.parents = [];
+          change.parents.push(rawObj);
+          const mutation = resolveMutation(
+            { ...rawObj, [key]: change.mutation.from },
+            { ...rawObj, [key]: change.mutation.to }
+          );
+          listener.current({ ...change, mutation });
+          listeners.forEach(lst => lst({ ...change, mutation }));
+        },
+      },
+      hookObserverMap.get(rawObj)
+    );
+
+    return valProxy;
+  }
+
+  function get(rawObj: { size: number }, key: any, receiver: any): any {
+    if (key === 'get') {
+      return getFun.bind(null, rawObj);
+    }
+
+    if (Object.prototype.hasOwnProperty.call(handler, key)) {
+      const value = Reflect.get(handler, key, receiver);
+      return value.bind(null, rawObj);
+    }
+
+    if (key === 'watch') {
+      const observer = getObserver(rawObj);
+
+      return (prop: any, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    return Reflect.get(rawObj, key, receiver);
+  }
+
+  // Map的set方法
+  function set(
+    rawObj: { get: (key: any) => any; set: (key: any, value: any) => any; has: (key: any) => boolean },
+    key: any,
+    value: any
+  ) {
+    const oldValue = rawObj.get(key);
+    const newValue = value;
+    rawObj.set(key, newValue);
+    const valChange = !isSame(newValue, oldValue);
+    const observer = getObserver(rawObj);
+
+    const mutation = isPanelActive() ? resolveMutation(oldValue, rawObj) : resolveMutation(null, rawObj);
+
+    if (valChange || !rawObj.has(key)) {
+      observer.setProp(COLLECTION_CHANGE, mutation);
+    }
+
+    if (valChange) {
+      if (observer.watchers?.[key]) {
+        observer.watchers[key].forEach(cb => {
+          cb(key, oldValue, newValue, mutation);
+        });
+      }
+
+      observer.setProp(key, mutation);
+    }
+
+    return rawObj;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Set的add方法
+  function add(
+    rawObj: { add: (any) => void; set: (string, any) => any; has: (any) => boolean },
+    value: any
+  ): Record<string, any> {
+    const oldCollection = isPanelActive() ? JSON.parse(JSON.stringify(rawObj)) : null;
+    if (!rawObj.has(value)) {
+      rawObj.add(value);
+
+      const observer = getObserver(rawObj);
+      const mutation = isPanelActive()
+        ? resolveMutation(oldCollection, rawObj)
+        : { mutation: true, from: null, to: rawObj };
+      observer.setProp(value, mutation);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+    }
+
+    return rawObj;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function has(rawObj: { has: (string) => boolean }, key: any): boolean {
+    const observer = getObserver(rawObj);
+    observer.useProp(key);
+
+    return rawObj.has(key);
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function clear(rawObj: { size: number; clear: () => void }) {
+    const oldSize = rawObj.size;
+    rawObj.clear();
+
+    if (oldSize > 0) {
+      const observer = getObserver(rawObj);
+      observer.allChange();
+    }
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function deleteFun(rawObj: { has: (key: any) => boolean; delete: (key: any) => void }, key: any) {
+    const oldCollection = isPanelActive() ? JSON.parse(JSON.stringify(rawObj)) : null;
+    if (rawObj.has(key)) {
+      rawObj.delete(key);
+
+      const observer = getObserver(rawObj);
+      const mutation = isPanelActive()
+        ? resolveMutation(oldCollection, rawObj)
+        : { mutation: true, from: null, to: rawObj };
+      observer.setProp(key, mutation);
+      observer.setProp(COLLECTION_CHANGE, mutation);
+
+      return true;
+    }
+
+    return false;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  const boundHandler = {};
+  Object.entries(handler).forEach(([id, val]) => {
+    boundHandler[id] = (...args: any[]) => {
+      return (val as any)(...args, hookObserver);
+    };
+  });
+  return new Proxy(rawObj, { ...boundHandler });
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/handlers/WeakSetProxy.ts b/packages/inula-reactive/src/inulax/proxy/handlers/WeakSetProxy.ts
new file mode 100644
index 00000000..5f6df81b
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/handlers/WeakSetProxy.ts
@@ -0,0 +1,143 @@
+/*
+ * 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.
+ */
+
+import { resolveMutation } from '../../CommonUtils';
+import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
+import { RAW_VALUE } from '../../Constants';
+
+export function createWeakSetProxy<T extends Record<string, any>>(
+  rawObj: T,
+  listener: { current: (...args) => any },
+  hookObserver = true
+): ProxyHandler<T> {
+  let listeners: ((mutation) => Record<string, any>)[] = [];
+  const proxies = new WeakMap();
+
+  const handler = {
+    get,
+    add,
+    delete: deleteFun,
+    has,
+  };
+
+  function get(rawObj: { size: number }, key: any, receiver: any): any {
+    if (Object.prototype.hasOwnProperty.call(handler, key)) {
+      const value = Reflect.get(handler, key, receiver);
+      return value.bind(null, rawObj);
+    }
+    if (key === 'addListener') {
+      return listener => {
+        listeners.push(listener);
+      };
+    }
+
+    if (key === 'removeListener') {
+      return listener => {
+        listeners = listeners.filter(item => item != listener);
+      };
+    }
+    if (key === 'watch') {
+      const observer = getObserver(rawObj);
+
+      return (prop: any, handler: (key: string, oldValue: any, newValue: any) => void) => {
+        if (!observer.watchers[prop]) {
+          observer.watchers[prop] = [] as ((key: string, oldValue: any, newValue: any) => void)[];
+        }
+        observer.watchers[prop].push(handler);
+        return () => {
+          observer.watchers[prop] = observer.watchers[prop].filter(cb => cb !== handler);
+        };
+      };
+    }
+
+    if (key === RAW_VALUE) {
+      return rawObj;
+    }
+
+    return Reflect.get(rawObj, key, receiver);
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Set的add方法
+  function add(rawObj: { add: (any) => void; has: (any) => boolean }, value: any): Record<string, any> {
+    if (!rawObj.has(proxies.get(value))) {
+      const proxy = createProxy(
+        value,
+        {
+          current: change => {
+            if (!change.parents) change.parents = [];
+            change.parents.push(rawObj);
+            const mutation = resolveMutation(
+              { ...rawObj, [value]: change.mutation.from },
+              { ...rawObj, [value]: change.mutation.to }
+            );
+            listener.current({ ...change, mutation });
+            listeners.forEach(lst => lst({ ...change, mutation }));
+          },
+        },
+        hookObserverMap.get(rawObj)
+      );
+
+      proxies.set(value, proxy);
+
+      rawObj.add(proxies.get(value));
+
+      const observer = getObserver(rawObj);
+      const mutation = { mutation: true, from: rawObj, to: value };
+
+      observer.setProp(value, mutation);
+    }
+
+    return rawObj;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function has(rawObj: { has: (string) => boolean }, value: any): boolean {
+    const observer = getObserver(rawObj);
+    observer.useProp(value);
+
+    return rawObj.has(proxies.get(value));
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  function deleteFun(rawObj: { has: (key: any) => boolean; delete: (value: any) => void }, value: any) {
+    if (rawObj.has(proxies.get(value))) {
+      rawObj.delete(proxies.get(value));
+
+      proxies.delete(value);
+
+      const observer = getObserver(rawObj);
+      const mutation = { mutation: true, from: value, to: rawObj };
+
+      observer.setProp(value, mutation);
+
+      return true;
+    }
+
+    return false;
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  getObserver(rawObj).addListener(change => {
+    if (!change.parents) change.parents = [];
+    change.parents.push(rawObj);
+    listener.current(change);
+    listeners.forEach(lst => lst(change));
+  });
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  const boundHandler = {};
+  Object.entries(handler).forEach(([id, val]) => {
+    boundHandler[id] = (...args: any[]) => {
+      return (val as any)(...args, hookObserver);
+    };
+  });
+  return new Proxy(rawObj, { ...boundHandler });
+}
diff --git a/packages/inula-reactive/src/inulax/proxy/readonlyProxy.ts b/packages/inula-reactive/src/inulax/proxy/readonlyProxy.ts
new file mode 100644
index 00000000..1b4a2bcf
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/readonlyProxy.ts
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+import { isObject } from '../CommonUtils';
+
+export function readonlyProxy<T extends Record<string, any>>(rawObj: T): ProxyHandler<T> {
+  return new Proxy(rawObj, {
+    get(rawObj, property, receiver) {
+      const result = Reflect.get(rawObj, property, receiver);
+
+      try {
+        if (isObject(result)) {
+          return readonlyProxy(result);
+        }
+      } catch (err) {
+        // 不处理
+      }
+      return result;
+    },
+
+    set() {
+      throw Error('Trying to change readonly variable');
+    },
+
+    deleteProperty() {
+      throw Error('Trying to change readonly variable');
+    },
+  });
+}
+
+export default readonlyProxy;
diff --git a/packages/inula-reactive/src/inulax/proxy/watch.ts b/packages/inula-reactive/src/inulax/proxy/watch.ts
new file mode 100644
index 00000000..bff5ccbc
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/proxy/watch.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 function watch(stateVariable: any, listener: (state: any) => void) {
+  listener = listener.bind(null, stateVariable);
+  stateVariable.addListener(listener);
+
+  return () => {
+    stateVariable.removeListener(listener);
+  };
+}
diff --git a/packages/inula-reactive/src/inulax/store/StoreHandler.ts b/packages/inula-reactive/src/inulax/store/StoreHandler.ts
new file mode 100644
index 00000000..ef0d37a7
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/store/StoreHandler.ts
@@ -0,0 +1,336 @@
+/*
+ * 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.
+ */
+
+import { useEffect, useRef } from '../../renderer/hooks/HookExternal';
+import { getProcessingVNode } from '../../renderer/GlobalVar';
+import { createProxy } from '../proxy/ProxyHandler';
+import readonlyProxy from '../proxy/readonlyProxy';
+import { Observer } from '../proxy/Observer';
+import { FunctionComponent, ClassComponent } from '../../renderer/vnode/VNodeTags';
+import { isPromise } from '../CommonUtils';
+import type {
+  ActionFunction,
+  ComputedValues,
+  PlannedAction,
+  QueuedStoreActions,
+  StoreActions,
+  StoreConfig,
+  StoreObj,
+  UserActions,
+  UserComputedValues,
+} from '../types';
+import { VNode } from '../../renderer/vnode/VNode';
+import { devtools } from '../devtools';
+import {
+  ACTION,
+  ACTION_QUEUED,
+  INITIALIZED,
+  QUEUE_FINISHED,
+  QUEUE_PENDING,
+  STATE_CHANGE,
+  SUBSCRIBED,
+  UNSUBSCRIBED,
+} from '../devtools/constants';
+
+const idGenerator = {
+  id: 0,
+  get: function (prefix) {
+    return prefix.toString() + this.id++;
+  },
+};
+
+const storeMap = new Map<string, StoreObj<any, any, any>>();
+
+// 通过该方法执行store.$queue中的action
+function tryNextAction(storeObj, proxyObj, config, plannedActions) {
+  if (!plannedActions.length) {
+    if (proxyObj.$pending) {
+      const timestamp = Date.now();
+      const duration = timestamp - proxyObj.$pending;
+      proxyObj.$pending = false;
+      devtools.emit(QUEUE_FINISHED, {
+        store: storeObj,
+        endedAt: timestamp,
+        duration,
+      });
+    }
+    return;
+  }
+
+  const nextAction = plannedActions.shift()!;
+  const result = config.actions
+    ? config.actions[nextAction.action].bind(storeObj, proxyObj)(...nextAction.payload)
+    : undefined;
+
+  if (isPromise(result)) {
+    result.then(value => {
+      nextAction.resolve(value);
+      tryNextAction(storeObj, proxyObj, config, plannedActions);
+    });
+  } else {
+    nextAction.resolve(result);
+    tryNextAction(storeObj, proxyObj, config, plannedActions);
+  }
+}
+
+// 删除Observers中保存的这个VNode的相关数据
+export function clearVNodeObservers(vNode: VNode) {
+  if (!vNode.observers) {
+    return;
+  }
+
+  vNode.observers.forEach(observer => {
+    observer.clearByVNode(vNode);
+  });
+
+  vNode.observers.clear();
+}
+
+// 注册VNode销毁时的清理动作
+function registerDestroyFunction() {
+  const processingVNode = getProcessingVNode();
+
+  // 获取不到当前运行的VNode，说明不在组件中运行，属于非法场景
+  if (!processingVNode) {
+    return;
+  }
+
+  if (!processingVNode.observers) {
+    processingVNode.observers = new Set<Observer>();
+  }
+
+  // 函数组件
+  if (processingVNode.tag === FunctionComponent) {
+    const vNodeRef = useRef(processingVNode);
+
+    useEffect(() => {
+      return () => {
+        clearVNodeObservers(vNodeRef.current!);
+        vNodeRef.current!.observers = null;
+      };
+    }, []);
+  } else if (processingVNode.tag === ClassComponent) {
+    // 类组件
+    if (!processingVNode.classComponentWillUnmount) {
+      processingVNode.classComponentWillUnmount = vNode => {
+        clearVNodeObservers(vNode);
+        vNode.observers = null;
+      };
+    }
+  }
+}
+
+// createStore返回的是一个getStore的函数，这个函数必须要在组件（函数/类组件）里面被执行，因为要注册VNode销毁时的清理动作
+function createGetStore<S extends Record<string, any>, A extends UserActions<S>, C extends UserComputedValues<S>>(
+  storeObj: StoreObj<S, A, C>
+): () => StoreObj<S, A, C> {
+  const getStore = () => {
+    if (!storeObj.$config.options?.isReduxAdapter) {
+      registerDestroyFunction();
+    }
+
+    return storeObj;
+  };
+
+  return getStore;
+}
+
+export function createStore<S extends Record<string, any>, A extends UserActions<S>, C extends UserComputedValues<S>>(
+  config: StoreConfig<S, A, C>
+): () => StoreObj<S, A, C> {
+  // 校验
+  if (Object.prototype.toString.call(config) !== '[object Object]') {
+    throw new Error('store obj must be pure object');
+  }
+
+  const id = config.id || idGenerator.get('UNNAMED_STORE');
+
+  const listener = {
+    current: listener => {},
+  };
+
+  const proxyObj = createProxy(config.state, listener, !config.options?.isReduxAdapter);
+
+  proxyObj.$pending = false;
+
+  const $a: Partial<StoreActions<S, A>> = {};
+  const $queue: Partial<StoreActions<S, A>> = {};
+  const $c: Partial<ComputedValues<S, C>> = {};
+  const storeObj = {
+    id,
+    $s: proxyObj,
+    $a: $a as StoreActions<S, A>,
+    $c: $c as ComputedValues<S, C>,
+    $queue: $queue as QueuedStoreActions<S, A>,
+    $config: config,
+    $listeners: [
+      change => {
+        devtools.emit(STATE_CHANGE, {
+          store: storeObj,
+          change,
+        });
+      },
+    ],
+    $subscribe: listener => {
+      devtools.emit(SUBSCRIBED, { store: storeObj, listener });
+      storeObj.$listeners.push(listener);
+    },
+    $unsubscribe: listener => {
+      devtools.emit(UNSUBSCRIBED, { store: storeObj });
+      storeObj.$listeners = storeObj.$listeners.filter(item => item != listener);
+    },
+  } as unknown as StoreObj<S, A, C>;
+
+  listener.current = (...args) => {
+    storeObj.$listeners.forEach(listener => listener(...args));
+  };
+
+  const plannedActions: PlannedAction<S, ActionFunction<S>>[] = [];
+
+  // 包装actions
+  if (config.actions) {
+    Object.keys(config.actions).forEach(action => {
+      // 让store.$queue[action]可以访问到action方法
+      // 要达到的效果：如果通过store.$queue[action1]调用的action1返回promise,会阻塞下一个store.$queue[action2]
+      ($queue as any)[action] = (...payload) => {
+        devtools.emit(ACTION_QUEUED, {
+          store: storeObj,
+          action: {
+            action,
+            payload,
+          },
+          fromQueue: true,
+        });
+        return new Promise(resolve => {
+          if (!proxyObj.$pending) {
+            proxyObj.$pending = Date.now();
+            devtools.emit(QUEUE_PENDING, {
+              store: storeObj,
+              startedAt: proxyObj.$pending,
+            });
+
+            const result = config.actions![action].bind(storeObj, proxyObj)(...payload);
+
+            if (isPromise(result)) {
+              result.then(value => {
+                resolve(value);
+                tryNextAction(storeObj, proxyObj, config, plannedActions);
+              });
+            } else {
+              resolve(result);
+              tryNextAction(storeObj, proxyObj, config, plannedActions);
+            }
+          } else {
+            // 加入队列
+            plannedActions.push({
+              action,
+              payload,
+              resolve,
+            });
+          }
+        });
+      };
+
+      // 让store.$a[action]可以访问到action方法
+      ($a as any)[action] = function Wrapped(...payload) {
+        devtools.emit(ACTION, {
+          store: storeObj,
+          action: {
+            action,
+            payload,
+          },
+          fromQueue: false,
+        });
+        return config.actions![action].bind(storeObj, proxyObj)(...payload);
+      };
+
+      // 让store[action]可以访问到action方法
+      Object.defineProperty(storeObj, action, {
+        writable: false,
+        value: (...payload) => {
+          devtools.emit(ACTION, {
+            store: storeObj,
+            action: {
+              action,
+              payload,
+            },
+            fromQueue: false,
+          });
+          return config.actions![action].bind(storeObj, proxyObj)(...payload);
+        },
+      });
+    });
+  }
+
+  if (config.computed) {
+    Object.keys(config.computed).forEach(computeKey => {
+      // 让store.$c[computeKey]可以访问到computed方法
+      ($c as any)[computeKey] = config.computed![computeKey].bind(storeObj, readonlyProxy(proxyObj));
+
+      // 让store[computeKey]可以访问到computed的值
+      Object.defineProperty(storeObj, computeKey, {
+        get: $c[computeKey] as () => any,
+      });
+    });
+  }
+
+  // 让store[key]可以访问到state的值
+  if (config.state) {
+    Object.keys(config.state).forEach(key => {
+      Object.defineProperty(storeObj, key, {
+        get: () => {
+          // 从Proxy对象获取值，会触发代理
+          return proxyObj[key];
+        },
+        set: value => {
+          proxyObj[key] = value;
+        },
+      });
+    });
+  }
+
+  storeMap.set(id, storeObj);
+
+  devtools.emit(INITIALIZED, {
+    store: storeObj,
+  });
+
+  return createGetStore(storeObj);
+}
+
+// 函数组件中使用的hook
+export function useStore<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>>(
+  id: string
+): StoreObj<S, A, C> {
+  const storeObj = storeMap.get(id);
+
+  if (storeObj && !storeObj.$config.options?.isReduxAdapter) {
+    registerDestroyFunction();
+  }
+
+  return storeObj as StoreObj<S, A, C>;
+}
+
+export function getStore(id: string) {
+  return storeMap.get(id);
+}
+
+export function getAllStores() {
+  return Object.fromEntries(storeMap);
+}
+
+export function clearStore(id: string): void {
+  storeMap.delete(id);
+}
diff --git a/packages/inula-reactive/src/inulax/types.ts b/packages/inula-reactive/src/inulax/types.ts
new file mode 100644
index 00000000..4826426b
--- /dev/null
+++ b/packages/inula-reactive/src/inulax/types.ts
@@ -0,0 +1,98 @@
+/*
+ * 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 interface IObserver {
+  useProp: (key: string | symbol) => void;
+
+  addListener: (listener: (mutation: any) => void) => void;
+
+  removeListener: (listener: (mutation: any) => void) => void;
+
+  setProp: (key: string | symbol, mutation: any) => void;
+
+  triggerChangeListeners: (mutation: any) => void;
+
+  triggerUpdate: (vNode: any) => void;
+
+  allChange: () => void;
+
+  clearByVNode: (vNode: any) => void;
+}
+
+export type StoreConfig<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
+  id?: string;
+  state?: S;
+  actions?: A;
+  computed?: C;
+  options?: {
+    isReduxAdapter?: boolean;
+  };
+};
+
+export type UserActions<S extends object> = {
+  [K: string]: ActionFunction<S>;
+};
+
+export type ActionFunction<S extends object> = (this: StoreObj<S, any, any>, state: S, ...args: any[]) => any;
+
+export type StoreActions<S extends object, A extends UserActions<S>> = {
+  [K in keyof A]: Action<A[K], S>;
+};
+
+type Action<T extends ActionFunction<any>, S extends object> = (
+  this: StoreObj<S, any, any>,
+  ...args: RemoveFirstFromTuple<Parameters<T>>
+) => ReturnType<T>;
+
+export type StoreObj<S extends object, A extends UserActions<S>, C extends UserComputedValues<S>> = {
+  $s: S;
+  $a: StoreActions<S, A>;
+  $c: UserComputedValues<S>;
+  $queue: QueuedStoreActions<S, A>;
+  $listeners;
+  $subscribe: (listener: (mutation) => void) => void;
+  $unsubscribe: (listener: (mutation) => void) => void;
+} & { [K in keyof S]: S[K] } & { [K in keyof A]: Action<A[K], S> } & { [K in keyof C]: ReturnType<C[K]> };
+
+export type PlannedAction<S extends object, F extends ActionFunction<S>> = {
+  action: string;
+  payload: any[];
+  resolve: ReturnType<F>;
+};
+
+type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0
+  ? []
+  : ((...b: T) => void) extends (a, ...b: infer I) => void
+  ? I
+  : [];
+
+export type UserComputedValues<S extends object> = {
+  [K: string]: ComputedFunction<S>;
+};
+
+type ComputedFunction<S extends object> = (state: S) => any;
+
+export type AsyncAction<T extends ActionFunction<any>, S extends object> = (
+  this: StoreObj<S, any, any>,
+  ...args: RemoveFirstFromTuple<Parameters<T>>
+) => Promise<ReturnType<T>>;
+
+export type QueuedStoreActions<S extends object, A extends UserActions<S>> = {
+  [K in keyof A]: AsyncAction<A[K], S>;
+};
+
+export type ComputedValues<S extends object, C extends UserComputedValues<S>> = {
+  [K in keyof C]: ReturnType<C[K]>;
+};
diff --git a/packages/inula-reactive/src/jsx-dev-runtime.ts b/packages/inula-reactive/src/jsx-dev-runtime.ts
new file mode 100644
index 00000000..ee14fff9
--- /dev/null
+++ b/packages/inula-reactive/src/jsx-dev-runtime.ts
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { TYPE_FRAGMENT as Fragment } from './external/JSXElementType';
+import { jsx as jsxDEV } from './external/JSXElement';
+
+export { jsxDEV, Fragment };
diff --git a/packages/inula-reactive/src/jsx-runtime.ts b/packages/inula-reactive/src/jsx-runtime.ts
new file mode 100644
index 00000000..b0c51818
--- /dev/null
+++ b/packages/inula-reactive/src/jsx-runtime.ts
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { TYPE_FRAGMENT as Fragment } from './external/JSXElementType';
+import { jsx, jsx as jsxs } from './external/JSXElement';
+
+export { jsx, jsxs, Fragment };
diff --git a/packages/inula-reactive/src/no-vnode/components/For.tsx b/packages/inula-reactive/src/no-vnode/components/For.tsx
new file mode 100644
index 00000000..221b9710
--- /dev/null
+++ b/packages/inula-reactive/src/no-vnode/components/For.tsx
@@ -0,0 +1,125 @@
+/*
+ * 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 { JSXElement } from '../../renderer/Types';
+import { computed } from '../../reactive/Computed';
+import { untrack } from '../../reactive/RNode';
+
+// TODO 需要优化为精细更新
+export function For<T>(props: { each: any; children?: (value: any, index: number) => JSXElement }) {
+  let list = props.each,
+    mapFn = props.children,
+    items = [],
+    mapped = [],
+    disposers = [],
+    len = 0;
+
+  return () => {
+      let newItems = list.get() || [];
+
+      untrack(() => {
+        let i, j;
+
+        let newLen = newItems.length,
+          newIndices,
+          newIndicesNext,
+          temp,
+          start,
+          end,
+          newEnd,
+          item;
+
+        if (newLen === 0) {
+          // 没新数据
+          if (len !== 0) {
+            disposers = [];
+            items = [];
+            mapped = [];
+            len = 0;
+          }
+        } else if (len === 0) {
+          // 上一次没有数据
+          mapped = new Array(newLen);
+          for (j = 0; j < newLen; j++) {
+            items[j] = newItems[j];
+            mapped[j] = mapFn(list[j]);
+          }
+          len = newLen;
+        } else { // 都有数据
+          // temp = new Array(newLen);
+          //
+          // // 从前往后，判断相等。但是这种前度比较经常是不生效的，比如数组的值相同，指针不一样
+          // for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++);
+          //
+          // // 从后往前
+          // for (
+          //   end = len - 1, newEnd = newLen - 1;
+          //   end >= start && newEnd >= start && items[end] === newItems[newEnd]; // 值相等
+          //   end--, newEnd--
+          // ) {
+          //   temp[newEnd] = mapped[end]; // 把dom取出来
+          // }
+          // // 从start -> newEnd就是不相等的
+          //
+          // newIndices = new Map();
+          // newIndicesNext = new Array(newEnd + 1);
+          // for (j = newEnd; j >= start; j--) {
+          //   item = newItems[j];
+          //   i = newIndices.get(item);
+          //   newIndicesNext[j] = i === undefined ? -1 : i; // item数据可能指针相同，重复。因为是倒序遍历，所以i就是相同数据下一个位置。
+          //   newIndices.set(item, j); // 新数据，放到map中
+          // }
+          //
+          // // 遍历旧数据
+          // for (i = start; i <= end; i++) {
+          //   item = items[i];
+          //   j = newIndices.get(item); // j 是相同数据的第一个
+          //   // 旧行数据，在新数据中存在，在j位置
+          //   if (j !== undefined && j !== -1) {
+          //     temp[j] = mapped[i]; // 把就dom放到新的j位置
+          //     j = newIndicesNext[j];
+          //     newIndices.set(item, j); // 修改map里面的位置，改为下一个
+          //   }
+          // }
+          //
+          // // 往mapped中放入start - newLen的dom数据
+          // for (j = start; j < newLen; j++) { // 按新数据来遍历
+          //   if (j in temp) {
+          //     mapped[j] = temp[j]; // 直接取旧的
+          //   } else {
+          //     mapped[j] = mapFn(list[j]); // 创建新的dom
+          //   }
+          // }
+          //
+          // // 0 - start 数据没有变动
+          // mapped = mapped.slice(0, (len = newLen)); // 如果newLen小于len，就截断
+          // items = newItems.slice(0);
+
+          // 假设新旧相同行数据已经更新
+          if (newLen > len) {
+            for (let i = len; i < newLen; i++) {
+              mapped[i] = mapFn(list[i]); // 创建新的dom
+            }
+          }
+
+          // 0 - start 数据没有变动
+          mapped = mapped.slice(0, (len = newLen)); // 如果newLen小于len，就截断
+          items = newItems.slice(0);
+        }
+      });
+
+      return mapped;
+  };
+}
diff --git a/packages/inula-reactive/src/no-vnode/components/Show.tsx b/packages/inula-reactive/src/no-vnode/components/Show.tsx
new file mode 100644
index 00000000..15e2199d
--- /dev/null
+++ b/packages/inula-reactive/src/no-vnode/components/Show.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { JSXElement } from '../../renderer/Types';
+import { Show as RShow } from '../../reactive/components/Show';
+
+export function Show<T>(props: {
+  if: any | (() => T);
+  else?: any;
+  children: JSXElement | (() => JSXElement);
+}): any {
+  return () => RShow(props);
+}
diff --git a/packages/inula-reactive/src/no-vnode/core.ts b/packages/inula-reactive/src/no-vnode/core.ts
new file mode 100644
index 00000000..3d8c3c76
--- /dev/null
+++ b/packages/inula-reactive/src/no-vnode/core.ts
@@ -0,0 +1,91 @@
+/*
+ * 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 { insert } from './dom';
+
+export function createComponent<T>(Comp, props) {
+  return Comp(props || ({} as T));
+}
+
+export function render(code, element, init, options = {}) {
+  let disposer;
+
+  createRoot(dispose => {
+    disposer = dispose;
+    if (element === document) {
+      code();
+    } else {
+      insert(element, code(), element.firstChild ? null : undefined, init);
+    }
+  });
+
+  return () => {
+    disposer();
+    element.textContent = '';
+  };
+}
+
+let Owner;
+let Listener;
+
+function createRoot(fn) {
+  const listener = Listener;
+  const owner = Owner;
+  const unowned = fn.length === 0;
+  const current = owner;
+  const root = {
+    owned: null,
+    cleanups: null,
+    context: current ? current.context : null,
+    owner: current,
+  };
+  const updateFn = () => {
+    // fn(() => cleanNode(root));
+    fn(() => {});
+  };
+
+  Owner = root;
+  Listener = null;
+  try {
+    return runUpdates(updateFn, true);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+}
+
+let Updates, Effects;
+let ExecCount = 0;
+
+function runUpdates(fn, init) {
+  if (Updates) return fn();
+  let wait = false;
+  if (!init) Updates = [];
+  if (Effects) {
+    wait = true;
+  } else {
+    Effects = [];
+  }
+  ExecCount++;
+  // try {
+    const res = fn();
+    // completeUpdates(wait);
+    return res;
+  // } catch (err) {
+  //   if (!wait) Effects = null;
+  //   Updates = null;
+  //   // handleError(err);
+  // }
+}
diff --git a/packages/inula-reactive/src/no-vnode/dom.ts b/packages/inula-reactive/src/no-vnode/dom.ts
new file mode 100644
index 00000000..9b9ad2d6
--- /dev/null
+++ b/packages/inula-reactive/src/no-vnode/dom.ts
@@ -0,0 +1,295 @@
+/*
+ * 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 { watch } from '../reactive/Watch';
+import { isReactiveObj } from '../reactive/Utils';
+
+export function template(html) {
+  let node;
+  const create = () => {
+    const t = document.createElement('template');
+    t.innerHTML = html;
+    return t.content.firstChild;
+  };
+
+  const fn = () => (node || (node = create())).cloneNode(true);
+  fn.cloneNode = fn;
+  return fn;
+}
+
+export function insert(parent, accessor, marker, initial) {
+  if (marker !== undefined && !initial) {
+    initial = [];
+  }
+
+  if (isReactiveObj(accessor)) {
+    watchRender(current => {
+      return insertExpression(parent, accessor.get(), current, marker);
+    }, initial);
+  } else {
+    return insertExpression(parent, accessor, initial, marker);
+  }
+}
+
+function watchRender(fn, prevValue) {
+  let nextValue = prevValue;
+  watch(() => {
+    nextValue = fn(nextValue);
+  });
+}
+
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  while (typeof current === 'function') current = current();
+  if (value === current) return value;
+
+  const t = typeof value,
+    multi = marker !== undefined;
+
+  if (t === 'string' || t === 'number') {
+    if (t === 'number') value = value.toString();
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data = value;
+      } else {
+        node = document.createTextNode(value);
+      }
+      current = cleanChildren(parent, current, marker, node);
+    } else {
+      if (current !== '' && typeof current === 'string') {
+        current = parent.firstChild.data = value;
+      } else current = parent.textContent = value;
+    }
+  } else if (value == null || t === 'boolean') {
+    current = cleanChildren(parent, current, marker);
+  } else if (t === 'function') {
+    // 在watch里面执行
+    watch(() => {
+      let v = value();
+      while (isReactiveObj(v)) {
+        v = v.get();
+      }
+
+      current = insertExpression(parent, v, current, marker);
+    });
+    return () => current;
+  } else if (Array.isArray(value)) {
+    // return [() => {}, () => {}, ...]
+    const array = [];
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+      watchRender(() => (current = insertExpression(parent, array, current, marker, true)));
+      return () => current;
+    }
+
+    if (array.length === 0) {
+      // 当前没有节点
+      current = cleanChildren(parent, current, marker);
+      if (multi) return current;
+    } else if (currentArray) {
+      if (current.length === 0) {
+        appendNodes(parent, array, marker); // 原来没有节点
+      } else {
+        reconcileArrays(parent, current, array); // 原本有节点，现在也有节点
+      }
+    } else {
+      current && cleanChildren(parent);
+      appendNodes(parent, array);
+    }
+    current = array;
+  } else if (value.nodeType) {
+    if (Array.isArray(current)) {
+      if (multi) return (current = cleanChildren(parent, current, marker, value));
+      cleanChildren(parent, current, null, value);
+    } else if (current == null || current === '' || !parent.firstChild) {
+      parent.appendChild(value);
+    } else {
+      parent.replaceChild(value, parent.firstChild);
+    }
+    current = value;
+  }
+
+  return current;
+}
+
+function cleanChildren(parent, current, marker, replacement) {
+  if (marker === undefined) {
+    return (parent.textContent = '');
+  }
+
+  const node = replacement || document.createTextNode('');
+  if (current.length) {
+    let inserted = false;
+    for (let i = current.length - 1; i >= 0; i--) {
+      const el = current[i];
+      if (node !== el) {
+        const isParent = el.parentNode === parent;
+        if (!inserted && !i) {
+          isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+        } else {
+          isParent && el.remove();
+        }
+      } else {
+        inserted = true;
+      }
+    }
+  } else {
+    parent.insertBefore(node, marker);
+  }
+
+  return [node];
+}
+
+function appendNodes(parent, array, marker = null) {
+  for (let i = 0, len = array.length; i < len; i++) {
+    parent.insertBefore(array[i], marker);
+  }
+}
+
+// 拆解数组，如：[[a, b], [c, d], ...] to [a, b, c, d]
+function normalizeIncomingArray(normalized, array, unwrap) {
+  let dynamic = false;
+  for (let i = 0, len = array.length; i < len; i++) {
+    let item = array[i],
+      t;
+    if (item == null || item === true || item === false) {
+      // matches null, undefined, true or false
+      // skip
+    } else if (Array.isArray(item)) {
+      dynamic = normalizeIncomingArray(normalized, item) || dynamic;
+    } else if ((t = typeof item) === 'string' || t === 'number') {
+      normalized.push(document.createTextNode(item));
+    } else if (t === 'function') {
+      if (unwrap) {
+        while (typeof item === 'function') item = item();
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item]) || dynamic;
+      } else {
+        normalized.push(item);
+        dynamic = true;
+      }
+    } else {
+      normalized.push(item);
+    }
+  }
+  return dynamic;
+}
+
+// 原本有节点，现在也有节点
+export default function reconcileArrays(parentNode, oldChildren, newChildren) {
+  let nLength = newChildren.length,
+    oEnd = oldChildren.length,
+    nEnd = nLength,
+    oStart = 0,
+    nStart = 0,
+    after = oldChildren[oEnd - 1].nextSibling,
+    map = null;
+
+  while (oStart < oEnd || nStart < nEnd) {
+    // 从前到后对比相同内容
+    if (oldChildren[oStart] === newChildren[nStart]) {
+      oStart++;
+      nStart++;
+      continue;
+    }
+    // 从后往前对比相同内容
+    while (oldChildren[oEnd - 1] === newChildren[nEnd - 1]) {
+      oEnd--;
+      nEnd--;
+    }
+    // append
+    if (oEnd === oStart) {
+      // 旧节点全部和新节点相同（不是完全相同， 如：旧 abcd 新 abefcd）
+      const node = nEnd < nLength ? (nStart ? newChildren[nStart - 1].nextSibling : newChildren[nEnd - nStart]) : after;
+
+      while (nStart < nEnd) {
+        parentNode.insertBefore(newChildren[nStart++], node);
+      }
+      // remove
+    } else if (nEnd === nStart) {
+      // 新节点全部和新节点相同（不是完全相同， 如：旧 abefcd 新 abcd）
+      while (oStart < oEnd) {
+        if (!map || !map.has(oldChildren[oStart])) {
+          oldChildren[oStart].remove();
+        }
+        oStart++;
+      }
+      // swap backward
+    } else if (oldChildren[oStart] === newChildren[nEnd - 1] && newChildren[nStart] === oldChildren[oEnd - 1]) {
+      // 如：旧 ab ef cd 新 ab fe cd
+      const node = oldChildren[--oEnd].nextSibling;
+      parentNode.insertBefore(newChildren[nStart++], oldChildren[oStart++].nextSibling); // 如：旧 abe f fcd
+      parentNode.insertBefore(newChildren[--nEnd], node); // 如：旧 abeff e cd
+
+      oldChildren[oEnd] = newChildren[nEnd];
+      // fallback to map
+    } else {
+      // 如：旧 ab feww cd 新 ab hgeht cd
+      if (!map) {
+        map = new Map();
+        let i = nStart;
+
+        while (i < nEnd) {
+          map.set(newChildren[i], i++); // 收集 hgeht
+        }
+      }
+
+      const index = map.get(oldChildren[oStart]);
+      if (index != null) {
+        // 如：e就在newChildren中
+        if (nStart < index && index < nEnd) {
+          // 且位置在新节点 之间
+          let i = oStart,
+            sequence = 1,
+            t;
+
+          while (++i < oEnd && i < nEnd) {
+            // 如：旧 ab feww cd 新 ab hgeht cd, e 的 sequence 是 2 ？
+            if ((t = map.get(oldChildren[i])) == null || t !== index + sequence) break;
+            sequence++;
+          }
+
+          if (sequence > index - nStart) {
+            const node = oldChildren[oStart];
+            while (nStart < index) {
+              parentNode.insertBefore(newChildren[nStart++], node);
+            }
+          } else {
+            parentNode.replaceChild(newChildren[nStart++], oldChildren[oStart++]);
+          }
+        } else {
+          oStart++;
+        }
+      } else {
+        oldChildren[oStart++].remove();
+      }
+    }
+  }
+}
+
+export function setAttribute(node, name, value) {
+  if (value == null) {
+    node.removeAttribute(name);
+  } else {
+    node.setAttribute(name, value);
+  }
+}
+
+export function className(node, value) {
+  if (value == null) {
+    node.removeAttribute('class');
+  } else {
+    node.className = value;
+  }
+}
diff --git a/packages/inula-reactive/src/no-vnode/event.ts b/packages/inula-reactive/src/no-vnode/event.ts
new file mode 100644
index 00000000..661a6e0d
--- /dev/null
+++ b/packages/inula-reactive/src/no-vnode/event.ts
@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+const $$EVENTS = "_$DX_DELEGATE";
+
+/**
+ * 在 document上注册事件
+ * @param eventNames
+ * @param document
+ */
+export function delegateEvents(eventNames, document = window.document) {
+  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document.addEventListener(name, eventHandler);
+    }
+  }
+}
+export function clearDelegatedEvents(document = window.document) {
+  if (document[$$EVENTS]) {
+    for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
+    delete document[$$EVENTS];
+  }
+}
+
+
+function eventHandler(e) {
+  const key = `$$${e.type}`;
+  let node = (e.composedPath && e.composedPath()[0]) || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+
+  // 冒泡执行事件
+  while (node) {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) {
+        return;
+      }
+    }
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+
+export function addEventListener(node, name, handler, delegate) {
+  if (delegate) {
+    if (Array.isArray(handler)) {
+      node[`$$${name}`] = handler[0];
+      node[`$$${name}Data`] = handler[1];
+    } else {
+      node[`$$${name}`] = handler;
+    }
+  } else if (Array.isArray(handler)) {
+    const handlerFn = handler[0];
+    node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
+  } else {
+    node.addEventListener(name, handler);
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/Atom.ts b/packages/inula-reactive/src/reactive/Atom.ts
new file mode 100644
index 00000000..b1add441
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Atom.ts
@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+import { RContextSet, triggerRContexts } from './RContext';
+import { getRNodeVal, trackReactiveData } from './RNode';
+import { isFunction, isObject } from './Utils';
+import {AtomNode, RNode, Root, RootRNode} from './types';
+
+export interface Atom<T = any> extends AtomNode<T> {
+  root: Root<T>;
+  parent: RNode;
+  parentKey: string | symbol | null;
+  usedRContexts?: RContextSet;
+}
+
+const atomKey = Symbol('atomAccessKey');
+export const atomSymbol = Symbol('ReactiveAtom');
+
+// 对原始数据做响应式的时候使用
+export function Atom<T>(value: T, parent: RNode | null = null, parentKey: string | symbol | null = null) {
+  if (parent === null && parentKey === null) {
+    this.parent = {
+      parent: null,
+      parentKey: null,
+      root: {
+        $: { [atomKey]: value },
+      },
+      type: atomSymbol,
+    } as RootRNode<T>;
+    this.parentKey = atomKey;
+    this.root = this.parent.root;
+  } else {
+    this.parent = parent;
+    this.parentKey = parentKey;
+    this.root = this.parent.root;
+  }
+}
+
+Atom.prototype.get = function <T>(): T {
+  trackReactiveData(this);
+  return this.read();
+};
+
+Atom.prototype.set = function <T>(value: T | ((prev: T) => T)) {
+  // 修改Atom值与父元素值
+  const prevParent = getRNodeVal(this.parent);
+  const prevValue = prevParent[this.parentKey];
+
+  const newValue = isFunction(value) ? value(prevValue) : value;
+
+  // 如果要改为非原始对象切父元素类型不为atomSymbol，说明该对象是Atom对象，不允许：从“原生数据”变成“对象”
+  if (this.parent.type === atomSymbol && isObject(newValue)) {
+    throw Error('Not allowed Change Primitive to Object');
+  }
+
+  // 1) 修改Node底层原始值
+  prevParent[this.parentKey] = newValue;
+
+  // 2) 触发使用到它的RContexts
+  triggerRContexts(this, prevValue, newValue, false);
+  return this;
+};
+
+Atom.prototype.read = function <T>(): T {
+  return getRNodeVal(this);
+};
diff --git a/packages/inula-reactive/src/reactive/Batch.ts b/packages/inula-reactive/src/reactive/Batch.ts
new file mode 100644
index 00000000..750851a8
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Batch.ts
@@ -0,0 +1,92 @@
+/*
+ * 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.
+ */
+
+import { RContextCallback, RContextParam, Reactive } from './types';
+import { VNode } from '../renderer/Types';
+import { updateShouldUpdateOfTree } from '../renderer/vnode/VNodeShouldUpdate';
+
+export interface BatchItem {
+  callback: RContextCallback;
+  params: RContextParam;
+  reactive: Reactive;
+}
+
+let batchCount = 0;
+let _batch: BatchItem[] = [];
+let _batchMap = new Map();
+
+export function addToBatch(item: BatchItem) {
+  if (batchCount > 0) {
+    const existing = _batchMap.get(item.callback);
+
+    if (existing) {
+      // const params = existing.params;
+      // params.value = item.params.value;
+    } else {
+      _batch.push(item);
+      _batchMap.set(item.callback, true);
+    }
+  } else {
+    item.callback(item.params, item.reactive);
+  }
+}
+
+export function startBatch() {
+  batchCount++;
+}
+
+export function endBatch() {
+  batchCount--;
+
+  if (batchCount <= 0) {
+    batchCount = 0;
+    const batch = _batch;
+    _batch = [];
+    _batchMap = new Map();
+
+    const toUpdateVNodes: VNode[] = [];
+    const toUpdateVNodeItems: BatchItem[] = [];
+
+    for (let i = 0; i < batch.length; i++) {
+      const b = batch[i];
+
+      // 如果要刷新的是组件（函数组件或类组件）
+      if (b.params?.vNode) {
+        // 设置vNode为shouldUpdate
+        updateShouldUpdateOfTree(b.params.vNode);
+
+        b.params.vNode.isStoreChange = true;
+
+        toUpdateVNodes.push(b.params.vNode);
+        toUpdateVNodeItems.push(b);
+      }
+    }
+
+    for (let i = 0; i < batch.length; i++) {
+      const b = batch[i];
+      const { callback, reactive } = b;
+
+      if (!b.params?.vNode) {
+        callback(b.params, reactive);
+      }
+    }
+
+    if (toUpdateVNodes.length) {
+      const b = toUpdateVNodeItems[0];
+      const { callback, reactive } = b;
+      callback(b.params, reactive);
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/Computed.ts b/packages/inula-reactive/src/reactive/Computed.ts
new file mode 100644
index 00000000..8c2fdfcb
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Computed.ts
@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+import { Computed } from './types';
+import { createReactiveObj, setRNodeVal } from './RNode';
+import { calculateReactive, getRNode, isPromise } from './Utils';
+import { RContext } from './RContext';
+
+function computed<T = any>(fn: () => T | Promise<T>): Computed<T> {
+  const setComputed = (value: any, trigger: boolean) => {
+    root.readOnly = false;
+    const raw = getRNode(rObj);
+    setRNodeVal(raw, value, trigger);
+    root.readOnly = true;
+  };
+
+  // 依赖的响应式数据变化时调用
+  const update = (trigger: boolean) => {
+    const value = calculateReactive(fn);
+    if (isPromise(value)) {
+      value.then(val => setComputed(val, trigger));
+    } else {
+      setComputed(value, trigger);
+    }
+  };
+
+  const rContext = new RContext(() => update(true));
+  const end = rContext.start();
+  // 首次更新不触发usedRContexts
+  const value = calculateReactive(fn);
+  end();
+
+  const rObj = createReactiveObj(value);
+
+  const rawNode = getRNode(rObj);
+  const root = rawNode.root;
+  // 默认readOnly为true
+  root.readOnly = true;
+
+  return rObj as Computed<T>;
+}
+
+export { computed };
diff --git a/packages/inula-reactive/src/reactive/DiffUtils.ts b/packages/inula-reactive/src/reactive/DiffUtils.ts
new file mode 100644
index 00000000..a3946996
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/DiffUtils.ts
@@ -0,0 +1,199 @@
+/*
+ * 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,
+  };
+}
+
+// export function sameLenArrayDiff<T>(origin: T[], target: T[]): Diff[] {
+//   // 只要id相同就认为是同一个对象
+//   const diff: Diff[] = [];
+//   const hasId = origin.every(i => getIDField(i));
+//   const arrayLength = origin.length;
+//   if (hasId && arrayLength > 0) {
+//     const idField = getIDField(origin[0])!;
+//     for (let j = 0; j < target.length; j++) {
+//       if (origin[j][idField] === target[j][idField]) {
+//         diff.push({ action: Operation.Nop, index: j });
+//       } else {
+//         diff.push({ action: Operation.Update, index: j });
+//       }
+//     }
+//     return diff;
+//   }
+//   return arrayDiff(origin, target);
+// }
diff --git a/packages/inula-reactive/src/reactive/RContext.ts b/packages/inula-reactive/src/reactive/RContext.ts
new file mode 100644
index 00000000..79c250a8
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/RContext.ts
@@ -0,0 +1,360 @@
+/*
+ * 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.
+ */
+
+import { isArray } from '../inulax/CommonUtils';
+import { isObject, isPrimitive } from './Utils';
+import { arrayDiff, DiffOperator, Operation } from './DiffUtils';
+import { ArrayState, RContextCallback, RContextParam, Reactive, RNode } from './types';
+import { getOrCreateChildNode } from './RNode';
+import {addToBatch, startBatch, endBatch, BatchItem} from './Batch';
+
+export let currentRContext: RContext | null = null;
+
+const reactiveContextStack: RContext[] = [];
+export type RContextSet = Set<RContext>;
+
+/**
+ * 响应式上下文，有4种情况：1、组件级。2、Block级。3、watch/computed。4、DOM级。
+ */
+export class RContext {
+  callback: RContextCallback;
+
+  // 记录该Context使用时的参数
+  params: RContextParam;
+
+  // 记录该RContext中使用到的Reactive中的RContextSet
+  reactiveDependents: Set<RContextSet> | null = null;
+
+  constructor(callback: RContextCallback, params: RContextParam = {}) {
+    this.callback = callback;
+    this.params = params;
+  }
+
+  setParam(params: RContextParam) {
+    this.params = params;
+  }
+
+  start() {
+    cleanupRContext(this);
+    currentRContext = this;
+    reactiveContextStack.push(this);
+
+    return endEffect;
+  }
+}
+
+function endEffect() {
+  reactiveContextStack.pop();
+  currentRContext = reactiveContextStack[reactiveContextStack.length - 1] ?? null;
+}
+
+export function setRContext(val: RContext | null) {
+  currentRContext = val;
+}
+
+// 清除 RContext和响应式数据的绑定，双向清除
+export function cleanupRContext(rContext: RContext) {
+  if (rContext.reactiveDependents !== null) {
+    for (const usedRContexts of rContext.reactiveDependents) {
+      usedRContexts.delete(rContext);
+    }
+
+    rContext.reactiveDependents.clear();
+    rContext.reactiveDependents = null;
+  }
+}
+
+// 绑定RContext和响应式数据，双向绑定
+export function bindReactiveWithContext(reactive: Reactive, rContext: RContext) {
+  if (reactive.usedRContexts === undefined) {
+    reactive.usedRContexts = new Set<RContext>();
+  }
+  reactive.usedRContexts.add(rContext);
+
+  if (rContext.reactiveDependents === null) {
+    rContext.reactiveDependents = new Set<RContextSet>();
+  }
+  rContext.reactiveDependents.add(reactive.usedRContexts);
+}
+
+// 递归触发依赖这reactive数据的所有RContext
+export function triggerRContexts(reactive: Reactive, prevValue: any, value: any, isFromArrModify?: boolean) {
+  const isObj = isObject(value);
+  const isPrevObj = isObject(prevValue);
+
+  startBatch();
+
+  if (isObj && isPrevObj) {
+    triggerChildrenContexts(reactive as RNode, value, prevValue, isFromArrModify);
+  }
+
+  callRContexts(reactive);
+
+  // 触发父数据的RContext，不希望触发组件刷新（只触发computed和watch）
+  // TODO 暂时删除, 跑no-vnode方式的js-framework-benchmark用例
+  triggerParents(reactive.parent);
+
+  endBatch();
+}
+
+function triggerParents(reactive: Reactive | null) {
+  if (reactive) {
+    // 在触发父数据的时候，不希望触发组件刷新（只触发computed和watch）
+    callRContexts(reactive, true);
+
+    triggerParents(reactive.parent);
+  }
+}
+
+// 当value和prevValue都是对象或数组时，才触发
+function triggerChildrenContexts(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) {
+      switch (opt.action) {
+        // 从已有RNode中取值
+        case Operation.Nop: {
+          const childRNode = rNode.children?.get(String(opt.index));
+
+          // children没有使用时，可以为undefined或没有该child
+          if (childRNode !== undefined) {
+            childRNode.parentKey = String(childIndex);
+            states.push(ArrayState.Fresh);
+            childIndex++;
+
+            // 删除旧的，重设新值。处理场景：元素还在，但是在数组中的位置变化了。
+            rNode.children?.delete(String(opt.index));
+            rNode.children?.set(childRNode.parentKey, childRNode);
+          }
+          break;
+        }
+        // 从Value中新建RNode
+        case Operation.Insert: {
+          getOrCreateChildNode(value[opt.index], rNode, String(opt.index));
+          states.push(ArrayState.NotFresh);
+          childIndex++;
+          break;
+        }
+        case Operation.Delete: {
+          rNode.children?.delete(String(opt.index));
+          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);
+        getOrCreateChildNode(value[i], 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 = triggerChildrenContexts(childRNode as RNode, val, prevVal);
+          }
+        } else if (!isObj && !isPrevObj) { // val和prevVal都不是对象或数组
+          canPreciseUpdate = true;
+        } else { // 类型不同（一个是对象或数组，另外一个不是）
+          canPreciseUpdate = false;
+        }
+
+        // 有childRNode，说明这个数据被使引用过
+        if (childRNode !== undefined) {
+          callRContexts(childRNode);
+        }
+      }
+    });
+
+    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] = triggerChildrenContexts(childRNode as RNode, val, prevVal);
+        }
+      } else if (!isObj && !isPrevObj) { // val和prevVal都不是对象或数组
+        canPreciseUpdates[i] = true;
+      } else { // 类型不同（一个是对象或数组，另外一个不是）
+        canPreciseUpdates[i] = false;
+      }
+
+      // 有childRNode，说明这个数据被使引用过
+      if (childRNode) {
+        callRContexts(childRNode);
+      }
+    } else {
+      canPreciseUpdates[i] = true;
+    }
+  }
+
+  return canPreciseUpdates;
+}
+
+// 调用：响应式数据reactive所收集的依赖（RContext）
+function callRContexts(reactive: Reactive, isNoComponentRContext = false) {
+  if (reactive.usedRContexts !== undefined && reactive.usedRContexts.size) {
+    // Array.from 浅克隆防止callback中扩缩usedRContexts数组
+    const usedRContexts = Array.from<RContext>(reactive.usedRContexts);
+    const len = usedRContexts.length;
+    let rContext: RContext;
+
+    for (let i = 0; i < len; i++) {
+      rContext = usedRContexts[i];
+
+      // dep.callback可能被清除
+      if (rContext.callback) {
+        // 在触发父数据的时候，不希望触发组件刷新
+        if (isNoComponentRContext && rContext.params.vNode) {
+          continue;
+        }
+
+        const batchItem: BatchItem = {
+          callback: rContext.callback,
+          params: rContext.params,
+          reactive: reactive,
+        };
+
+        addToBatch(batchItem);
+      }
+    }
+  }
+}
+
+/**
+ * 清理Reactive的dependents
+ * @param reactive
+ */
+export function disposeReactive(reactive: Reactive) {
+  if (reactive.usedRContexts) {
+    const usedRContexts = reactive.usedRContexts;
+    for (const rContext of usedRContexts) {
+      cleanupRContext(rContext);
+    }
+    delete reactive.usedRContexts;
+  }
+}
+
diff --git a/packages/inula-reactive/src/reactive/RContextCreator.ts b/packages/inula-reactive/src/reactive/RContextCreator.ts
new file mode 100644
index 00000000..f497870c
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/RContextCreator.ts
@@ -0,0 +1,251 @@
+/*
+ * 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.
+ */
+
+import { launchUpdateFromVNode } from '../renderer/TreeBuilder';
+import { bindReactiveWithContext, cleanupRContext, RContext } from './RContext';
+import { For } from './components/For';
+import { VNode } from '../renderer/Types';
+import { RContextParam, Reactive, RNode } from './types';
+import { getRNodeVal } from './RNode';
+import { getVNode } from '../dom/DOMInternalKeys';
+import { updateInputValue } from '../dom/valueHandler/InputValueHandler';
+import { updateTextareaValue } from '../dom/valueHandler/TextareaValueHandler';
+import { setDomProps } from '../dom/DOMPropertiesHandler/DOMPropertiesHandler';
+import { getRNodeFromProxy, isAtom, isReactiveProxy } from './Utils';
+import { isReactively } from '../reactively/utils';
+import { reactively } from '../reactively/Reactively';
+
+const vNodeEffectMap = new WeakMap<VNode, RContext>();
+
+/**
+ * 创建组件（函数组件或Class组件）级别Dependent
+ * @param renderFn 函数组件 或 Class的render
+ * @param vNode
+ */
+export function createComponentDependent<T>(renderFn: () => T, vNode: VNode): T {
+  let compRContext = vNode.compRContext;
+
+  if (!compRContext) {
+    compRContext = new RContext(
+      (params, reactive) => {
+        vNode.isStoreChange = true;
+
+        // 如果是For组件
+        if (For === vNode.type && reactive.diffOperator) {
+          // 如果Reactive的For组件
+          const { isOnlyNop } = reactive.diffOperator;
+
+          // 如果没有需要处理
+          if (isOnlyNop) {
+            return;
+          }
+        }
+
+        // 同步刷新
+        // syncUpdates(() =>{
+        //   // 触发vNode更新
+        //   launchUpdateFromVNode(vNode);
+        // });
+
+        // 触发vNode更新
+        launchUpdateFromVNode(vNode);
+      },
+      { vNode }
+    );
+
+    vNode.compRContext = compRContext;
+  }
+
+  const endRContext = compRContext.start();
+
+  const result = renderFn();
+
+  endRContext();
+
+  return result;
+}
+
+/**
+ * 订阅DOM的属性（props或children），创建一个专门更新该属性的上下文，当响应式数据变化就触发该上下文的callback
+ * @param dom DOM元素
+ * @param propName 属性名字
+ * @param propVal 属性值，是响应式数据
+ * @param styleName style里面的某个属性
+ */
+function subscribeAttr(dom: Element, propName: string, propVal: Reactive, styleName?: string) {
+  const attrRContext = new RContext(
+    params => {
+      let changeList;
+      if (propName === 'style' && styleName) {
+        changeList = {
+          style: {
+            [styleName]: getRNodeVal(params.reactive!),
+          },
+        };
+      } else {
+        changeList = {
+          [propName]: getRNodeVal(params.reactive!),
+        };
+      }
+
+      const type = getVNode(dom)?.type;
+      if (type === 'input' && propName === 'value') {
+        updateInputValue(dom as HTMLInputElement, changeList);
+      } else if (type === 'textarea' && propName === 'value') {
+        updateTextareaValue(dom as HTMLTextAreaElement, changeList);
+      } else {
+        setDomProps(dom, changeList, true, false);
+      }
+    },
+    { reactive: propVal }
+  );
+
+  bindReactiveWithContext(propVal, attrRContext);
+
+  // vNode保存RContext，用于cleanup
+  const vNode = getVNode(dom);
+  saveAttrRContexts(vNode, attrRContext);
+}
+
+/**
+ * 订阅DOM的属性（props或children），创建一个专门更新该属性的上下文，当响应式数据变化就触发该上下文的callback
+ * @param dom DOM元素
+ * @param propName 属性名字
+ * @param propVal 属性值，是响应式数据
+ * @param styleName style里面的某个属性
+ */
+function subscribeAttrForReactively(dom: Element, propName: string, propVal, styleName?: string) {
+  const attrRContext = reactively.watch(
+    () => {
+      let changeList;
+      if (propName === 'style' && styleName) {
+        changeList = {
+          style: {
+            [styleName]: propVal.get(),
+          },
+        };
+      } else {
+        changeList = {
+          [propName]: propVal.get(),
+        };
+      }
+
+      const type = getVNode(dom)?.type;
+      if (type === 'input' && propName === 'value') {
+        updateInputValue(dom as HTMLInputElement, changeList);
+      } else if (type === 'textarea' && propName === 'value') {
+        updateTextareaValue(dom as HTMLTextAreaElement, changeList);
+      } else {
+        setDomProps(dom, changeList, true, false);
+      }
+    },
+  );
+
+  // bindReactiveWithContext(propVal, attrRContext);
+  //
+  // // vNode保存RContext，用于cleanup
+  // const vNode = getVNode(dom);
+  // saveAttrRContexts(vNode, attrRContext);
+}
+
+export function handleReactiveProp(dom: Element, propName: string, propVal: any, styleName?: string): any {
+  let rawVal = propVal;
+  const isA = isAtom(propVal);
+  const isProxy = isReactiveProxy(propVal);
+  const isRy = isReactively(propVal);
+
+  if (isA || isProxy) {
+    let reactive = propVal;
+    if (isProxy) {
+      reactive = getRNodeFromProxy(propVal);
+    }
+    rawVal = getRNodeVal(reactive as Reactive);
+    subscribeAttr(dom, propName, reactive, styleName);
+  }
+
+  if (isRy) {
+    subscribeAttrForReactively(dom, propName, propVal, styleName);
+    rawVal = propVal.get();
+  }
+
+  return rawVal;
+}
+
+/**
+ * 创建DOM Key Dependent
+ * @param callback 用于修改VNode的key
+ * @param params Effect调用所需要的参数
+ */
+export function createKeyDependent(callback: (params: RContextParam) => void, params?: RContextParam) {
+  return new RContext(callback, params);
+}
+
+/**
+ * 处理 <div>Count: {_rObj}</div>
+ * @param textDom 用于修改VNode的key
+ * @param rText Effect调用所需要的参数
+ */
+export function subscribeReactiveComponent(textDom: Element, rText: Reactive) {
+  const textContext = new RContext(
+    params => {
+      textDom.textContent = getRNodeVal(params.reactive as Reactive);
+    },
+    { reactive: rText }
+  );
+
+  bindReactiveWithContext(rText, textContext);
+
+  // vNode保存RContext，用于cleanup
+  const vNode = getVNode(textDom);
+  saveAttrRContexts(vNode, textContext);
+}
+
+// TODO 删除
+export function cleanupVNodeEffect(vNode: VNode) {
+  const effect = vNodeEffectMap.get(vNode);
+  if (effect) {
+    cleanupRContext(effect);
+    vNodeEffectMap.delete(vNode);
+  }
+}
+
+/**
+ * 创建DOM Key Dependent
+ * @param vNode
+ * @param rKey
+ */
+export function subscribeKeyEffect(vNode: VNode, rKey: RNode) {
+  const keyContext = new RContext(
+    params => {
+      vNode.key = getRNodeVal(rKey);
+    },
+    { reactive: rKey }
+  );
+
+  bindReactiveWithContext(rKey, keyContext);
+
+  // vNode保存RContext，用于cleanup
+  saveAttrRContexts(vNode, keyContext);
+}
+
+// vNode保存RContext，用于cleanup
+function saveAttrRContexts(vNode: VNode | null, rContext: RContext) {
+  if (vNode) {
+    if (!vNode.attrRContexts) {
+      vNode.attrRContexts = new Set();
+    }
+    vNode.attrRContexts.add(rContext);
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/RNode.ts b/packages/inula-reactive/src/reactive/RNode.ts
new file mode 100644
index 00000000..455b19df
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/RNode.ts
@@ -0,0 +1,171 @@
+/*
+ * 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.
+ */
+
+import { bindReactiveWithContext, currentRContext, setRContext, triggerRContexts } from './RContext';
+import { isAtom, isFunction, isRNode, isPrimitive } from './Utils';
+import { createProxy } from './proxy/RProxyHandler';
+import { Atom } from './Atom';
+import { isSame } from '../renderer/utils/compare';
+import { ProxyRNode, Reactive, ReactiveProxy, RNode, RootRNode } from './types';
+
+export const nodeSymbol = Symbol('ReactiveNode');
+
+export function createReactiveObj<T extends any>(raw?: T): ReactiveProxy<T> {
+  if (isPrimitive(raw) || raw === null || raw === undefined) {
+    return new Atom(raw);
+  } else {
+    const node = createRootRNode(raw);
+    const proxyObj = createProxy<T>(node);
+    node.proxy = proxyObj;
+    return proxyObj as ReactiveProxy<T>;
+  }
+}
+
+export function createRootRNode<T extends any>(raw?: T): RootRNode<T> {
+  const root: RootRNode<T> = {
+    type: nodeSymbol,
+    root: { $: raw },
+    parent: null,
+    parentKey: null,
+  };
+
+  return root;
+}
+
+export function getOrCreateChildRNode(node: RNode, key: string | symbol): RNode {
+  let child = node.children?.get(key);
+
+  if (!child || isAtom(child)) {
+    child = {
+      type: nodeSymbol,
+      root: node.root,
+      parent: node,
+      parentKey: key,
+    };
+    if (!node.children) {
+      node.children = new Map();
+    }
+
+    node.children.set(key, child);
+  }
+  return child;
+}
+
+export function getOrCreateChildAtom(node: RNode, key: string | symbol, value: any): Atom {
+  const child = node.children?.get(key);
+
+  // 如果没有子节点或者子节点是RNode类型，就创建一个新的Atom，否则返回已存在的子节点
+  // 注意：不能使用getNodeVal来判断之前节点的值，因为根数据已被修改，只能通过判断child的类型为
+  if (!child || isRNode(child)) {
+    const atom = new Atom(value, node, key);
+    if (!node.children) {
+      node.children = new Map();
+    }
+    node.children.set(key, atom);
+    return atom;
+  }
+
+  return child;
+}
+
+export function getOrCreateChildNode(value: unknown, parent: RNode, key: string | symbol): Atom | RNode {
+  let child: Atom | RNode;
+  // if (isPrimitive(value) || value === null || value === undefined) {
+  //   child = getOrCreateChildAtom(parent, key, value);
+  // } else {
+    child = getOrCreateChildRNode(parent, key);
+  // }
+  return child;
+}
+
+export function getOrCreateChildProxy(value: unknown, parent: RNode, key: string | symbol): Atom | ProxyRNode<any> {
+  let child: Atom | RNode;
+  // if (isPrimitive(value) || value === null || value === undefined) {
+  //   child = getOrCreateChildAtom(parent, key, value);
+  //   return child;
+  // } else {
+    child = getOrCreateChildRNode(parent, key);
+    if (!child.proxy) {
+      child.proxy = createProxy(child);
+    }
+    return child.proxy;
+  // }
+}
+
+// 追踪响应式数据的使用
+export function trackReactiveData(reactive: Reactive) {
+  if (currentRContext !== null) {
+    bindReactiveWithContext(reactive, currentRContext);
+  }
+}
+
+// 不进行响应式数据的使用追踪
+export function untrack(fn) {
+  if (currentRContext === null) {
+    return fn();
+  }
+
+  const preRContext = currentRContext;
+  setRContext(null);
+  try {
+    return fn();
+  } finally {
+    setRContext(preRContext);
+  }
+}
+
+export function getRNodeVal(node: Reactive): any {
+  let currentNode = node;
+  const keys: (string | symbol)[] = [];
+  while (currentNode.parentKey !== null && currentNode.parent !== null) {
+    keys.push(currentNode.parentKey);
+    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, value: unknown, trigger = false, isArrayModified = false): void {
+  if (rNode.root.readOnly) {
+    return;
+  }
+
+  const { parent, parentKey } = rNode;
+  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[parentKey!];
+    newValue = isFunction<(...prev: any) => any>(value) ? value(prevValue) : value;
+    parentVal[parentKey!] = newValue;
+  }
+
+  if (trigger && !isSame(newValue, prevValue)) {
+    triggerRContexts(rNode, prevValue, newValue, isArrayModified);
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/Reactive.ts b/packages/inula-reactive/src/reactive/Reactive.ts
new file mode 100644
index 00000000..6c558004
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Reactive.ts
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+import { createReactiveObj } from './RNode';
+import { ReactiveProxy } from './types';
+
+export function reactive<T extends any>(obj: T): ReactiveProxy<T> {
+  return createReactiveObj(obj);
+}
diff --git a/packages/inula-reactive/src/reactive/Utils.ts b/packages/inula-reactive/src/reactive/Utils.ts
new file mode 100644
index 00000000..39664bcb
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Utils.ts
@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+import {Atom} from './Atom';
+import {getRNodeVal, nodeSymbol} from './RNode';
+import {AtomNode, AtomNodeFn, ProxyRNode, ProxyRNodeFn, Reactive, ReactiveProxy, RNode} from './types';
+import {GET_R_NODE} from './proxy/RProxyHandler';
+import {isReactively} from '../reactively/utils';
+
+export function isAtom(val: unknown): val is Atom {
+  return val instanceof Atom;
+}
+
+export function isRNode(val: unknown): val is RNode {
+  return typeof val === 'object' && val != null && val['type'] === nodeSymbol;
+}
+
+export function isReactiveProxy(val: unknown): val is RNode {
+  return typeof val === 'object' && val != null && val[GET_R_NODE] !== undefined;
+}
+
+export function isReactiveObj(val: unknown): val is ProxyRNodeFn<any> | AtomNodeFn<any> {
+  return isAtom(val) || isReactiveProxy(val) || isReactively(val);
+}
+
+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';
+}
+
+/**
+ * 如果是函数就执行，如果是reactive就调用get()
+ * @param val 值/reactive对象/函数
+ * @return 返回真实值
+ */
+export function calculateReactive(val: any | (() => any)): any {
+  let ret = val;
+  if (typeof val === 'function') {
+    ret = val();
+  }
+
+  if (isReactiveObj(ret)) {
+    ret = ret.get();
+  }
+
+  return ret;
+}
+
+export function getRNode<T = any>(rObj: ProxyRNode<T> | AtomNode<T>): RNode {
+  return isReactiveProxy(rObj) ? rObj[GET_R_NODE] : rObj;
+}
+
+export function getRNodeFromProxy<T = any>(rObj: ProxyRNode<T>): RNode {
+  return rObj[GET_R_NODE];
+}
+
+export function isPromise<T>(obj: unknown): obj is Promise<T> {
+  return obj instanceof Promise;
+}
+
+export function getValue(value: any): any {
+  if (isAtom(value)) {
+    return getRNodeVal(value as Reactive);
+  }
+  if (isReactiveProxy(value)) {
+    return getRNodeVal(value[GET_R_NODE]);
+  }
+  return value;
+}
diff --git a/packages/inula-reactive/src/reactive/Var.ts b/packages/inula-reactive/src/reactive/Var.ts
new file mode 100644
index 00000000..9d1e6b1a
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Var.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 const inJSX: { current: boolean } = {
+  current: false,
+};
+
+export const inComputation: { current: boolean } = {
+  current: false,
+};
diff --git a/packages/inula-reactive/src/reactive/Watch.ts b/packages/inula-reactive/src/reactive/Watch.ts
new file mode 100644
index 00000000..9841a246
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/Watch.ts
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { RContext } from './RContext';
+import { calculateReactive } from './Utils';
+import { Reactive } from './types';
+
+export function watch(fn: () => any | Reactive, callback?: () => void): any {
+  // 有两个参数，第一个是要监听数据/函数，第二个是回调
+  if (typeof callback === 'function') {
+    const effect = new RContext(() => {
+      callback();
+    });
+
+    const endEffect = effect.start();
+
+    calculateReactive(fn);
+
+    endEffect();
+  } else {
+    // 只有一个参数
+    const effect = new RContext(fn);
+
+    const endEffect = effect.start();
+
+    fn();
+
+    endEffect();
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/components/Block.tsx b/packages/inula-reactive/src/reactive/components/Block.tsx
new file mode 100644
index 00000000..7396c51a
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/components/Block.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+import { JSXElement } from '../../renderer/Types';
+import { calculateReactive } from '../Utils';
+
+/**
+ * Block可以控制更新范围，若View的children函数中通过get()使用了响应式数据，当响应式数据变化时，children函数会被重新执行，不会影响父组件。
+ * <Block>
+   {() => {
+      const count = _rObj.count.get();
+      return <>
+        <div>{count}</div>
+      </>;
+    }}
+   </Block>
+ * @param children
+ */
+export function Block({ children }: { children: () => JSXElement }): any {
+  const result = calculateReactive(children);
+
+  return result;
+}
diff --git a/packages/inula-reactive/src/reactive/components/For.tsx b/packages/inula-reactive/src/reactive/components/For.tsx
new file mode 100644
index 00000000..d7253932
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/components/For.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+
+import { JSXElement } from '../../renderer/Types';
+import { createElement } from '../../external/JSXElement';
+import { useMemo } from '../../renderer/hooks/HookExternal';
+import { memo } from '../../renderer/components/Memo';
+import { shallowCompare } from '../../renderer/utils/compare';
+import { ArrayState } from '../types';
+import { GET_R_NODE } from '../proxy/RProxyHandler';
+
+/**
+ * For组件用于循环渲染数据
+ * @param each 包含要循环的数据的可观察对象
+ * @param children 渲染每个数据项的子组件
+ * @returns 返回JSX元素或null
+ */
+export function For<T>({
+  each,
+  children,
+}: {
+  each: any;
+  children?: (value: any, index: number) => JSXElement;
+}): JSXElement[] | null {
+  // 获取可观察对象中的数据数组
+  const reactiveArr = each.get();
+
+  if (!reactiveArr || !reactiveArr.length) {
+    return null;
+  }
+
+  const rNode = each[GET_R_NODE];
+  const states = rNode.states !== undefined ? rNode.states : [];
+
+  let Item: Partial<JSXElement> | null = null;
+
+  if (children) {
+    Item = useMemo(() => {
+      return memo(({ item, index }) => children(item, index), itemCompare);
+    }, []);
+  }
+
+  const ret: JSXElement[] = [];
+  const len = reactiveArr.length;
+  for (let i = 0; i < len; i++) {
+    const state = states[i];
+    const isFresh = state === ArrayState.Fresh;
+
+    // 创建并添加JSX元素
+    ret.push(createElement(Item, { isFresh, item: each[i], index: i }));
+  }
+
+  // 用完，重置
+  rNode.states = [];
+
+  // 合并多次的diffOperator
+  if (rNode.diffOperators) {
+    rNode.diffOperators.forEach(() => {
+
+    });
+  }
+
+  ret.diffOperator = rNode.diffOperator;
+  // 用完，删除
+  delete rNode.diffOperators;
+  delete rNode.diffOperator;
+
+  // 返回JSX元素数组
+  return ret;
+}
+
+// 如果属性中有isFresh，就优先判断isFresh
+function itemCompare(oldProps, newProps) {
+  if (newProps.isFresh !== undefined) {
+    return Boolean(newProps.isFresh);
+  } else {
+    return shallowCompare(oldProps, newProps);
+  }
+}
diff --git a/packages/inula-reactive/src/reactive/components/RText.ts b/packages/inula-reactive/src/reactive/components/RText.ts
new file mode 100644
index 00000000..93b07705
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/components/RText.ts
@@ -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.
+ */
+
+import { memo } from '../../renderer/components/Memo';
+import { JSXElement } from '../../renderer/Types';
+import { calculateReactive } from '../Utils';
+
+export const RText = memo(
+  function ({ children }: { children: any }): JSXElement {
+    return calculateReactive(children);
+  },
+  () => true // 属性指针始终为true，不刷新
+);
diff --git a/packages/inula-reactive/src/reactive/components/Show.tsx b/packages/inula-reactive/src/reactive/components/Show.tsx
new file mode 100644
index 00000000..daff4b8a
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/components/Show.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import { JSXElement } from '../../renderer/Types';
+import { calculateReactive } from '../Utils';
+
+export function Show<T>({
+  if: rIf,
+  else: rElse,
+  children,
+}: {
+  if: any | (() => T);
+  else?: any;
+  children: JSXElement | (() => JSXElement);
+}): any {
+  const ifValue: any = calculateReactive(rIf);
+
+  let child: JSXElement | (() => JSXElement) | null = null;
+  if (ifValue) {
+    child = typeof children === 'function' ? children() : children;
+  } else {
+    child = typeof rElse === 'function' ? rElse() : rElse;
+  }
+
+  return child;
+}
diff --git a/packages/inula-reactive/src/reactive/components/Switch.ts b/packages/inula-reactive/src/reactive/components/Switch.ts
new file mode 100644
index 00000000..ee9a9117
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/components/Switch.ts
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { calculateReactive } from '../Utils';
+import { JSXElement, VNode } from '../../renderer/Types';
+import { Children } from '../../external/ChildrenUtil';
+
+export function Switch<T>({
+  children,
+  default: df,
+}: {
+  children: JSXElement[] | Record<any, () => JSXElement>;
+  default?: JSXElement;
+}): JSXElement | null {
+  const arr = Children.toArray(children);
+
+  let index = -1;
+  for (let i = 0; i < arr.length; i++) {
+    const showComp = arr[i];
+
+    const ifValue: any = calculateReactive((showComp as VNode).props.if);
+
+    if (ifValue) {
+      index = i;
+      break;
+    }
+  }
+
+  return index >= 0 ? arr[index] : df ?? null;
+}
diff --git a/packages/inula-reactive/src/reactive/proxy/RProxyHandler.ts b/packages/inula-reactive/src/reactive/proxy/RProxyHandler.ts
new file mode 100644
index 00000000..768baf5f
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/proxy/RProxyHandler.ts
@@ -0,0 +1,146 @@
+/*
+ * 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.
+ */
+
+import { isArray } from '../../inulax/CommonUtils';
+import { getOrCreateChildProxy, getRNodeVal, setRNodeVal, trackReactiveData } from '../RNode';
+import { RNode, ProxyRNode } from '../types';
+
+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): ProxyRNode<T> {
+  return new Proxy(proxyNode, {
+    get,
+    set,
+  });
+}
+
+const GetFns: Record<string | symbol, (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 = GetFns[key];
+  if (fn && typeof fn === 'function') {
+    return () => fn(rNode);
+  }
+
+  // 调用set()方法
+  if (key === SET) {
+    return function (val: any) {
+      setRNodeVal(rNode, val, true, false);
+    };
+  }
+
+  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) {
+  trackReactiveData(node);
+  return readFn(node);
+}
+
+function readFn(node: RNode) {
+  return getRNodeVal(node);
+}
+
+// delete()调用的处理
+function deleteFn() {}
+
+// onChange()调用的处理
+function onChangeFn() {}
diff --git a/packages/inula-reactive/src/reactive/types.ts b/packages/inula-reactive/src/reactive/types.ts
new file mode 100644
index 00000000..5e266bea
--- /dev/null
+++ b/packages/inula-reactive/src/reactive/types.ts
@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+
+import { VNode } from '../renderer/Types';
+import { Atom } from './Atom';
+import { RContextSet } from './RContext';
+import { DiffOperator } from './DiffUtils';
+
+export enum ArrayState {
+  Fresh = 0,
+  NotFresh = 1,
+}
+
+export interface Root<T> {
+  $?: T;
+
+  /**
+   * computed使用
+   * @param {readOnly} 标识computed 是否处于写入状态
+   */
+  readOnly?: boolean;
+}
+
+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>;
+
+export interface RContextParam {
+  vNode?: VNode;
+  reactive?: Reactive;
+}
+
+export type RContextCallback = (params: RContextParam, reactive: Reactive) => void;
diff --git a/packages/inula-reactive/src/reactively/RNode.ts b/packages/inula-reactive/src/reactively/RNode.ts
new file mode 100644
index 00000000..ebce8631
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/RNode.ts
@@ -0,0 +1,335 @@
+/*
+ * 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 { isFunction } from '../reactive/Utils';
+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-scale 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);
+        }
+      }
+    }
+  }
+
+  /** run the computation fn, updating the cached value */
+  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/reactively/RNodeAccessor.ts b/packages/inula-reactive/src/reactively/RNodeAccessor.ts
new file mode 100644
index 00000000..3ad1230d
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/RNodeAccessor.ts
@@ -0,0 +1,270 @@
+/*
+ * 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 } from '../reactive/Utils';
+import { isObject } from './Utils';
+import { isArray } from '../inulax/CommonUtils';
+import { arrayDiff, DiffOperator, Operation } from '../reactive/DiffUtils';
+import { ArrayState } from '../reactive/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/reactively/RNodeCreator.ts b/packages/inula-reactive/src/reactively/RNodeCreator.ts
new file mode 100644
index 00000000..b63369b5
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/RNodeCreator.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 { ProxyRNode, ReactiveProxy } from '../reactive/types';
+import { isPrimitive } from '../reactive/Utils';
+import { Atom } from '../reactive/Atom';
+import { RNode } from './RNode';
+
+export type Reactive<T = any> = RNode<T> | Atom<T>;
+
+export const nodeSymbol = Symbol('ReactiveNode');
+
+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/reactively/Reactively.ts b/packages/inula-reactive/src/reactively/Reactively.ts
new file mode 100644
index 00000000..eaddc47f
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/Reactively.ts
@@ -0,0 +1,24 @@
+import { createComputed, createReactive, createWatch } from './RNodeCreator';
+import { RNode } from './RNode';
+
+/**
+ *
+ * interface for a reactive framework
+ */
+export interface Reactively {
+  reactive<T>(initialValue: T): RNode<T>;
+
+  watch(fn: () => void): void;
+
+  computed<T>(fn: () => T): RNode<T>;
+}
+
+export interface Computed<T> {
+  read(): T;
+}
+
+export const reactively: Reactively = {
+  reactive: createReactive,
+  watch: createWatch,
+  computed: createComputed,
+};
diff --git a/packages/inula-reactive/src/reactively/Utils.ts b/packages/inula-reactive/src/reactively/Utils.ts
new file mode 100644
index 00000000..6ce29c87
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/Utils.ts
@@ -0,0 +1,25 @@
+/*
+ * 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');
+}
diff --git a/packages/inula-reactive/src/reactively/proxy/RProxyHandler.ts b/packages/inula-reactive/src/reactively/proxy/RProxyHandler.ts
new file mode 100644
index 00000000..39fb53e8
--- /dev/null
+++ b/packages/inula-reactive/src/reactively/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 '../../inulax/CommonUtils';
+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/src/renderer/ContextSaver.ts b/packages/inula-reactive/src/renderer/ContextSaver.ts
new file mode 100644
index 00000000..77f4b63d
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/ContextSaver.ts
@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+/**
+ * 保存与深度遍历相关的一些context。
+ * 在深度遍历过程中，capture阶段会修改一些全局的值，在bubble阶段会恢复。
+ */
+
+import type { VNode, ContextType } from './Types';
+import type { Container } from '../dom/DOMOperator';
+
+import { getNSCtx } from '../dom/DOMOperator';
+
+// 保存的是“http://www.w3.org/1999/xhtml”或“http://www.w3.org/2000/svg”，
+// 用于识别是使用document.createElement()还是使用document.createElementNS()创建DOM
+let ctxNamespace = '';
+
+// capture阶段设置
+export function setNamespaceCtx(vNode: VNode, dom?: Container) {
+  const nextContext = getNSCtx(ctxNamespace, vNode.type, dom);
+
+  vNode.context = ctxNamespace;
+
+  ctxNamespace = nextContext;
+}
+
+// bubble阶段恢复
+export function resetNamespaceCtx(vNode: VNode) {
+  ctxNamespace = vNode.context;
+}
+
+export function getNamespaceCtx(): string {
+  return ctxNamespace;
+}
+
+export function setContext<T>(providerVNode: VNode, nextValue: T) {
+  const context: ContextType<T> = providerVNode.type._context;
+
+  providerVNode.context = context.value;
+
+  context.value = nextValue;
+}
+
+export function resetContext(providerVNode: VNode) {
+  const context: ContextType<any> = providerVNode.type._context;
+
+  context.value = providerVNode.context;
+}
diff --git a/packages/inula-reactive/src/renderer/ErrorHandler.ts b/packages/inula-reactive/src/renderer/ErrorHandler.ts
new file mode 100644
index 00000000..16895fc3
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/ErrorHandler.ts
@@ -0,0 +1,197 @@
+/*
+ * 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.
+ */
+
+/**
+ * 异常错误处理
+ */
+
+import type { PromiseType, VNode } from './Types';
+import type { Update } from './UpdateHandler';
+
+import { ClassComponent, TreeRoot } from './vnode/VNodeTags';
+import { FlagUtils, Interrupted, DidCapture, InitFlag } from './vnode/VNodeFlags';
+import { newUpdate, UpdateState, pushUpdate } from './UpdateHandler';
+import { launchUpdateFromVNode, tryRenderFromRoot } from './TreeBuilder';
+import { setRootThrowError } from './submit/Submit';
+import { handleSuspenseChildThrowError } from './render/SuspenseComponent';
+import { updateShouldUpdateOfTree } from './vnode/VNodeShouldUpdate';
+import { BuildErrored, setBuildResult } from './GlobalVar';
+
+function consoleError(error: any): void {
+  if (isTest) {
+    // 只打印message为了让测试用例能pass
+    console['error']('The codes throw the error: ' + error.message);
+  } else {
+    console['error'](error);
+  }
+}
+
+function handleRootError(error: any) {
+  // 注意：如果根节点抛出错误，不会销毁整棵树，只打印日志，抛出异常。
+  setRootThrowError(error);
+  consoleError(error);
+}
+
+function createClassErrorUpdate(vNode: VNode, error: any): Update {
+  const update = newUpdate();
+  update.type = UpdateState.Error;
+
+  const getDerivedStateFromError = vNode.type.getDerivedStateFromError;
+  if (typeof getDerivedStateFromError === 'function') {
+    update.content = () => {
+      consoleError(error);
+      return getDerivedStateFromError(error);
+    };
+  }
+
+  const inst = vNode.realNode;
+  if (inst !== null && typeof inst.componentDidCatch === 'function') {
+    update.callback = function callback() {
+      if (typeof getDerivedStateFromError !== 'function') {
+        // 打印错误
+        consoleError(error);
+      }
+
+      // @ts-ignore
+      this.componentDidCatch(error, {
+        componentStack: '',
+      });
+    };
+  }
+  return update;
+}
+export function isPromise(error: any): error is PromiseType<any> {
+  return error !== null && typeof error === 'object' && typeof error.then === 'function';
+}
+// 处理capture和bubble阶段抛出的错误
+export function handleRenderThrowError(sourceVNode: VNode, error: any) {
+  // vNode抛出了异常，标记Interrupted中断
+  FlagUtils.markInterrupted(sourceVNode);
+  // dirtyNodes 不再有效
+  sourceVNode.dirtyNodes = null;
+
+  // error是个promise
+  if (isPromise(error)) {
+    // 抛出异常的节点，向上寻找，是否有suspense组件
+    const foundSuspense = handleSuspenseChildThrowError(sourceVNode.parent!, sourceVNode, error);
+    if (foundSuspense) {
+      return;
+    }
+  }
+
+  // 抛出错误无法作为suspense内容处理（或无suspense来处理），这次当成真的错误来处理
+  setBuildResult(BuildErrored);
+
+  // 向上遍历寻找ClassComponent组件（同时也是Error Boundaries组件） 或者 TreeRoot
+  let vNode: VNode | null = sourceVNode.parent!;
+  do {
+    switch (vNode.tag) {
+      case TreeRoot: {
+        vNode.shouldUpdate = true;
+        launchUpdateFromVNode(vNode);
+        handleRootError(error);
+        return;
+      }
+      case ClassComponent:
+        const ctor = vNode.type;
+        const instance = vNode.realNode;
+        if (
+          (vNode.flags & DidCapture) === InitFlag &&
+          (typeof ctor.getDerivedStateFromError === 'function' ||
+            (instance !== null && typeof instance.componentDidCatch === 'function'))
+        ) {
+          FlagUtils.markShouldCapture(vNode);
+
+          // Class捕捉到异常，触发一次刷新
+          const update = createClassErrorUpdate(vNode, error);
+          pushUpdate(vNode, update);
+
+          launchUpdateFromVNode(vNode);
+
+          // 有异常处理类，把抛出异常的节点的Interrupted标志去掉，继续走正常的绘制流程
+          FlagUtils.removeFlag(sourceVNode, Interrupted);
+
+          return;
+        }
+        break;
+      default:
+        break;
+    }
+    vNode = vNode.parent;
+  } while (vNode !== null);
+}
+
+// 新增一个update，并且触发调度
+function triggerUpdate(vNode, state) {
+  const update = newUpdate();
+  update.content = state;
+  pushUpdate(vNode, update);
+
+  const root = updateShouldUpdateOfTree(vNode);
+  if (root !== null) {
+    tryRenderFromRoot(root);
+  }
+}
+
+// 处理submit阶段的异常
+export function handleSubmitError(vNode: VNode, error: any) {
+  if (vNode.tag === TreeRoot) {
+    handleRootError(error);
+    return;
+  }
+
+  let node = vNode.parent;
+  // 向上遍历
+  while (node !== null) {
+    if (node.tag === TreeRoot) {
+      handleRootError(error);
+      return;
+    } else if (node.tag === ClassComponent) {
+      // 只有 class 组件才可以成为错误边界组件
+      const ctor = node.type;
+      const instance = node.realNode;
+      if (typeof ctor.getDerivedStateFromError === 'function' || typeof instance.componentDidCatch === 'function') {
+        const getDerivedStateFromError = node.type.getDerivedStateFromError;
+        if (typeof getDerivedStateFromError === 'function') {
+          // 打印错误
+          consoleError(error);
+
+          const retState = getDerivedStateFromError(error);
+          if (retState) {
+            // 有返回值
+            // 触发更新
+            triggerUpdate(node, retState);
+          }
+        }
+
+        // 处理componentDidCatch
+        if (instance !== null && typeof instance.componentDidCatch === 'function') {
+          if (typeof getDerivedStateFromError !== 'function') {
+            // 没有getDerivedStateFromError
+            // 打印错误
+            consoleError(error);
+          }
+
+          instance.componentDidCatch(error, {
+            componentStack: '',
+          });
+        }
+
+        return;
+      }
+    }
+    node = node.parent;
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/ExecuteMode.ts b/packages/inula-reactive/src/renderer/ExecuteMode.ts
new file mode 100644
index 00000000..f4cea454
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/ExecuteMode.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 const ByAsync = 'BY_ASYNC';
+export const BySync = 'BY_SYNC';
+export const InRender = 'IN_RENDER';
+export const InEvent = 'IN_EVENT';
+
+type RenderMode = typeof ByAsync | typeof BySync | typeof InRender | typeof InEvent;
+
+// 当前执行模式标记
+let executeMode = {
+  [ByAsync]: false,
+  [BySync]: false,
+  [InRender]: false,
+  [InEvent]: false,
+};
+
+export function changeMode(mode: RenderMode, state = true) {
+  executeMode[mode] = state;
+}
+
+export function checkMode(mode: RenderMode) {
+  return executeMode[mode];
+}
+
+export function isExecuting() {
+  return executeMode[ByAsync] || executeMode[BySync] || executeMode[InRender] || executeMode[InEvent];
+}
+
+export function copyExecuteMode() {
+  return { ...executeMode };
+}
+
+export function setExecuteMode(mode: typeof executeMode) {
+  executeMode = mode;
+}
diff --git a/packages/inula-reactive/src/renderer/GlobalVar.ts b/packages/inula-reactive/src/renderer/GlobalVar.ts
new file mode 100644
index 00000000..f3b0e050
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/GlobalVar.ts
@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from './Types';
+
+// 当前处理的classVNode，用于设置inst.refs
+let processingClassVNode: VNode | null = null;
+export function getProcessingClassVNode(): VNode | null {
+  return processingClassVNode;
+}
+export function setProcessingClassVNode(vNode: VNode | null) {
+  processingClassVNode = vNode;
+}
+
+// capture阶段正在处理的VNode
+let processingVNode: VNode | null = null;
+export function getProcessingVNode() {
+  return processingVNode;
+}
+export function setProcessingVNode(vNode: VNode | null) {
+  processingVNode = vNode;
+}
+
+// 计算出来的刷新节点，不一定是根节点
+let startVNode: VNode | null = null;
+export function getStartVNode(): VNode | null {
+  return startVNode;
+}
+export function setStartVNode(vNode: VNode | null) {
+  startVNode = vNode;
+}
+
+type BuildVNodeResult = 0 | 1 | 2 | 3;
+export const BuildInComplete = 0;
+export const BuildFatalErrored = 1;
+export const BuildErrored = 2;
+export const BuildCompleted = 3;
+// 根节点退出build tree时的状态，如: completed, incomplete, errored, fatalErrored.
+let buildVNodeResult: BuildVNodeResult = BuildInComplete;
+export function setBuildResult(result: BuildVNodeResult) {
+  buildVNodeResult = result;
+}
+
+export function getBuildResult(): BuildVNodeResult {
+  return buildVNodeResult;
+}
diff --git a/packages/inula-reactive/src/renderer/Renderer.ts b/packages/inula-reactive/src/renderer/Renderer.ts
new file mode 100644
index 00000000..849732cf
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/Renderer.ts
@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+import type { Callback, VNode } from './Types';
+import type { Update } from './UpdateHandler';
+
+import { asyncUpdates, syncUpdates, runDiscreteUpdates, launchUpdateFromVNode } from './TreeBuilder';
+import { runAsyncEffects } from './submit/HookEffectHandler';
+import { newUpdate, pushUpdate } from './UpdateHandler';
+
+export { createVNode, createTreeRootVNode } from './vnode/VNodeCreator';
+export { createPortal } from './components/CreatePortal';
+export { asyncUpdates, syncUpdates, runDiscreteUpdates, runAsyncEffects };
+
+export function startUpdate(element: any, treeRoot: VNode, callback?: Callback) {
+  const update: Update = newUpdate();
+  update.content = { element };
+
+  if (typeof callback === 'function') {
+    update.callback = callback;
+  }
+
+  pushUpdate(treeRoot, update);
+
+  launchUpdateFromVNode(treeRoot);
+}
+
+export function getFirstCustomDom(treeRoot?: VNode | null): Element | Text | null {
+  if (treeRoot?.child) {
+    return treeRoot.child.realNode;
+  }
+  return null;
+}
diff --git a/packages/inula-reactive/src/renderer/RootStack.ts b/packages/inula-reactive/src/renderer/RootStack.ts
new file mode 100644
index 00000000..9fec6477
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/RootStack.ts
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+import { VNode } from './vnode/VNode';
+
+const currentRootStack: (VNode | undefined)[] = [];
+let index = -1;
+export function getCurrentRoot() {
+  return currentRootStack[index];
+}
+
+export function pushCurrentRoot(root: VNode) {
+  index++;
+  currentRootStack[index] = root;
+}
+
+export function popCurrentRoot() {
+  const target = currentRootStack[index];
+  currentRootStack[index] = undefined;
+  index--;
+  return target;
+}
diff --git a/packages/inula-reactive/src/renderer/TreeBuilder.ts b/packages/inula-reactive/src/renderer/TreeBuilder.ts
new file mode 100644
index 00000000..4f9a2026
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/TreeBuilder.ts
@@ -0,0 +1,457 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from './Types';
+
+import { callRenderQueueImmediate, pushRenderCallback } from './taskExecutor/RenderQueue';
+import { updateVNode } from './vnode/VNodeCreator';
+import { ContextProvider, DomComponent, DomPortal, TreeRoot } from './vnode/VNodeTags';
+import { FlagUtils, InitFlag, Interrupted, Deletion } from './vnode/VNodeFlags';
+import { captureVNode } from './render/BaseComponent';
+import { checkLoopingUpdateLimit, submitToRender } from './submit/Submit';
+import { runAsyncEffects } from './submit/HookEffectHandler';
+import { handleRenderThrowError } from './ErrorHandler';
+import componentRenders from './render';
+import {
+  BuildCompleted,
+  BuildFatalErrored,
+  BuildInComplete,
+  getBuildResult,
+  getStartVNode,
+  setBuildResult,
+  setProcessingClassVNode,
+  setStartVNode,
+} from './GlobalVar';
+import {
+  ByAsync,
+  BySync,
+  changeMode,
+  checkMode,
+  copyExecuteMode,
+  InEvent,
+  InRender,
+  isExecuting,
+  setExecuteMode,
+} from './ExecuteMode';
+import { resetContext, resetNamespaceCtx, setContext, setNamespaceCtx } from './ContextSaver';
+import {
+  updateChildShouldUpdate,
+  updateParentsChildShouldUpdate,
+  updateShouldUpdateOfTree,
+} from './vnode/VNodeShouldUpdate';
+import { getPathArr } from './utils/vNodePath';
+import { injectUpdater } from '../external/devtools';
+import { popCurrentRoot, pushCurrentRoot } from './RootStack';
+
+// 不可恢复错误
+let unrecoverableErrorDuringBuild: any = null;
+
+// 当前运行的vNode节点
+let processing: VNode | null = null;
+
+export function setProcessing(vNode: VNode | null) {
+  processing = vNode;
+}
+
+// 为重新进行深度遍历做准备
+function resetProcessingVariables(startUpdateVNode: VNode) {
+  // 创建processing
+  processing = updateVNode(startUpdateVNode, startUpdateVNode?.props);
+  setBuildResult(BuildInComplete);
+  unrecoverableErrorDuringBuild = null;
+}
+
+// 收集有变化的节点，在submit阶段继续处理
+function collectDirtyNodes(vNode: VNode, parent: VNode): void {
+  // 将子树和此vNode的所有效果附加到父树的效果列表中，子项的完成顺序会影响副作用顺序。
+  const dirtyNodes = vNode.dirtyNodes;
+  if (dirtyNodes !== null && dirtyNodes.length) {
+    if (parent.dirtyNodes === null) {
+      parent.dirtyNodes = dirtyNodes;
+    } else {
+      parent.dirtyNodes.push(...dirtyNodes);
+      dirtyNodes.length = 0;
+    }
+    vNode.dirtyNodes = null;
+  }
+
+  if (FlagUtils.hasAnyFlag(vNode) && vNode.flags !== Deletion) {
+    if (parent.dirtyNodes === null) {
+      parent.dirtyNodes = [vNode];
+    } else {
+      parent.dirtyNodes.push(vNode);
+    }
+  }
+}
+
+// ============================== 向上冒泡 ==============================
+
+// 尝试完成当前工作单元，然后移动到下一个兄弟工作单元。如果没有更多的同级，请返回父vNode。
+function bubbleVNode(vNode: VNode): void {
+  let node: VNode | null = vNode;
+
+  do {
+    const parent = node.parent;
+
+    if ((node.flags & Interrupted) === InitFlag) {
+      // vNode没有抛出异常
+      componentRenders[node.tag].bubbleRender(node);
+
+      // 设置node的childShouldUpdate属性
+      updateChildShouldUpdate(node);
+
+      if (parent !== null && node !== getStartVNode() && (parent.flags & Interrupted) === InitFlag) {
+        collectDirtyNodes(node, parent);
+      }
+    }
+
+    // 回到了开始遍历的节点
+    if (node === getStartVNode()) {
+      if (node.tag !== TreeRoot) {
+        // 设置父node的childShouldUpdate属性
+        updateParentsChildShouldUpdate(node);
+      }
+
+      processing = null;
+      break;
+    }
+
+    const siblingVNode = node.next;
+    if (siblingVNode !== null) {
+      // 有兄弟vNode
+      processing = siblingVNode;
+      return;
+    }
+
+    // 继续遍历parent
+    node = parent;
+    // 更新processing，抛出异常时可以使用
+    processing = node;
+  } while (node);
+
+  // 修改结果
+  if (getBuildResult() === BuildInComplete) {
+    setBuildResult(BuildCompleted);
+  }
+}
+
+function handleError(root, error): void {
+  if (processing === null || processing.parent === null) {
+    // 这是一个致命的错误，因为没有祖先可以处理它
+    setBuildResult(BuildFatalErrored);
+    unrecoverableErrorDuringBuild = error;
+
+    processing = null;
+    return;
+  }
+
+  // 处理capture和bubble阶段抛出的错误
+  handleRenderThrowError(processing, error);
+
+  bubbleVNode(processing);
+}
+
+// 判断数组中节点的path的idx元素是否都相等
+function isEqualByIndex(idx: number, pathArrays: string[][]) {
+  const first = pathArrays[0][idx];
+  for (let i = 1; i < pathArrays.length; i++) {
+    const pathArr = pathArrays[i];
+    if (idx >= pathArr.length || first !== pathArr[idx]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function getChildByIndex(vNode: VNode, idx: number) {
+  let node = vNode.child;
+  for (let i = 0; i < idx; i++) {
+    // 场景：当组件被销毁，业务若异步（定时器）调用setState修改状态，可能出现路径错误，此处进行保护。
+    if (node === null || node === undefined) {
+      return null;
+    }
+
+    node = node.next;
+  }
+  return node;
+}
+
+// 从多个更新节点中，计算出开始节点。即：找到最近的共同的父辈节点
+export function calcStartUpdateVNode(treeRoot: VNode) {
+  const toUpdateNodes = Array.from(treeRoot.toUpdateNodes!);
+
+  if (toUpdateNodes.length === 0) {
+    return treeRoot;
+  }
+
+  if (toUpdateNodes.length === 1) {
+    const toUpdateNode = toUpdateNodes[0];
+    if (toUpdateNode.isCleared) {
+      return treeRoot;
+    } else {
+      return toUpdateNodes[0];
+    }
+  }
+
+  // 要计算的节点过多，直接返回根节点
+  if (toUpdateNodes.length > 100) {
+    return treeRoot;
+  }
+
+  const pathArrays = toUpdateNodes.map(node => getPathArr(node));
+  // 找出开始不相等的idx
+  let commonPathEndIndex = 0;
+  while (isEqualByIndex(commonPathEndIndex, pathArrays)) {
+    commonPathEndIndex++;
+  }
+  // 得到相等的路径
+  const startNodePath = pathArrays[0].slice(0, commonPathEndIndex);
+
+  let node = treeRoot;
+  for (let i = 1; i < startNodePath.length; i++) {
+    const pathIndex = Number(startNodePath[i]);
+    node = getChildByIndex(node, pathIndex)!;
+    // 路径错误时，回退到从根更新
+    if (node === null) {
+      return treeRoot;
+    }
+  }
+
+  return node;
+}
+
+// 在局部更新时，从上到下恢复父节点的context和PortalStack
+function recoverTreeContext(vNode: VNode) {
+  const contextProviders: VNode[] = [];
+  let parent = vNode.parent;
+  while (parent !== null) {
+    if (parent.tag === ContextProvider) {
+      contextProviders.unshift(parent);
+    }
+    if (parent.tag === DomPortal) {
+      pushCurrentRoot(parent);
+    }
+    parent = parent.parent;
+  }
+
+  contextProviders.forEach(node => {
+    setContext(node, node.props.value);
+  });
+}
+
+// 在局部更新时，从下到上重置父节点的context
+function resetTreeContext(vNode: VNode) {
+  let parent = vNode.parent;
+
+  while (parent !== null) {
+    if (parent.tag === ContextProvider) {
+      resetContext(parent);
+    }
+    if (parent.tag === DomPortal) {
+      popCurrentRoot();
+    }
+    parent = parent.parent;
+  }
+}
+
+// ============================== 深度遍历 ==============================
+function buildVNodeTree(treeRoot: VNode) {
+  const preMode = copyExecuteMode();
+  changeMode(InRender, true);
+
+  // 计算出开始节点
+  // const startVNode = calcStartUpdateVNode(treeRoot);
+  // 缓存起来
+  setStartVNode(treeRoot);
+
+  // 清空toUpdateNodes
+  treeRoot.toUpdateNodes?.clear();
+
+  // if (startVNode.tag !== TreeRoot) {
+  //   // 不是根节点
+  //   // 设置namespace，用于createElement
+  //   let parent = startVNode.parent;
+  //   while (parent !== null) {
+  //     const tag = parent.tag;
+  //     if (tag === DomComponent) {
+  //       break;
+  //     } else if (tag === TreeRoot || tag === DomPortal) {
+  //       break;
+  //     }
+  //     parent = parent.parent;
+  //   }
+  //
+  //   // 当在componentWillUnmount中调用setState，parent可能是null，因为startVNode会被clear
+  //   if (parent !== null) {
+  //     resetNamespaceCtx(parent);
+  //     setNamespaceCtx(parent, parent.realNode);
+  //   }
+  //
+  //   // 恢复父节点的context
+  //   recoverTreeContext(startVNode);
+  // }
+
+  // 重置环境变量，为重新进行深度遍历做准备
+  resetProcessingVariables(treeRoot);
+  // devProps 用于插件手动更新props值
+  // if (startVNode.devProps !== undefined) {
+  //   startVNode.props = startVNode.devProps;
+  //   startVNode.devProps = undefined;
+  // }
+
+  while (processing !== null) {
+    try {
+      // 捕获创建 vNodes
+      const next = captureVNode(processing);
+
+      if (next === null) {
+        // 如果没有子节点，那么就完成当前节点，开始冒泡
+        bubbleVNode(processing);
+      } else {
+        processing = next;
+      }
+    } catch (thrownValue) {
+      handleError(treeRoot, thrownValue);
+    }
+  }
+  // if (startVNode.tag !== TreeRoot) {
+  //   // 不是根节点
+  //   // 恢复父节点的context
+  //   resetTreeContext(startVNode);
+  // }
+
+  setProcessingClassVNode(null);
+
+  setExecuteMode(preMode);
+}
+
+// 总体任务入口
+function renderFromRoot(treeRoot) {
+  runAsyncEffects();
+  pushCurrentRoot(treeRoot);
+
+  // 1. 构建vNode树
+  buildVNodeTree(treeRoot);
+
+  // 致命错误直接抛出
+  if (getBuildResult() === BuildFatalErrored) {
+    throw unrecoverableErrorDuringBuild;
+  }
+
+  // 2. 提交变更
+  submitToRender(treeRoot);
+
+  popCurrentRoot();
+  if (window.__INULA_DEV_HOOK__) {
+    const hook = window.__INULA_DEV_HOOK__;
+    // injector.js 可能在 Inula 代码之后加载，此时无 __INULA_DEV_HOOK__ 全局变量
+    // Inula 代码初次加载时不会初始化 helper
+    if (!hook.isInit) {
+      injectUpdater();
+    }
+    hook.addIfNotInclude(treeRoot);
+    hook.send(treeRoot);
+  }
+  return null;
+}
+
+// 尝试去渲染，已有任务就跳出
+export function tryRenderFromRoot(treeRoot: VNode) {
+  if (treeRoot.shouldUpdate && treeRoot.task === null) {
+    // 任务放进queue，但是调度开始还是异步的
+    treeRoot.task = pushRenderCallback(renderFromRoot.bind(null, treeRoot));
+  }
+}
+
+// 发起更新
+export function launchUpdateFromVNode(vNode: VNode) {
+  // 检查循环调用
+  checkLoopingUpdateLimit();
+
+  // 从当前vNode向上遍历到根节点，修改vNode.shouldUpdate和parent.childShouldUpdate
+  const treeRoot = updateShouldUpdateOfTree(vNode);
+  if (treeRoot === null) {
+    // 可能场景是：the componentWillUnmount method 或 useEffect cleanup function 方法中写异步任务，并且修改state。
+    // 因为异步回调的时候root都可能被清除了。
+    return;
+  }
+
+  // 保存待刷新的节点
+  treeRoot.toUpdateNodes?.add(vNode);
+
+  if (
+    checkMode(BySync) && // 非批量
+    !checkMode(InRender)
+  ) {
+    // 不是渲染阶段触发
+
+    // 业务直接调用Inula.render的时候会进入这个分支，同步渲染。
+    // 不能改成下面的异步，否则会有时序问题，因为业务可能会依赖这个渲染的完成。
+    renderFromRoot(treeRoot);
+  } else {
+    tryRenderFromRoot(treeRoot);
+
+    if (!isExecuting()) {
+      // 同步执行
+      callRenderQueueImmediate();
+    }
+  }
+}
+
+// ============================== InulaDOM使用 ==============================
+export function runDiscreteUpdates() {
+  if (checkMode(ByAsync) || checkMode(InRender)) {
+    // 已经渲染，不能再同步执行待工作的任务，有可能是被生命周期或effect触发的事件导致的，如el.focus()
+    return;
+  }
+
+  runAsyncEffects();
+}
+
+export function asyncUpdates<P, R>(fn: (a: P) => R, a: P): R;
+export function asyncUpdates<R>(fn: () => R): R;
+export function asyncUpdates(fn, ...param) {
+  const preMode = copyExecuteMode();
+  changeMode(InEvent, true);
+  try {
+    return fn(...param);
+  } finally {
+    setExecuteMode(preMode);
+    if (!isExecuting()) {
+      // 同步执行
+      callRenderQueueImmediate();
+    }
+  }
+}
+
+export function syncUpdates<P, R>(fn: (a: P) => R, a: P): R;
+export function syncUpdates<R>(fn: () => R): R;
+export function syncUpdates(fn) {
+  const preMode = copyExecuteMode();
+  // 去掉异步状态，添加同步状态
+  changeMode(ByAsync, false);
+  changeMode(BySync, true);
+
+  try {
+    return fn();
+  } finally {
+    setExecuteMode(preMode);
+    if (!isExecuting()) {
+      // 同步执行
+      callRenderQueueImmediate();
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/Types.ts b/packages/inula-reactive/src/renderer/Types.ts
new file mode 100644
index 00000000..776e6123
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/Types.ts
@@ -0,0 +1,157 @@
+/*
+ * 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.
+ */
+
+import { BELONG_CLASS_VNODE_KEY } from './vnode/VNode';
+import { VNodeTag } from './vnode/VNodeTags';
+
+export { VNode } from './vnode/VNode';
+
+type Trigger<A> = (A) => void;
+
+export type UseStateHookType = {
+  useState<S>(initialState: (() => S) | S): [S, Trigger<((S) => S) | S>];
+};
+export type UseReducerHookType = {
+  useReducer<S, P, A>(reducer: (S, A) => S, initArg: P, init?: (P) => S): [S, Trigger<A>];
+};
+export type UseContextHookType = { useContext<T>(context: ContextType<T>): T };
+
+export type JSXElement = {
+  vtype: any;
+  src: any;
+  type: any;
+  key: any;
+  ref: any;
+  props: any;
+  // @ts-ignore
+  [BELONG_CLASS_VNODE_KEY]: any;
+};
+
+export type ProviderType<T> = {
+  vtype: number;
+  _context: ContextType<T>;
+};
+
+export type ContextType<T> = {
+  vtype: number;
+  Consumer: ContextType<T> | null;
+  Provider: ProviderType<T> | null;
+  value: T;
+};
+
+export type PortalType = {
+  vtype: number;
+  key: null | string;
+  realNode: any;
+  children: any;
+};
+
+export type RefType = {
+  current: any;
+};
+
+export interface PromiseType<R> {
+  then<U>(
+    onFulfill: (value: R) => void | PromiseType<U> | U,
+    onReject: (error: any) => void | PromiseType<U> | U
+  ): void | PromiseType<U>;
+}
+
+export interface SuspenseState {
+  promiseSet: Set<PromiseType<any>> | null; // suspense组件的promise列表
+  childStatus: string;
+  oldChildStatus: string; // 上一次Suspense的Children是否显示
+  didCapture: boolean; // suspense是否捕获了异常
+  promiseResolved: boolean; // suspense的promise是否resolve
+}
+
+export type Source = {
+  fileName: string;
+  lineNumber: number;
+};
+
+export type Callback = () => void;
+
+export type VNode = {
+  tag: VNodeTag,
+  key: string | null, // 唯一标识符
+  props: any, // 传给组件的props的值，类组件包含defaultProps，Lazy组件不包含
+  type: any,
+  realNode: any, // 如果是类，则存放实例；如果是div这种，则存放真实DOM；
+
+  // 关系结构
+  parent: VNode | null, // 父节点
+  child: VNode | null, // 子节点
+  next: VNode | null, // 兄弟节点
+  cIndex, // 节点在children数组中的位置
+  eIndex, // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致
+
+  ref: RefType | ((handle: any) => void) | null, // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上
+  oldProps: any,
+
+  // 是否已经被从树上移除
+  isCleared,
+  changeList: any, // DOM的变更列表
+  effectList: any[] | null, // useEffect 的更新数组
+  updates: any[] | null, // TreeRoot和ClassComponent使用的更新数组
+  stateCallbacks: any[] | null, // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组
+  isForceUpdate: boolean, // 是否使用强制更新
+  isSuspended, // 是否被suspense打断更新
+  state: any, // ClassComponent和TreeRoot的状态
+  hooks: Array<Hook<any, any>> | null, // 保存hook
+  depContexts: Array<ContextType<any>> | null, // FunctionComponent和ClassComponent对context的依赖列表
+  isDepContextChange: boolean, // context是否变更
+  dirtyNodes: Array<VNode> | null, // 需要改动的节点数组
+  shouldUpdate,
+  childShouldUpdate,
+  task: any,
+
+  // 使用这个变量来记录修改前的值，用于恢复。
+  context: any,
+  // 因为LazyComponent会修改tag和type属性，为了能识别，增加一个属性
+  isLazyComponent: boolean,
+
+  // 因为LazyComponent会修改type属性，为了在diff中判断是否可以复用，需要增加一个lazyType
+  lazyType: any,
+  flags,
+  clearChild: VNode | null,
+  // one tree相关属性
+  isCreated,
+  oldHooks: Array<Hook<any, any>> | null, // 保存上一次执行的hook
+  oldState: any,
+  oldRef: RefType | ((handle: any) => void) | null,
+  oldChild: VNode | null,
+  promiseResolve: boolean, // suspense的promise是否resolve
+  devProps: any, // 用于dev插件临时保存更新props值
+  suspenseState: SuspenseState | null,
+
+  path: string, // 保存从根到本节点的路径
+
+  // 根节点数据
+  toUpdateNodes: Set<VNode> | null, // 保存要更新的节点
+  delegatedEvents: Set<string>,
+
+  belongClassVNode: VNode | null, // 记录JSXElement所属class vNode，处理ref的时候使用
+
+  // 状态管理器InulaX使用
+  isStoreChange: boolean,
+  observers: Set<any> | null, // 记录这个函数组件/类组件依赖哪些Observer
+  classComponentWillUnmount: Function | null, // InulaX会在classComponentWillUnmount中清除对VNode的引入用
+  src: Source | null, // 节点所在代码位置
+
+  // reactive
+  attrRContexts: Set<any> | null,
+  compRContext: any | null,
+}
diff --git a/packages/inula-reactive/src/renderer/UpdateHandler.ts b/packages/inula-reactive/src/renderer/UpdateHandler.ts
new file mode 100644
index 00000000..3e906082
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/UpdateHandler.ts
@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+
+import type { VNode, Callback } from './Types';
+import { FlagUtils, ShouldCapture } from './vnode/VNodeFlags';
+
+export type Update = {
+  type: 'Update' | 'Override' | 'ForceUpdate' | 'Error';
+  content: any;
+  callback: Callback | null;
+};
+
+export type Updates = Array<Update> | null;
+
+export enum UpdateState {
+  Update = 'Update',
+  Override = 'Override',
+  ForceUpdate = 'ForceUpdate',
+  Error = 'Error',
+}
+
+// 创建update对象
+export function newUpdate(): Update {
+  return {
+    type: UpdateState.Update, // 更新的类型
+    content: null, // ClassComponent的content是setState第一个参数，TreeRoot的content是InulaDOM.render的第一个参数
+    callback: null, // setState的第二个参数，InulaDOM.render的第三个参数
+  };
+}
+
+// 将update对象加入updates
+export function pushUpdate(vNode: VNode, update: Update) {
+  const updates = vNode.updates;
+  if (updates !== null) {
+    updates.push(update);
+  } else {
+    vNode.updates = [update];
+  }
+}
+
+// 根据update获取新的state
+function calcState(vNode: VNode, update: Update, inst: any, oldState: any, props: any): any {
+  switch (update.type) {
+    case UpdateState.Override:
+      const content = update.content;
+      return typeof content === 'function' ? content.call(inst, oldState, props) : content;
+    case UpdateState.ForceUpdate:
+      vNode.isForceUpdate = true;
+      return oldState;
+    case UpdateState.Error:
+      FlagUtils.removeFlag(vNode, ShouldCapture);
+      FlagUtils.markDidCapture(vNode);
+    case UpdateState.Update:
+      const updateContent = update.content;
+      const newState = typeof updateContent === 'function' ? updateContent.call(inst, oldState, props) : updateContent;
+      return newState === null || newState === undefined ? oldState : { ...oldState, ...newState };
+    default:
+      return oldState;
+  }
+}
+
+// 收集callback
+function collectCallbacks(vNode: VNode, update: Update) {
+  if (update.callback !== null) {
+    FlagUtils.markCallback(vNode);
+    if (vNode.stateCallbacks === null) {
+      vNode.stateCallbacks = [update.callback];
+    } else {
+      vNode.stateCallbacks.push(update.callback);
+    }
+  }
+}
+
+// 遍历处理updates, 更新vNode的state
+function calcUpdates(vNode: VNode, props: any, inst: any, toProcessUpdates: Updates) {
+  let newState = vNode.state;
+
+  toProcessUpdates?.forEach(update => {
+    newState = calcState(vNode, update, inst, newState, props);
+    collectCallbacks(vNode, update);
+  });
+
+  vNode.shouldUpdate = false;
+  vNode.state = newState;
+}
+
+// 将待更新的队列，添加到updates的尾部
+export function processUpdates(vNode: VNode, inst: any, props: any): void {
+  const updates: Updates = vNode.updates;
+  vNode.isForceUpdate = false;
+
+  if (updates !== null) {
+    const toProcessUpdates = [...updates];
+    updates.length = 0;
+    if (toProcessUpdates.length) {
+      calcUpdates(vNode, props, inst, toProcessUpdates);
+    }
+  }
+}
+
+export function pushForceUpdate(vNode: VNode) {
+  const update = newUpdate();
+  update.type = UpdateState.ForceUpdate;
+  pushUpdate(vNode, update);
+}
diff --git a/packages/inula-reactive/src/renderer/components/BaseClassComponent.ts b/packages/inula-reactive/src/renderer/components/BaseClassComponent.ts
new file mode 100644
index 00000000..b8923785
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/BaseClassComponent.ts
@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+import { Callback } from '../Types';
+import type { ComponentLifecycle, KVObject, InulaNode, Context, CSSProperties } from '../../types';
+
+/**
+ * Component的api setState和forceUpdate在实例生成阶段实现
+ */
+
+// eslint-disable-next-line
+interface Component<P = KVObject, S = KVObject, SS = any, C = any> extends ComponentLifecycle<P, S, SS> {
+  forceUpdate(callback?: () => void): void;
+
+  render(): InulaNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class Component<P = KVObject, S = KVObject, SS = any, C = any> {
+  static contextType?: Context<any> | undefined;
+  context: C | undefined;
+
+  readonly props: Readonly<P>;
+  state: Readonly<S>;
+
+  refs: {
+    [key: string]: Component<any>;
+  };
+  isReactComponent: boolean;
+
+  constructor(props: P, context?: C) {
+    this.props = props;
+    this.context = context;
+  }
+
+  setState<K extends keyof S>(
+    state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null) | Pick<S, K> | S | null,
+    callback?: Callback
+  ) {
+    if (isDev) {
+      console.error('Can not call `this.setState` in the constructor of class component, it will do nothing');
+    }
+  }
+}
+
+// 兼容三方件 react-lifecycles-compat，它会读取 isReactComponent 属性值，不添加会导致 eview-ui 官网白屏
+Component.prototype.isReactComponent = true;
+
+/**
+ * 支持PureComponent
+ */
+class PureComponent<P, S, SS, C = any> extends Component<P, S, SS> {
+  constructor(props: P, context: C) {
+    super(props, context);
+  }
+}
+
+export { Component, PureComponent };
diff --git a/packages/inula-reactive/src/renderer/components/CreatePortal.ts b/packages/inula-reactive/src/renderer/components/CreatePortal.ts
new file mode 100644
index 00000000..f1a3f3b3
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/CreatePortal.ts
@@ -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.
+ */
+
+import { TYPE_PORTAL } from '../../external/JSXElementType';
+import type { PortalType } from '../Types';
+import { InulaNode, InulaPortal } from '../../types';
+
+export function createPortal(
+  children: InulaNode,
+  realNode: Element | DocumentFragment,
+  key?: null | string
+): InulaPortal;
+export function createPortal(children: any, realNode: any, key = ''): PortalType | InulaPortal {
+  return {
+    vtype: TYPE_PORTAL,
+    key: key == '' ? '' : '' + key,
+    children,
+    realNode,
+  };
+}
diff --git a/packages/inula-reactive/src/renderer/components/CreateRef.ts b/packages/inula-reactive/src/renderer/components/CreateRef.ts
new file mode 100644
index 00000000..092131fa
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/CreateRef.ts
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+import { RefObject } from '../hooks/HookType';
+
+export function createRef<T>(): RefObject<T> {
+  return {
+    current: null,
+  };
+}
diff --git a/packages/inula-reactive/src/renderer/components/ForwardRef.ts b/packages/inula-reactive/src/renderer/components/ForwardRef.ts
new file mode 100644
index 00000000..57941f68
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/ForwardRef.ts
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+import { TYPE_FORWARD_REF } from '../../external/JSXElementType';
+import { ExoticComponent, ForwardRefRenderFunc, PropsOmitRef, RefAttributes } from '../../types';
+
+export function forwardRef<T, P = any>(
+  render: ForwardRefRenderFunc<T, P>
+): ExoticComponent<PropsOmitRef<P>> & RefAttributes<T>;
+export function forwardRef(render: (...arg: any) => any): unknown {
+  const forwardRefJSXElement = {
+    vtype: TYPE_FORWARD_REF,
+    $$typeof: TYPE_FORWARD_REF, // 规避三方件hoist-non-react-statics中，通过$$typeof获取类型，但获取不到，导致render被覆盖
+    render,
+  };
+
+  // 控制vtype不能修改，规避三方件hoist-non-react-statics修改vtype导致问题
+  Object.defineProperty(forwardRefJSXElement, 'vtype', {
+    configurable: false,
+    writable: false,
+  });
+
+  return forwardRefJSXElement;
+}
diff --git a/packages/inula-reactive/src/renderer/components/Lazy.ts b/packages/inula-reactive/src/renderer/components/Lazy.ts
new file mode 100644
index 00000000..ce302cc0
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/Lazy.ts
@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+import type { PromiseType } from '../Types';
+
+import { TYPE_LAZY } from '../../external/JSXElementType';
+import { ComponentType, LazyComponent as LazyComponentType } from '../../types';
+
+enum LayStatus {
+  UnProcessed = 'UnProcessed',
+  Pending = 'Pending',
+  Fulfilled = 'Fulfilled',
+  Rejected = 'Rejected',
+}
+
+type LazyContent<T> = {
+  _status: string;
+  _value: () => PromiseType<{ default: T }> | PromiseType<T> | T | any;
+};
+
+export type LazyComponent<T, P> = {
+  vtype: number;
+  _content: P;
+  _load: (content: P) => T;
+};
+
+// lazyContent随着阶段改变，_value改变:
+// 1. 未初始化 -> promiseCtor: () => promise
+// 2. pending -> promise
+// 3. fulfilled -> module
+// 4. rejected -> error
+function lazyLoader<T>(lazyContent: LazyContent<T>): any {
+  if (lazyContent._status === LayStatus.UnProcessed) {
+    // 执行动态导入组件import
+    const promise = lazyContent._value();
+    lazyContent._status = LayStatus.Pending;
+    lazyContent._value = promise;
+    promise.then(
+      module => {
+        if (lazyContent._status === LayStatus.Pending) {
+          const defaultExport = module.default;
+          lazyContent._status = LayStatus.Fulfilled;
+          lazyContent._value = defaultExport;
+        }
+      },
+      error => {
+        if (lazyContent._status === LayStatus.Pending) {
+          lazyContent._status = LayStatus.Rejected;
+          lazyContent._value = error;
+        }
+      }
+    );
+  }
+  if (lazyContent._status === LayStatus.Fulfilled) {
+    return lazyContent._value;
+  } else {
+    throw lazyContent._value;
+  }
+}
+
+export function lazy<T extends ComponentType<any>>(promiseCtor: () => Promise<{ default: T }>): LazyComponentType<T>;
+export function lazy<T>(
+  promiseCtor: () => PromiseType<{ default: T }> | Promise<{ default: T }>
+): LazyComponent<T, LazyContent<T>> | LazyComponentType<any> {
+  return {
+    vtype: TYPE_LAZY,
+    _content: {
+      _status: LayStatus.UnProcessed,
+      _value: promiseCtor,
+    },
+    _load: lazyLoader,
+  };
+}
diff --git a/packages/inula-reactive/src/renderer/components/Memo.ts b/packages/inula-reactive/src/renderer/components/Memo.ts
new file mode 100644
index 00000000..5dde8469
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/Memo.ts
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { TYPE_MEMO } from '../../external/JSXElementType';
+import { ComponentType, ExoticComponent, FunctionComponent, MemoComponent } from '../../types';
+
+export function memo<Props extends Record<string, any>>(
+  type: FunctionComponent<Props>,
+  compare?: (oldProps: Readonly<Props>, newProps: Readonly<Props>) => boolean
+): ExoticComponent<Props>;
+export function memo<T extends ComponentType<any>>(
+  type: T,
+  compare?: (oldProps: any, newProps: any) => boolean
+): MemoComponent<T>;
+export function memo<Props>(type, compare?: (oldProps: Props, newProps: Props) => boolean): unknown {
+  const memoJSXElement = {
+    vtype: TYPE_MEMO,
+    $$typeof: TYPE_MEMO, // 规避三方件hoist-non-react-statics中，通过$$typeof获取类型，但获取不到，导致type被覆盖
+    type: type,
+    compare: compare === undefined ? null : compare,
+  };
+
+  // 控制vtype不能修改，规避三方件hoist-non-react-statics修改vtype导致问题
+  Object.defineProperty(memoJSXElement, 'vtype', {
+    configurable: false,
+    writable: false,
+  });
+
+  return memoJSXElement;
+}
diff --git a/packages/inula-reactive/src/renderer/components/context/Context.ts b/packages/inula-reactive/src/renderer/components/context/Context.ts
new file mode 100644
index 00000000..0c421c35
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/context/Context.ts
@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+
+import type { VNode, ContextType } from '../../Types';
+import { getHookStage } from '../../hooks/HookStage';
+import { throwNotInFuncError } from '../../hooks/BaseHook';
+
+// 重置依赖
+export function resetDepContexts(vNode: VNode): void {
+  vNode.depContexts = null;
+}
+
+// 收集依赖
+function collectDeps<T>(vNode: VNode, context: ContextType<T>) {
+  const depContexts = vNode.depContexts;
+  if (depContexts === null) {
+    vNode.depContexts = [context];
+  } else {
+    vNode.isDepContextChange = false;
+    if (!depContexts.includes(context)) {
+      depContexts.push(context);
+    }
+  }
+}
+
+export function getNewContext<T>(vNode: VNode, ctx: ContextType<T>, isUseContext = false): T {
+  // 如果来自于useContext，则需要在函数组件中调用
+  if (isUseContext && getHookStage() === null) {
+    throwNotInFuncError();
+  }
+
+  // 调用到这个方法，说明当前vNode依赖了这个context，所以需要收集起来
+  collectDeps(vNode, ctx);
+
+  return ctx.value;
+}
diff --git a/packages/inula-reactive/src/renderer/components/context/CreateContext.ts b/packages/inula-reactive/src/renderer/components/context/CreateContext.ts
new file mode 100644
index 00000000..184d7741
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/components/context/CreateContext.ts
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+import type { ContextType } from '../../Types';
+import { TYPE_PROVIDER, TYPE_CONTEXT } from '../../../external/JSXElementType';
+import { Context } from '../../../types';
+
+export function createContext<T>(val: T): Context<T>;
+export function createContext<T>(val: T): ContextType<T> | Context<T> {
+  const context: ContextType<T> = {
+    vtype: TYPE_CONTEXT,
+    value: val,
+    Provider: null,
+    Consumer: null,
+  };
+
+  context.Provider = {
+    vtype: TYPE_PROVIDER,
+    _context: context,
+  };
+
+  context.Consumer = context;
+
+  return context;
+}
diff --git a/packages/inula-reactive/src/renderer/diff/DiffTools.ts b/packages/inula-reactive/src/renderer/diff/DiffTools.ts
new file mode 100644
index 00000000..13af133c
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/diff/DiffTools.ts
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+import type { VNode, JSXElement } from '../Types';
+
+// 当前vNode和element是同样的类型
+// LazyComponent 会修改type的类型，所以特殊处理这种类型
+export const isSameType = (vNode: VNode, ele: JSXElement) =>
+  vNode.type === ele.type || (vNode.isLazyComponent && vNode.lazyType === ele.type);
+
+export function isTextType(newChild: any) {
+  return typeof newChild === 'string' || typeof newChild === 'number';
+}
+
+export function isIteratorType(newChild: any) {
+  return (typeof Symbol === 'function' && newChild[Symbol.iterator]) || newChild['@@iterator'];
+}
+
+export function getIteratorFn(maybeIterable: any): () => Iterator<any> {
+  return maybeIterable[Symbol.iterator] || maybeIterable['@@iterator'];
+}
+
+export function isObjectType(newChild: any) {
+  return typeof newChild === 'object' && newChild !== null;
+}
diff --git a/packages/inula-reactive/src/renderer/diff/nodeDiffComparator.ts b/packages/inula-reactive/src/renderer/diff/nodeDiffComparator.ts
new file mode 100644
index 00000000..c3bfbc7c
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/diff/nodeDiffComparator.ts
@@ -0,0 +1,770 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import { FlagUtils } from '../vnode/VNodeFlags';
+import { TYPE_COMMON_ELEMENT, TYPE_FRAGMENT, TYPE_PORTAL } from '../../external/JSXElementType';
+import { ReactiveComponent, DomText, DomPortal, Fragment, DomComponent } from '../vnode/VNodeTags';
+import {
+  updateVNode,
+  createVNodeFromElement,
+  createFragmentVNode,
+  createPortalVNode,
+  createDomTextVNode,
+  createReactiveVNode,
+} from '../vnode/VNodeCreator';
+import { isSameType, getIteratorFn, isTextType, isIteratorType, isObjectType } from './DiffTools';
+import { travelChildren } from '../vnode/VNodeUtils';
+import { markVNodePath } from '../utils/vNodePath';
+import { BELONG_CLASS_VNODE_KEY } from '../vnode/VNode';
+import { Operation } from '../../reactive/DiffUtils';
+import { isReactiveProxy, isReactiveObj, getRNodeFromProxy } from '../../reactive/Utils';
+
+enum DiffCategory {
+  TEXT_NODE = 'TEXT_NODE',
+  OBJECT_NODE = 'OBJECT_NODE',
+  ARR_NODE = 'ARR_NODE',
+}
+
+// 检查是不是被 FRAGMENT 包裹
+function isNoKeyFragment(child: any) {
+  return child != null && child.type === TYPE_FRAGMENT && child.key === null;
+}
+
+// 清除单个节点
+function deleteVNode(parentNode: VNode, delVNode: VNode): void {
+  FlagUtils.setDeletion(delVNode);
+  if (parentNode.dirtyNodes === null) {
+    parentNode.dirtyNodes = [delVNode];
+    return;
+  }
+  parentNode.dirtyNodes.push(delVNode);
+}
+
+// 清除多个节点
+function deleteVNodes(parentVNode: VNode, startDelVNode: VNode | null, endVNode?: VNode): void {
+  let node = startDelVNode;
+
+  while (node !== null) {
+    if (node === endVNode) {
+      return;
+    }
+
+    deleteVNode(parentVNode, node);
+
+    node = node.next;
+  }
+}
+
+function checkCanReuseNode(oldNode: VNode | null, newChild: any, newNodeIdx: number): boolean {
+  if (newChild === null) {
+    return false;
+  }
+
+  const oldKey = oldNode !== null ? oldNode.key : null;
+  if (isTextType(newChild)) {
+    return oldKey === null;
+  }
+
+  if (isObjectType(newChild)) {
+    if (Array.isArray(newChild) || isIteratorType(newChild)) {
+      return oldKey === null;
+    }
+    if (newChild.vtype === TYPE_COMMON_ELEMENT || newChild.vtype === TYPE_PORTAL) {
+      // key存在时用key判断复用
+      if (oldKey !== null || newChild.key !== null) {
+        return oldKey === newChild.key;
+      } else {
+        // 新旧节点的index应该相同才能复用，null会影响位置
+        return oldNode?.eIndex === newNodeIdx;
+      }
+    }
+  }
+
+  return false;
+}
+
+function getNodeType(newChild: any): string | null {
+  if (newChild === null) {
+    return null;
+  }
+  if (isTextType(newChild)) {
+    return DiffCategory.TEXT_NODE;
+  }
+  if (isObjectType(newChild)) {
+    if (isReactiveObj(newChild)) {
+      return DiffCategory.REACTIVE_NODE;
+    }
+    if (Array.isArray(newChild) || isIteratorType(newChild)) {
+      return DiffCategory.ARR_NODE;
+    }
+    if (newChild.vtype === TYPE_COMMON_ELEMENT || newChild.vtype === TYPE_PORTAL) {
+      return DiffCategory.OBJECT_NODE;
+    }
+  }
+  return null;
+}
+
+// 设置vNode的flag
+function setVNodeAdditionFlag(newNode: VNode, lastPosition: number): number {
+  let position = lastPosition;
+
+  if (newNode.isCreated || newNode.eIndex < lastPosition) {
+    // 位置 小于 上一个复用的位置
+    // 标记为新增
+    FlagUtils.setAddition(newNode);
+  } else {
+    // 复用
+    position = newNode.eIndex;
+  }
+
+  return position;
+}
+
+// 获取新节点
+function getNewNode(parentNode: VNode, newChild: any, oldNode: VNode | null) {
+  const newNodeType = getNodeType(newChild);
+  if (newNodeType === null) {
+    return null;
+  }
+
+  let resultNode: VNode | null = null;
+  switch (newNodeType) {
+    case DiffCategory.TEXT_NODE: {
+      if (oldNode === null || oldNode.tag !== DomText) {
+        resultNode = createDomTextVNode(String(newChild));
+      } else {
+        resultNode = updateVNode(oldNode, String(newChild));
+      }
+      break;
+    }
+    case DiffCategory.ARR_NODE: {
+      if (oldNode === null || oldNode.tag !== Fragment) {
+        resultNode = createFragmentVNode(null, newChild);
+      } else {
+        resultNode = updateVNode(oldNode, newChild);
+      }
+      break;
+    }
+    case DiffCategory.REACTIVE_NODE: {
+      if (oldNode === null || oldNode.tag !== ReactiveComponent) {
+        resultNode = createReactiveVNode(newChild);
+      } else {
+        resultNode = updateVNode(oldNode, newChild);
+      }
+      break;
+    }
+    case DiffCategory.OBJECT_NODE: {
+      if (newChild.vtype === TYPE_COMMON_ELEMENT) {
+        if (newChild.type === TYPE_FRAGMENT) {
+          if (oldNode === null || oldNode.tag !== Fragment) {
+            const key = oldNode !== null ? oldNode.key : newChild.key;
+            resultNode = createFragmentVNode(key, newChild.props.children);
+          } else {
+            resultNode = updateVNode(oldNode, newChild);
+          }
+          break;
+        }
+
+        if (oldNode === null || !isSameType(oldNode, newChild)) {
+          resultNode = createVNodeFromElement(newChild);
+          resultNode.ref = newChild.ref;
+          resultNode[BELONG_CLASS_VNODE_KEY] = newChild[BELONG_CLASS_VNODE_KEY];
+        } else {
+          resultNode = updateVNode(oldNode, newChild.props);
+          resultNode.ref = newChild.ref;
+          resultNode[BELONG_CLASS_VNODE_KEY] = newChild[BELONG_CLASS_VNODE_KEY];
+        }
+        break;
+      } else if (newChild.vtype === TYPE_PORTAL) {
+        if (oldNode === null || oldNode.tag !== DomPortal || oldNode.realNode !== newChild.realNode) {
+          resultNode = createPortalVNode(newChild);
+        } else {
+          resultNode = updateVNode(oldNode, newChild.children || []);
+        }
+        break;
+      }
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  if (resultNode) {
+    resultNode.parent = parentNode;
+    resultNode.next = null;
+  }
+
+  return resultNode;
+}
+
+function transRightChildrenToArray(child) {
+  const rightChildrenArray: VNode[] = [];
+
+  travelChildren(child, node => {
+    rightChildrenArray.push(node);
+  });
+
+  return rightChildrenArray;
+}
+
+function transLeftChildrenToMap(startChild: VNode, rightEndVNode: VNode | null): Map<string | number, VNode> {
+  const leftChildrenMap: Map<string | number, VNode> = new Map();
+
+  travelChildren(
+    startChild,
+    node => {
+      leftChildrenMap.set(node.key !== null ? node.key : node.eIndex, node);
+    },
+    node => node === rightEndVNode
+  );
+
+  return leftChildrenMap;
+}
+
+function getOldNodeFromMap(nodeMap: Map<string | number, VNode>, newIdx: number, newChild: any) {
+  if (isTextType(newChild)) {
+    return nodeMap.get(newIdx) || null;
+  }
+  if (isObjectType(newChild)) {
+    if (Array.isArray(newChild) || isIteratorType(newChild)) {
+      return nodeMap.get(newIdx) || null;
+    }
+    if (newChild.vtype === TYPE_COMMON_ELEMENT || newChild.vtype === TYPE_PORTAL) {
+      return nodeMap.get(newChild.key === null ? newIdx : newChild.key) || null;
+    }
+  }
+  return null;
+}
+
+// 设置vNode中的cIndex属性，cIndex是节点在children中的位置
+function setVNodesCIndex(startChild: VNode | null, startIdx: number) {
+  let node: VNode | null = startChild;
+  let idx = startIdx;
+
+  while (node !== null) {
+    node.cIndex = idx;
+    markVNodePath(node);
+    node = node.next;
+    idx++;
+  }
+}
+
+// diff数组类型的节点，核心算法
+function diffArrayNodesHandler(parentNode: VNode, firstChild: VNode | null, newChildren: Array<any>): VNode | null {
+  let resultingFirstChild: VNode | null = null;
+
+  let prevNewNode: VNode | null = null;
+
+  let oldNode = firstChild;
+  let nextOldNode: VNode | null = null;
+
+  let theLastPosition = 0;
+  // 从左边开始的位置
+  let leftIdx = 0;
+
+  function appendNode(newNode: VNode) {
+    if (prevNewNode === null) {
+      resultingFirstChild = newNode;
+      newNode.cIndex = 0;
+    } else {
+      prevNewNode.next = newNode;
+      newNode.cIndex = prevNewNode.cIndex + 1;
+    }
+    markVNodePath(newNode);
+    prevNewNode = newNode;
+  }
+
+  let canBeReuse;
+  let newNode;
+  // 1. 从左侧开始比对currentVNode和newChildren，若不能复用则跳出循环
+  for (; oldNode !== null && leftIdx < newChildren.length; leftIdx++) {
+    if (oldNode.eIndex > leftIdx) {
+      // 当新旧节点位置不一，则将缓存当前的旧节点，放到下一次对比
+      nextOldNode = oldNode;
+      oldNode = null;
+    } else {
+      nextOldNode = oldNode.next;
+    }
+
+    canBeReuse = checkCanReuseNode(oldNode, newChildren[leftIdx], leftIdx);
+    // 不能复用，break
+    if (!canBeReuse) {
+      oldNode = oldNode ?? nextOldNode;
+      break;
+    }
+
+    newNode = getNewNode(parentNode, newChildren[leftIdx], oldNode);
+    // 没有生成新节点，break
+    if (!newNode) {
+      oldNode = oldNode ?? nextOldNode;
+      break;
+    }
+
+    // diff过程中，需要将现有的节点清除掉，如果是创建，则不需要处理（因为没有现存节点）
+    if (oldNode && newNode.isCreated) {
+      deleteVNode(parentNode, oldNode);
+    }
+
+    theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition);
+    newNode.eIndex = leftIdx;
+    appendNode(newNode);
+    oldNode = nextOldNode;
+  }
+
+  let rightIdx = newChildren.length;
+  let rightEndOldNode; // 老节点中最右边匹配的节点引用 abcde --> abfde 则rightEndOldNode = c;
+  let rightNewNode: VNode | null = null; // 最右边匹配的节点引用 abcde --> abfde 则rightNewNode = d;
+  // 从后往前，新资源的位置还没有到最末端，旧的vNode也还没遍历完，则可以考虑从后往前开始
+  if (rightIdx > leftIdx && oldNode !== null) {
+    const rightRemainingOldChildren = transRightChildrenToArray(oldNode);
+    let rightOldIndex: number | null = rightRemainingOldChildren.length - 1;
+
+    // 2. 从右侧开始比对currentVNode和newChildren，若不能复用则跳出循环
+    let rightOldNode;
+    for (; rightIdx > leftIdx; rightIdx--) {
+      rightOldNode = rightRemainingOldChildren[rightOldIndex];
+      if (rightOldIndex < 0 || rightOldNode === null) {
+        break;
+      }
+
+      canBeReuse = checkCanReuseNode(rightOldNode, newChildren[rightIdx - 1], rightIdx - 1);
+      // 不能复用，break
+      if (!canBeReuse) {
+        break;
+      }
+
+      newNode = getNewNode(parentNode, newChildren[rightIdx - 1], rightOldNode);
+      // 没有生成新节点，break
+      if (newNode === null) {
+        break;
+      }
+
+      // 链接起来
+      if (rightNewNode === null) {
+        rightNewNode = newNode;
+      } else {
+        newNode.next = rightNewNode;
+        rightNewNode = newNode;
+      }
+
+      if (rightOldNode && newNode.isCreated) {
+        deleteVNode(parentNode, rightOldNode);
+      }
+
+      setVNodeAdditionFlag(newNode, theLastPosition);
+      newNode.eIndex = rightIdx - 1;
+      rightOldIndex--;
+      rightEndOldNode = rightOldNode;
+    }
+  }
+
+  // 3. 新节点已经处理完成
+  if (leftIdx === rightIdx) {
+    if (firstChild && parentNode.tag === DomComponent && newChildren.length === 0) {
+      FlagUtils.markClear(parentNode);
+      parentNode.clearChild = firstChild;
+    } else {
+      deleteVNodes(parentNode, oldNode, rightEndOldNode);
+    }
+
+    if (rightNewNode) {
+      appendNode(rightNewNode);
+      setVNodesCIndex(rightNewNode, prevNewNode!.cIndex + 1);
+    }
+
+    return resultingFirstChild;
+  }
+
+  // 4. 新节点还有一部分，但是老节点已经没有了
+  if (oldNode === null) {
+    let isDirectAdd = false;
+    // 是否可以扩大至非dom类型节点待确认
+    // 如果dom节点在上次添加前没有节点，说明本次添加时，可以直接添加到最后，不需要通过 getSiblingDom 函数找到 before 节点
+    if (
+      parentNode.tag === DomComponent &&
+      parentNode.oldProps?.children?.length === 0 &&
+      rightIdx - leftIdx === newChildren.length
+    ) {
+      isDirectAdd = true;
+    }
+    const isAddition = parentNode.tag === DomPortal || !parentNode.isCreated;
+    for (; leftIdx < rightIdx; leftIdx++) {
+      newNode = getNewNode(parentNode, newChildren[leftIdx], null);
+
+      if (newNode !== null) {
+        if (isAddition) {
+          FlagUtils.setAddition(newNode);
+        }
+        if (isDirectAdd) {
+          FlagUtils.markDirectAddition(newNode);
+        }
+        newNode.eIndex = leftIdx;
+        appendNode(newNode);
+      }
+    }
+
+    if (rightNewNode) {
+      appendNode(rightNewNode);
+      setVNodesCIndex(rightNewNode.next, rightNewNode.cIndex + 1);
+    }
+
+    return resultingFirstChild;
+  }
+
+  // 5. 新节点还有一部分，但是老节点也还有一部分
+  // 把剩下的currentVNode转成Map
+  const leftChildrenMap = transLeftChildrenToMap(oldNode, rightEndOldNode);
+  // 通过贪心算法+二分法获取最长递增子序列
+  const eIndexes: Array<number> = []; // 记录 eIndex 值
+  const result: Array<number> = []; // 记录最长子序列在eIndexes中的 index 值
+  const preIndex: Array<number> = []; // 贪心算法在替换的过程中会使得数组不正确，通过记录preIndex找到正确值
+  const reuseNodes: (VNode | null)[] = []; // 记录复用的 VNode
+  let i = 0;
+  let oldNodeFromMap;
+  let last;
+  for (; leftIdx < rightIdx; leftIdx++) {
+    oldNodeFromMap = getOldNodeFromMap(leftChildrenMap, leftIdx, newChildren[leftIdx]);
+    newNode = getNewNode(parentNode, newChildren[leftIdx], oldNodeFromMap);
+    if (newNode !== null) {
+      if (newNode.isCreated) {
+        // 新VNode，直接打上标签新增，不参与到复用，旧的VNode会在后面打上delete标签
+        FlagUtils.setAddition(newNode);
+      } else {
+        // 从Map删除，后面不会deleteVNode，就可以实现复用
+        leftChildrenMap.delete(newNode.key || leftIdx);
+        if (oldNodeFromMap !== null) {
+          const eIndex = newNode.eIndex;
+          eIndexes.push(eIndex);
+          last = eIndexes[result[result.length - 1]];
+          if (eIndex > last || last === undefined) {
+            // 大的 eIndex直接放在最后
+            preIndex[i] = result[result.length - 1];
+            result.push(i);
+          } else {
+            let start = 0;
+            let end = result.length - 1;
+            let middle;
+            // 二分法找到需要替换的值
+            while (start < end) {
+              middle = Math.floor((start + end) / 2);
+              if (eIndexes[result[middle]] > eIndex) {
+                end = middle;
+              } else {
+                start = middle + 1;
+              }
+            }
+            if (eIndex < eIndexes[result[start]]) {
+              preIndex[i] = result[start - 1];
+              result[start] = i;
+            }
+          }
+          i++;
+          reuseNodes.push(newNode); // 记录所有复用的节点
+        }
+      }
+      newNode.eIndex = leftIdx;
+      appendNode(newNode);
+    }
+  }
+
+  // 向前回溯找到正确的结果
+  let length = result.length;
+  let prev = result[length - 1];
+  while (length-- > 0) {
+    result[length] = prev;
+    prev = preIndex[result[length]];
+  }
+  result.forEach(idx => {
+    // 把需要复用的节点从 restNodes 中清理掉，因为不需要打 add 标记，直接复用 dom 节点
+    reuseNodes[idx] = null;
+  });
+  reuseNodes.forEach(node => {
+    if (node !== null) {
+      // 没有被清理的节点打上 add 标记，通过dom的append操作实现位置移动
+      FlagUtils.setAddition(node);
+    }
+  });
+  leftChildrenMap.forEach(child => {
+    deleteVNode(parentNode, child);
+  });
+
+  if (rightNewNode) {
+    appendNode(rightNewNode);
+    setVNodesCIndex(rightNewNode.next, rightNewNode.cIndex + 1);
+  }
+
+  return resultingFirstChild;
+}
+
+// 新节点是迭代器类型
+function diffIteratorNodesHandler(
+  parentNode: VNode,
+  firstChild: VNode | null,
+  newChildrenIterable: Iterable<any>
+): VNode | null {
+  const iteratorFn = getIteratorFn(newChildrenIterable);
+  const iteratorObj = iteratorFn.call(newChildrenIterable);
+
+  // 把iterator转测数组
+  const childrenArray: any[] = [];
+  let result = iteratorObj.next();
+  while (!result.done) {
+    childrenArray.push(result.value);
+    result = iteratorObj.next();
+  }
+
+  return diffArrayNodesHandler(parentNode, firstChild, childrenArray);
+}
+
+// 新节点是字符串类型
+function diffStringNodeHandler(parentNode: VNode, newChild: any, firstChildVNode: VNode | null, isComparing: boolean) {
+  let newTextNode: VNode | null = null;
+
+  // 第一个vNode是Text，则复用
+  if (firstChildVNode !== null && firstChildVNode.tag === DomText) {
+    newTextNode = updateVNode(firstChildVNode, String(newChild));
+    deleteVNodes(parentNode, firstChildVNode.next);
+    newTextNode.next = null;
+  } else {
+    newTextNode = createDomTextVNode(String(newChild));
+    deleteVNodes(parentNode, firstChildVNode);
+  }
+
+  if (isComparing && newTextNode.isCreated) {
+    FlagUtils.setAddition(newTextNode);
+  }
+  newTextNode.parent = parentNode;
+  newTextNode.cIndex = 0;
+  markVNodePath(newTextNode);
+
+  return newTextNode;
+}
+
+// 新节点是对象类型
+function diffObjectNodeHandler(
+  parentNode: VNode,
+  firstChild: VNode | null,
+  newChild: any,
+  firstChildVNode: VNode | null,
+  isComparing: boolean
+) {
+  let canReuseNode: VNode | null = null;
+
+  // 通过key比对是否有可以reuse
+  const newKey = newChild.key;
+  let node = firstChild;
+  while (node !== null) {
+    if (node.key === newKey) {
+      canReuseNode = node;
+      break;
+    } else {
+      deleteVNode(parentNode, node);
+      node = node.next;
+    }
+  }
+
+  let resultNode: VNode | null = null;
+  let startDelVNode: VNode | null = node;
+  if (newChild.vtype === TYPE_COMMON_ELEMENT) {
+    if (canReuseNode) {
+      // 可以复用
+      if (canReuseNode.tag === Fragment && newChild.type === TYPE_FRAGMENT) {
+        resultNode = updateVNode(canReuseNode, newChild.props.children);
+        startDelVNode = canReuseNode.next;
+        resultNode.next = null;
+      } else if (isSameType(canReuseNode, newChild)) {
+        resultNode = updateVNode(canReuseNode, newChild.props);
+        resultNode.ref = newChild.ref;
+        resultNode[BELONG_CLASS_VNODE_KEY] = newChild[BELONG_CLASS_VNODE_KEY];
+        startDelVNode = resultNode.next;
+        resultNode.next = null;
+      }
+    }
+
+    if (resultNode === null) {
+      // 新建
+      if (newChild.type === TYPE_FRAGMENT) {
+        resultNode = createFragmentVNode(newChild.key, newChild.props.children);
+      } else {
+        resultNode = createVNodeFromElement(newChild);
+        resultNode.ref = newChild.ref;
+        resultNode[BELONG_CLASS_VNODE_KEY] = newChild[BELONG_CLASS_VNODE_KEY];
+      }
+    }
+  } else if (newChild.vtype === TYPE_PORTAL) {
+    if (canReuseNode) {
+      // 可以复用
+      if (canReuseNode.tag === DomPortal && canReuseNode.realNode === newChild.realNode) {
+        resultNode = updateVNode(canReuseNode, newChild.children || []);
+        startDelVNode = canReuseNode.next;
+        resultNode.next = null;
+      }
+    }
+    if (resultNode === null) {
+      // 新建
+      resultNode = createPortalVNode(newChild);
+    }
+  }
+
+  if (resultNode) {
+    if (isComparing && resultNode.isCreated) {
+      FlagUtils.setAddition(resultNode);
+    }
+
+    resultNode.parent = parentNode;
+    resultNode.cIndex = 0;
+    markVNodePath(resultNode);
+
+    if (startDelVNode) {
+      deleteVNodes(parentNode, startDelVNode);
+    }
+    return resultNode;
+  }
+
+  return null;
+}
+
+// 响应式For组件专用
+function diffReactiveForNodeHandler(
+  parentNode: VNode,
+  firstChild: VNode | null,
+  newChildren: Array<any>,
+): VNode | null {
+  let oldNode = firstChild;
+  let nextOldNode: VNode | null = null;
+  let resultingFirstChild: VNode | null = null;
+  let prevNewNode: VNode | null = null;
+
+  function appendNode(newNode: VNode) {
+    if (prevNewNode === null) {
+      resultingFirstChild = newNode;
+      newNode.cIndex = 0;
+    } else {
+      prevNewNode.next = newNode;
+      newNode.cIndex = prevNewNode.cIndex + 1;
+    }
+    markVNodePath(newNode);
+    prevNewNode = newNode;
+  }
+
+  // 特殊处理
+  // 如果新节点为空
+  if (newChildren.length === 0) {
+    if (firstChild) {
+      FlagUtils.markClear(parentNode);
+      parentNode.clearChild = firstChild;
+
+      return null;
+    }
+  }
+
+  let childIndex = 0;
+  const { opts } = newChildren.diffOperator;
+  for (let i = 0; i < opts.length; i++) {
+    const opt = opts[i];
+    if (oldNode !== null) {
+      // 先保存next，因为getNewNode会修改next
+      nextOldNode = oldNode.next;
+    }
+
+    switch (opt.action) {
+      case Operation.Nop: {
+        const newNode = getNewNode(parentNode, newChildren[childIndex], oldNode);
+        newNode.eIndex = childIndex;
+        appendNode(newNode);
+        // 使用了加1
+        childIndex++;
+        // 使用了oldNode，更新
+        oldNode = nextOldNode;
+        break;
+      }
+      case Operation.Insert: {
+        const newNode = getNewNode(parentNode, newChildren[childIndex], null);
+        FlagUtils.setAddition(newNode);
+        newNode.eIndex = childIndex;
+        appendNode(newNode);
+        // 使用了加1
+        childIndex++;
+        break;
+      }
+      case Operation.Delete: {
+        deleteVNode(parentNode, oldNode);
+        // 使用了oldNode，更新
+        oldNode = nextOldNode;
+        break;
+      }
+    }
+
+  }
+
+  return resultingFirstChild;
+}
+
+// Diff算法的对外接口
+export function createChildrenByDiff(
+  parentNode: VNode,
+  firstChild: VNode | null,
+  child: any,
+  isComparing: boolean
+): VNode | null {
+  let newChild = isReactiveProxy(child) ? getRNodeFromProxy(child) : child;
+
+  const isFragment = isNoKeyFragment(newChild);
+  newChild = isFragment ? newChild.props.children : newChild;
+
+  // 1. 没有新节点，直接把vNode标记为删除
+  if (newChild == null) {
+    if (isComparing) {
+      deleteVNodes(parentNode, firstChild);
+    }
+    return null;
+  }
+
+  // 2. newChild是字串类型
+  if (isTextType(newChild)) {
+    return diffStringNodeHandler(parentNode, newChild, firstChild, isComparing);
+  }
+
+  // 3. newChild是数组类型
+  if (Array.isArray(newChild)) {
+    if (newChild.diffOperator) {
+      return diffReactiveForNodeHandler(parentNode, firstChild, newChild);
+    } else {
+      return diffArrayNodesHandler(parentNode, firstChild, newChild);
+    }
+  }
+
+  // 4. newChild是迭代器类型
+  if (isIteratorType(newChild)) {
+    return diffIteratorNodesHandler(parentNode, firstChild, newChild);
+  }
+
+  // 5. newChild是对象类型
+  if (isObjectType(newChild)) {
+    const newVNodes = diffObjectNodeHandler(parentNode, firstChild, newChild, firstChild, isComparing);
+    if (newVNodes) {
+      return newVNodes;
+    }
+  }
+
+  // 6. 其它情况删除所有节点
+  if (firstChild) {
+    deleteVNodes(parentNode, firstChild);
+  }
+
+  return null;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/BaseHook.ts b/packages/inula-reactive/src/renderer/hooks/BaseHook.ts
new file mode 100644
index 00000000..a11630c2
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/BaseHook.ts
@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+
+import type { Hook } from './HookType';
+import { getProcessingVNode } from '../GlobalVar';
+
+// lastTimeHook是上一次执行func时产生的hooks中，与currentHook对应的hook
+let lastTimeHook: Hook<any, any> | null = null;
+
+// 当前hook函数对应的hook对象
+let currentHook: Hook<any, any> | null = null;
+
+export function getLastTimeHook() {
+  return lastTimeHook;
+}
+
+export function setLastTimeHook(hook: Hook<any, any> | null) {
+  lastTimeHook = hook;
+}
+
+export function setCurrentHook(hook: Hook<any, any> | null) {
+  currentHook = hook;
+}
+
+export function throwNotInFuncError(): never {
+  throw Error('Hooks should be used inside function component.');
+}
+
+// 新建一个hook，并放到vNode.hooks中
+export function createHook(state: any = null): Hook<any, any> {
+  const processingVNode = getProcessingVNode()!;
+  const newHook: Hook<any, any> = {
+    state: state,
+    hIndex: processingVNode.hooks!.length,
+  };
+
+  currentHook = newHook;
+  processingVNode.hooks!.push(newHook);
+
+  return currentHook;
+}
+
+export function getNextHook(hook: Hook<any, any>, hooks: Array<Hook<any, any>>): Hook<any, any> | null {
+  return hooks[hook.hIndex + 1] || null;
+}
+
+// 获取当前hook函数对应的hook对象。
+// processing中的hook和上一次执行中的hook，需要同时往前走，
+// 原因：1.比对hook的数量有没有变化（非必要）；2.从上一次执行中的hook获取removeEffect
+export function getCurrentHook(): Hook<any, any> {
+  const processingVNode = getProcessingVNode()!;
+  currentHook =
+    currentHook !== null ? getNextHook(currentHook, processingVNode.hooks!) : processingVNode.hooks![0] || null;
+
+  if (lastTimeHook !== null) {
+    lastTimeHook = getNextHook(lastTimeHook, processingVNode.oldHooks!);
+  } else {
+    if (processingVNode.oldHooks && processingVNode.oldHooks.length) {
+      lastTimeHook = processingVNode.oldHooks[0];
+    } else {
+      lastTimeHook = null;
+    }
+  }
+
+  if (currentHook === null) {
+    if (lastTimeHook === null) {
+      throw Error('Hooks are more than expected, please check whether the hook is written in the condition.');
+    }
+
+    createHook(lastTimeHook.state);
+  }
+
+  return currentHook!;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/EffectConstant.ts b/packages/inula-reactive/src/renderer/hooks/EffectConstant.ts
new file mode 100644
index 00000000..480978b9
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/EffectConstant.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 const EffectConstant = {
+  NoEffect: 0,
+  DepsChange: 1, // dependence发生了改变
+  LayoutEffect: 2, // 同步触发的effect
+  Effect: 4, // 异步触发的effect
+};
diff --git a/packages/inula-reactive/src/renderer/hooks/HookExternal.ts b/packages/inula-reactive/src/renderer/hooks/HookExternal.ts
new file mode 100644
index 00000000..67a887de
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/HookExternal.ts
@@ -0,0 +1,142 @@
+/*
+ * 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.
+ */
+
+import type { ContextType } from '../Types';
+
+import { useRefImpl } from './UseRefHook';
+import { useEffectImpl, useLayoutEffectImpl } from './UseEffectHook';
+import { useCallbackImpl } from './UseCallbackHook';
+import { useMemoImpl } from './UseMemoHook';
+import { useImperativeHandleImpl } from './UseImperativeHook';
+import { useReducerImpl } from './UseReducerHook';
+import { useStateImpl } from './UseStateHook';
+import { getNewContext } from '../components/context/Context';
+import { getProcessingVNode } from '../GlobalVar';
+import { useAtomImpl } from './reactive/UseAtom';
+import { useComputedImpl } from './reactive/UseCompute';
+import { useReactiveImpl } from './reactive/UseReactive';
+import { AtomNode, PrimitiveType, Reactive } from '../../reactive/types';
+import { useWatchImpl } from './reactive/UseWatch';
+import type { MutableRef, RefCallBack, RefObject } from './HookType';
+
+import type {
+  BasicStateAction,
+  Dispatch,
+  ReducerStateVoid,
+  ReducerVoid,
+  Reducer,
+  EffectCallBack,
+  DependencyList,
+} from '../../types';
+import { DispatchVoid, ReducerAction, ReducerState, Context } from '../../types';
+
+export function useContext<T>(Context: Context<T>): T;
+export function useContext<T>(Context: ContextType<T> | Context<T>): T {
+  const processingVNode = getProcessingVNode();
+  return getNewContext(processingVNode!, Context as ContextType<T>, true);
+}
+
+export function useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>];
+export function useState<S = undefined>(): [S | undefined, Dispatch<BasicStateAction<S | undefined>>];
+export function useState<S>(initialState?: (() => S) | S): [S, Dispatch<BasicStateAction<S>>] {
+  return useStateImpl(initialState);
+}
+
+export function useReducer<R extends ReducerVoid<any>, I>(
+  reducer: R,
+  initialArg: I,
+  init: (arg: I) => ReducerVoid<R>
+): [ReducerStateVoid<R>, DispatchVoid];
+export function useReducer<R extends ReducerVoid<any>>(
+  reducer: R,
+  initialArg: ReducerStateVoid<R>,
+  init?: undefined
+): [ReducerStateVoid<R>, DispatchVoid];
+export function useReducer<R extends Reducer<any, any>, I>(
+  reducer: R,
+  initialArg: I & ReducerState<R>,
+  init?: (arg: I & ReducerState<R>) => ReducerState<R>
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+export function useReducer<R extends Reducer<any, any>, I>(
+  reducer: R,
+  initialArg: I,
+  init?: (arg: I) => ReducerState<R>
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+export function useReducer<R extends Reducer<any, any>>(
+  reducer: R,
+  initialArg: ReducerState<R>,
+  init?: undefined
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+export function useReducer<R extends ReducerVoid<any> | Reducer<any, any>, I>(
+  reducer: R,
+  initialArg: ReducerState<R> | I | (I & ReducerState<R>),
+  init?: undefined | ((arg: I) => ReducerState<R> | ReducerVoid<R>) | ((arg: I & ReducerState<R>) => ReducerState<R>)
+): unknown {
+  return useReducerImpl(reducer, initialArg, init);
+}
+
+export function useRef<T>(initialValue: T): MutableRef<T>;
+export function useRef<T>(initialValue: T | null): RefObject<T>;
+export function useRef<T = undefined>(): MutableRef<T | undefined>;
+export function useRef<T>(initialValue?: T): MutableRef<T> {
+  return useRefImpl(initialValue);
+}
+
+export function useEffect(create: EffectCallBack, deps?: DependencyList): void {
+  return useEffectImpl(create, deps);
+}
+
+export function useLayoutEffect(create: EffectCallBack, deps?: DependencyList): void {
+  return useLayoutEffectImpl(create, deps);
+}
+
+export function useCallback<T>(callback: T, deps: DependencyList): T {
+  return useCallbackImpl(callback, deps);
+}
+
+export function useMemo<T>(create: () => T, deps: DependencyList | undefined): T {
+  return useMemoImpl(create, deps);
+}
+
+export function useImperativeHandle<T, R extends T>(
+  ref: RefObject<T> | RefCallBack<T> | null | undefined,
+  create: () => R,
+  deps?: DependencyList
+): void {
+  return useImperativeHandleImpl(ref, create, deps);
+}
+
+// 兼容react-redux
+export const useDebugValue = () => {};
+
+// reactive hooks
+export function useAtom<T extends PrimitiveType>(initialValue: T): [AtomNode<T>, (value: T) => void] {
+  return useAtomImpl(initialValue);
+}
+
+export function useCompute<T>(compute: () => T) {
+  return useComputedImpl(compute);
+}
+export function useComputed<T>(compute: () => T) {
+  return useComputedImpl(compute);
+}
+
+export function useReactive<T>(obj: T) {
+  return useReactiveImpl<T>(obj);
+}
+
+export function useWatch<T>(fn: () => any | Reactive, callback?: () => void) {
+  return useWatchImpl<T>(fn, callback);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/HookMain.ts b/packages/inula-reactive/src/renderer/hooks/HookMain.ts
new file mode 100644
index 00000000..48f39f42
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/HookMain.ts
@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { getLastTimeHook, setLastTimeHook, setCurrentHook, getNextHook } from './BaseHook';
+import { HookStage, setHookStage } from './HookStage';
+
+function resetGlobalVariable() {
+  setHookStage(null);
+  setLastTimeHook(null);
+  setCurrentHook(null);
+}
+
+// hook对外入口
+export function runFunctionWithHooks<Props extends Record<string, any>, Arg>(
+  funcComp: (props: Props, arg: Arg) => any,
+  props: Props,
+  arg: Arg,
+  processing: VNode
+) {
+  // 重置全局变量
+  resetGlobalVariable();
+
+  processing.oldHooks = processing.hooks;
+  processing.hooks = [];
+  processing.effectList = [];
+
+  // 设置hook阶段
+  if (processing.isCreated || !processing.oldHooks!.length) {
+    setHookStage(HookStage.Init);
+  } else {
+    setHookStage(HookStage.Update);
+  }
+
+  const comp = funcComp(props, arg);
+
+  // 设置hook阶段为null，用于判断hook是否在函数组件中调用
+  setHookStage(null);
+
+  // 判断hook是否写在了if条件中，如果在if中会出现数量不对等的情况
+  const lastTimeHook = getLastTimeHook();
+  if (lastTimeHook !== null) {
+    if (getNextHook(getLastTimeHook()!, processing.oldHooks!) !== null) {
+      throw Error('Hooks are less than expected, please check whether the hook is written in the condition.');
+    }
+  }
+
+  // 重置全局变量
+  resetGlobalVariable();
+
+  return comp;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/HookStage.ts b/packages/inula-reactive/src/renderer/hooks/HookStage.ts
new file mode 100644
index 00000000..eaa635b0
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/HookStage.ts
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+// hooks阶段
+export enum HookStage {
+  Init = 1,
+  Update = 2,
+}
+
+let hookStage: HookStage | null = null;
+
+export function getHookStage() {
+  return hookStage;
+}
+
+export function setHookStage(phase: HookStage | null) {
+  hookStage = phase;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/HookType.ts b/packages/inula-reactive/src/renderer/hooks/HookType.ts
new file mode 100644
index 00000000..ef04bf95
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/HookType.ts
@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+import { EffectConstant } from './EffectConstant';
+
+type ValueOf<T> = T[keyof T];
+
+export interface Hook<S, A> {
+  state: Reducer<S, A> | Effect | Memo<S> | CallBack<S> | MutableRef<S>;
+  hIndex: number;
+}
+
+export interface Reducer<S, A> {
+  stateValue: S | null;
+  trigger: Trigger<A> | null;
+  reducer: ((S, A) => S) | null;
+  updates: Array<Update<S, A>> | null;
+  isUseState: boolean;
+}
+
+export type Update<S, A> = {
+  action: A;
+  didCalculated: boolean;
+  state: S | null;
+};
+
+export type EffectList = Array<Effect> | null;
+
+export type Effect = {
+  effect: () => (() => void) | void;
+  removeEffect: (() => void) | void;
+  dependencies: Array<any> | null;
+  effectConstant: ValueOf<typeof EffectConstant>;
+};
+
+export type Memo<V> = {
+  result: V | null;
+  dependencies: Array<any> | null;
+};
+
+export type CallBack<F> = {
+  func: F | null;
+  dependencies: Array<any> | null;
+};
+
+export type MutableRef<V> = {
+  current: V;
+};
+
+export type RefObject<T> = {
+  readonly current: T | null;
+};
+
+export type RefCallBack<T> = {
+  bivarianceHack(inst: T | null): void;
+}['bivarianceHack'];
+
+export type Trigger<A> = (state: A) => void;
diff --git a/packages/inula-reactive/src/renderer/hooks/UseCallbackHook.ts b/packages/inula-reactive/src/renderer/hooks/UseCallbackHook.ts
new file mode 100644
index 00000000..8fb5c383
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseCallbackHook.ts
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+import { createHook, getCurrentHook, throwNotInFuncError } from './BaseHook';
+import { getHookStage, HookStage } from './HookStage';
+import { isArrayEqual } from '../utils/compare';
+import { DependencyList } from '../../types';
+
+export function useCallbackImpl<F>(func: F, dependencies?: DependencyList): F {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  let hook;
+  const deps = dependencies !== undefined ? dependencies : null;
+  if (stage === HookStage.Init) {
+    hook = createHook();
+    hook.state = { func, dependencies: deps };
+  } else if (stage === HookStage.Update) {
+    hook = getCurrentHook();
+
+    const lastState = hook.state;
+    // 判断dependencies是否相同，不同就不更新state
+    if (lastState !== null && deps !== null && isArrayEqual(deps, lastState.dependencies)) {
+      return lastState.func;
+    }
+    hook.state = { func, dependencies: deps };
+  }
+
+  return func;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseEffectHook.ts b/packages/inula-reactive/src/renderer/hooks/UseEffectHook.ts
new file mode 100644
index 00000000..5d59acdd
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseEffectHook.ts
@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+
+import { createHook, getCurrentHook, getLastTimeHook, throwNotInFuncError } from './BaseHook';
+import { FlagUtils } from '../vnode/VNodeFlags';
+import { EffectConstant } from './EffectConstant';
+import type { Effect, EffectList } from './HookType';
+import { getHookStage, HookStage } from './HookStage';
+import { isArrayEqual } from '../utils/compare';
+import { getProcessingVNode } from '../GlobalVar';
+import { DependencyList, EffectCallBack } from '../../types';
+
+function createEffect(effectFunc, removeFunc, deps, effectConstant): Effect {
+  const effect: Effect = {
+    effect: effectFunc,
+    removeEffect: removeFunc,
+    dependencies: deps,
+    effectConstant: effectConstant,
+  };
+
+  getProcessingVNode()?.effectList?.push(effect);
+
+  return effect;
+}
+
+export function useEffectForInit(effectFunc, deps, effectType): void {
+  FlagUtils.markUpdate(getProcessingVNode()!);
+
+  const hook = createHook();
+  const nextDeps = deps !== undefined ? deps : null;
+  // 初始阶段，设置DepsChange标记位; 构造EffectList数组，并赋值给state
+  hook.state = createEffect(effectFunc, undefined, nextDeps, EffectConstant.DepsChange | effectType);
+}
+
+export function useEffectForUpdate(effectFunc, deps, effectType): void {
+  const hook = getCurrentHook();
+  const nextDeps = deps !== undefined ? deps : null;
+  let removeFunc;
+
+  if (getLastTimeHook() !== null) {
+    const effect = getLastTimeHook()?.state as Effect;
+    // removeEffect是通过执行effect返回的，所以需要在上一次hook中获取
+    removeFunc = effect.removeEffect;
+    const lastDeps = effect.dependencies;
+
+    // 判断dependencies是否相同，同相同不需要设置DepsChange标记位
+    if (nextDeps !== null && isArrayEqual(nextDeps, lastDeps)) {
+      hook.state = createEffect(effectFunc, removeFunc, nextDeps, effectType);
+      return;
+    }
+  }
+
+  FlagUtils.markUpdate(getProcessingVNode()!);
+  // 设置DepsChange标记位，构造Effect，并赋值给state
+  hook.state = createEffect(effectFunc, removeFunc, nextDeps, EffectConstant.DepsChange | effectType);
+}
+
+function useEffect(effectFunc: EffectCallBack, deps: DependencyList | undefined | null, effectType: number): void {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  if (stage === HookStage.Init) {
+    useEffectForInit(effectFunc, deps, effectType);
+  } else if (stage === HookStage.Update) {
+    useEffectForUpdate(effectFunc, deps, effectType);
+  }
+}
+
+export function useEffectImpl(effectFunc: EffectCallBack, deps?: DependencyList): void {
+  // 异步触发的effect
+  useEffect(effectFunc, deps, EffectConstant.Effect);
+}
+
+export function useLayoutEffectImpl(effectFunc: EffectCallBack, deps?: DependencyList | null): void {
+  // 同步触发的effect
+  useEffect(effectFunc, deps, EffectConstant.LayoutEffect);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseImperativeHook.ts b/packages/inula-reactive/src/renderer/hooks/UseImperativeHook.ts
new file mode 100644
index 00000000..8b41be69
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseImperativeHook.ts
@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+import { useLayoutEffectImpl } from './UseEffectHook';
+import { getHookStage } from './HookStage';
+import { throwNotInFuncError } from './BaseHook';
+import type { MutableRef } from './HookType';
+import { isNotNull } from '../../dom/utils/Common';
+
+function effectFunc<R>(func: () => R, ref: MutableRef<R> | ((any) => any) | null): (() => void) | void {
+  if (typeof ref === 'function') {
+    const value = func();
+    ref(value);
+    return () => {
+      ref(null);
+    };
+  }
+
+  if (isNotNull(ref)) {
+    ref!.current = func();
+    return () => {
+      ref!.current = null as unknown as R;
+    };
+  }
+}
+
+export function useImperativeHandleImpl<R>(
+  ref: { current: R | null } | ((any) => any) | null | void,
+  func: () => R,
+  dependencies?: Array<any> | null
+): void {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  const params = isNotNull(dependencies) ? dependencies?.concat([ref]) : null;
+  useLayoutEffectImpl(effectFunc.bind(null, func, ref), params);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseMemoHook.ts b/packages/inula-reactive/src/renderer/hooks/UseMemoHook.ts
new file mode 100644
index 00000000..4aed75ac
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseMemoHook.ts
@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+import { createHook, getCurrentHook, throwNotInFuncError } from './BaseHook';
+import { getHookStage, HookStage } from './HookStage';
+import { isArrayEqual } from '../utils/compare';
+import { DependencyList } from '../../types';
+
+export function useMemoImpl<V>(fun: () => V, deps?: DependencyList): V {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  let hook;
+  let result;
+  const nextDeps = deps === undefined ? null : deps;
+
+  if (stage === HookStage.Init) {
+    hook = createHook();
+    result = fun();
+  } else if (stage === HookStage.Update) {
+    hook = getCurrentHook();
+
+    const lastState = hook.state;
+    // dependencies相同，不更新state
+    if (lastState !== null && nextDeps !== null && isArrayEqual(nextDeps, lastState.dependencies)) {
+      return lastState.result;
+    }
+    result = fun();
+  }
+
+  hook.state = { result, dependencies: nextDeps };
+  return hook.state.result;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseReducerHook.ts b/packages/inula-reactive/src/renderer/hooks/UseReducerHook.ts
new file mode 100644
index 00000000..1278e65e
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseReducerHook.ts
@@ -0,0 +1,155 @@
+/*
+ * 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.
+ */
+
+import type { Hook, Reducer, Trigger, Update } from './HookType';
+import { createHook, getCurrentHook, throwNotInFuncError } from './BaseHook';
+import { launchUpdateFromVNode } from '../TreeBuilder';
+import { isSame } from '../utils/compare';
+import { setStateChange } from '../render/FunctionComponent';
+import { getHookStage, HookStage } from './HookStage';
+import type { VNode } from '../Types';
+import { getProcessingVNode } from '../GlobalVar';
+
+// 构造新的Update数组
+function insertUpdate<S, A>(action: A, hook: Hook<S, A>): Update<S, A> {
+  const newUpdate: Update<S, A> = {
+    action,
+    state: null,
+    didCalculated: false,
+  };
+
+  let updates = (hook.state as Reducer<S, A>).updates;
+  // 更新updates数组，newUpdate添加至数组尾部
+  if (updates === null) {
+    updates = [newUpdate];
+    (hook.state as Reducer<S, A>).updates = updates;
+  } else {
+    updates.push(newUpdate);
+  }
+
+  return newUpdate;
+}
+
+// setState, setReducer触发函数
+export function TriggerAction<S, A>(vNode: VNode, hook: Hook<S, A>, isUseState: boolean, action: A): void {
+  const newUpdate = insertUpdate(action, hook);
+
+  // 判断是否需要刷新
+  if (!vNode.shouldUpdate && isUseState) {
+    const { stateValue, reducer } = hook.state as Reducer<S, A>;
+
+    if (reducer === null) {
+      return;
+    }
+    // 在进入render阶段前reducer没有变化，可以复用state值，提升性能
+    newUpdate.state = reducer(stateValue, action);
+
+    // 标记为已经计算过，不需要重新计算了
+    newUpdate.didCalculated = true;
+
+    if (isSame(newUpdate.state, stateValue)) {
+      return;
+    }
+  }
+
+  // 执行vNode节点渲染
+  launchUpdateFromVNode(vNode);
+}
+
+export function useReducerForInit<S, A>(reducer, initArg, init, isUseState?: boolean): [S, Trigger<A>] {
+  // 计算初始stateValue
+  let stateValue;
+  if (typeof initArg === 'function') {
+    stateValue = initArg();
+  } else if (typeof init === 'function') {
+    stateValue = init(initArg);
+  } else {
+    stateValue = initArg;
+  }
+
+  const hook = createHook();
+  const trigger = TriggerAction.bind(null, getProcessingVNode(), hook, isUseState);
+  // 为hook.state赋值{状态值, 触发函数, reducer, updates更新数组, 是否是useState}
+  hook.state = {
+    stateValue: stateValue,
+    trigger,
+    reducer,
+    updates: null,
+    isUseState,
+  } as Reducer<S, A>;
+
+  return [hook.state.stateValue, trigger];
+}
+
+// 计算stateValue值
+function calculateNewState<S, A>(currentHookUpdates: Array<Update<S, A>>, currentHook, reducer: (S, A) => S) {
+  const reducerObj = currentHook.state;
+  let state = reducerObj.stateValue;
+
+  // 循环遍历更新数组，计算新的状态值
+  currentHookUpdates.forEach(update => {
+    // 1. didCalculated = true 说明state已经计算过; 2. 如果来自 isUseState
+    if (update.didCalculated && reducerObj.isUseState) {
+      state = update.state;
+    } else {
+      const action = update.action;
+      state = reducer(state, action);
+    }
+  });
+
+  return state;
+}
+
+// 更新hook.state
+function updateReducerHookState<S, A>(currentHookUpdates, currentHook, reducer): [S, Trigger<A>] {
+  if (currentHookUpdates !== null) {
+    // 循环遍历更新数组，计算新的状态值
+    const newState = calculateNewState(currentHookUpdates, currentHook, reducer);
+    if (!isSame(newState, currentHook.state.stateValue)) {
+      setStateChange(true);
+    }
+
+    // 更新hook对象状态值
+    currentHook.state.stateValue = newState;
+    // 重置更新数组为null
+    currentHook.state.updates = null;
+  }
+
+  currentHook.state.reducer = reducer;
+  return [currentHook.state.stateValue, currentHook.state.trigger];
+}
+
+export function useReducerImpl<S, P, A>(
+  reducer: (S, A) => S,
+  initArg: P,
+  init?: (P) => S,
+  isUseState?: boolean
+): [S, Trigger<A>] | void {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  if (stage === HookStage.Init) {
+    return useReducerForInit(reducer, initArg, init, isUseState);
+  } else if (stage === HookStage.Update) {
+    // 获取当前的hook
+    const currentHook = getCurrentHook();
+    // 获取currentHook的更新数组
+    const currentHookUpdates = (currentHook.state as Reducer<S, A>).updates;
+
+    return updateReducerHookState(currentHookUpdates, currentHook, reducer);
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseRefHook.ts b/packages/inula-reactive/src/renderer/hooks/UseRefHook.ts
new file mode 100644
index 00000000..180bd62e
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseRefHook.ts
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+import { createHook, getCurrentHook, throwNotInFuncError } from './BaseHook';
+import { getHookStage, HookStage } from './HookStage';
+import type { MutableRef } from './HookType';
+
+export function useRefImpl<V>(value?: V): MutableRef<V> {
+  const stage = getHookStage();
+  if (stage === null) {
+    throwNotInFuncError();
+  }
+
+  let hook;
+  if (stage === HookStage.Init) {
+    hook = createHook();
+    hook.state = { current: value };
+  } else if (stage === HookStage.Update) {
+    hook = getCurrentHook();
+  }
+
+  return hook.state;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseStateHook.ts b/packages/inula-reactive/src/renderer/hooks/UseStateHook.ts
new file mode 100644
index 00000000..0ed8118f
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseStateHook.ts
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import type { Trigger } from './HookType';
+import { useReducerImpl } from './UseReducerHook';
+
+function isFunction<T extends (...args: any) => any>(object: unknown): object is T {
+  return typeof object === 'function';
+}
+
+function defaultReducer<S>(state: S, action: ((S) => S) | S): S {
+  return isFunction(action) ? action(state) : action;
+}
+
+export function useStateImpl<S>(initArg?: (() => S) | S): [S, Trigger<((S) => S) | S>] | void {
+  return useReducerImpl(defaultReducer, initArg, undefined, true);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/UseWatch.ts b/packages/inula-reactive/src/renderer/hooks/UseWatch.ts
new file mode 100644
index 00000000..d1635b6d
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/UseWatch.ts
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import { watch } from '../../inulax/proxy/watch';
+
+export function useWatchImpl(fn: () => void) {
+  watch(fn);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/reactive/UseAtom.ts b/packages/inula-reactive/src/renderer/hooks/reactive/UseAtom.ts
new file mode 100644
index 00000000..9c1a5b81
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/reactive/UseAtom.ts
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+import { getHookStage, HookStage } from '../HookStage';
+import { createHook, getCurrentHook, throwNotInFuncError } from '../BaseHook';
+import { disposeReactive } from '../../../reactive/RContext';
+import { useCallbackImpl } from '../UseCallbackHook';
+import { useEffectImpl } from '../UseEffectHook';
+import { Atom } from '../../../reactive/Atom';
+import { AtomNode, PrimitiveType } from '../../../reactive/types';
+
+export function useAtomImpl<T extends PrimitiveType>(initialValue: T): [AtomNode<T>, (value: T) => void] {
+  const stage = getHookStage();
+  let atom: Atom<T>;
+
+  switch (stage) {
+    case HookStage.Init:
+      atom = new Atom(initialValue);
+      createHook(atom);
+      break;
+    case HookStage.Update:
+      atom = getCurrentHook().state as unknown as Atom;
+      break;
+    default:
+      throwNotInFuncError();
+  }
+
+  const setAtom = useCallbackImpl((value: T) => {
+    atom.set(value);
+  }, []);
+
+  // 组件销毁时，清除effect
+  useEffectImpl(
+    () => () => {
+      disposeReactive(atom);
+    },
+    []
+  );
+
+  return [atom, setAtom];
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/reactive/UseCompute.ts b/packages/inula-reactive/src/renderer/hooks/reactive/UseCompute.ts
new file mode 100644
index 00000000..c3dc9d39
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/reactive/UseCompute.ts
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+import { useMemoImpl } from '../UseMemoHook';
+import { Computed } from '../../../reactive/types';
+import { computed } from '../../../reactive/Computed';
+
+export function useComputedImpl<T>(fn: () => T): Computed<T> {
+  return useMemoImpl(() => {
+    return computed(fn);
+  }, []);
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/reactive/UseReactive.ts b/packages/inula-reactive/src/renderer/hooks/reactive/UseReactive.ts
new file mode 100644
index 00000000..14176890
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/reactive/UseReactive.ts
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import { reactive } from '../../../reactive/Reactive';
+import { getHookStage, HookStage } from '../HookStage';
+import { createHook, getCurrentHook, throwNotInFuncError } from '../BaseHook';
+import { useEffectImpl } from '../UseEffectHook';
+import { disposeReactive } from '../../../reactive/RContext';
+import { Reactive, ReactiveProxy } from '../../../reactive/types';
+
+export function useReactiveImpl<T>(obj) {
+  const stage = getHookStage();
+  let reactiveObj: any;
+
+  switch (stage) {
+    case HookStage.Init:
+      reactiveObj = reactive<T>(obj);
+
+      createHook(reactiveObj);
+      break;
+    case HookStage.Update:
+      reactiveObj = getCurrentHook().state as unknown as Reactive<T>;
+      break;
+    default:
+      throwNotInFuncError();
+  }
+
+  // 组件销毁时，清除effect
+  useEffectImpl(
+    () => () => {
+      disposeReactive(reactiveObj);
+    },
+    []
+  );
+
+  return reactiveObj as ReactiveProxy<T>;
+}
diff --git a/packages/inula-reactive/src/renderer/hooks/reactive/UseWatch.ts b/packages/inula-reactive/src/renderer/hooks/reactive/UseWatch.ts
new file mode 100644
index 00000000..0661a652
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/hooks/reactive/UseWatch.ts
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+import { useEffectImpl } from '../UseEffectHook';
+import { Reactive } from '../../../reactive/types';
+import { watch } from '../../../reactive/Watch';
+import { useMemoImpl } from '../UseMemoHook';
+
+export function useWatchImpl<T>(fn: () => any | Reactive, callback?: () => void): void {
+  useMemoImpl(() => {
+    watch(fn, callback);
+  }, []);
+
+  // 组件销毁时
+  useEffectImpl(() => () => {}, []);
+}
diff --git a/packages/inula-reactive/src/renderer/render/BaseComponent.ts b/packages/inula-reactive/src/renderer/render/BaseComponent.ts
new file mode 100644
index 00000000..41052680
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/BaseComponent.ts
@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { ContextProvider, DomComponent, DomPortal, TreeRoot, SuspenseComponent } from '../vnode/VNodeTags';
+import { setContext, setNamespaceCtx } from '../ContextSaver';
+import { FlagUtils } from '../vnode/VNodeFlags';
+import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
+import componentRenders from './index';
+import { setProcessingVNode } from '../GlobalVar';
+import { clearVNodeObservers } from '../../inulax/store/StoreHandler';
+import { pushCurrentRoot } from '../RootStack';
+
+// 复用vNode时，也需对树的上下文值处理，如context，portal, namespaceContext
+function setTreeContextValue(processing: VNode) {
+  switch (processing.tag) {
+    case TreeRoot:
+      setNamespaceCtx(processing, processing.realNode);
+      break;
+    case DomComponent:
+      setNamespaceCtx(processing);
+      break;
+    case DomPortal:
+      setNamespaceCtx(processing, processing.realNode);
+      pushCurrentRoot(processing);
+      break;
+    case ContextProvider: {
+      const newValue = processing.props.value;
+      setContext(processing, newValue);
+      break;
+    }
+    // No Default
+  }
+}
+
+export function captureVNode(processing: VNode): VNode | null {
+  const component = componentRenders[processing.tag];
+
+  if (processing.tag !== SuspenseComponent) {
+    // 该vNode没有变化，不用进入capture，直接复用。
+    if (!processing.isCreated && processing.oldProps === processing.props && !processing.shouldUpdate) {
+      // 复用还需对stack进行处理
+      setTreeContextValue(processing);
+
+      return onlyUpdateChildVNodes(processing);
+    }
+  }
+
+  const shouldUpdate = processing.shouldUpdate;
+  processing.shouldUpdate = false;
+
+  setProcessingVNode(processing);
+
+  if (processing.observers) clearVNodeObservers(processing);
+  const child = component.captureRender(processing, shouldUpdate);
+  setProcessingVNode(null);
+
+  return child;
+}
+
+export function markRef(processing: VNode) {
+  const ref = processing.ref;
+  if ((processing.isCreated && ref !== null) || (!processing.isCreated && processing.oldRef !== ref)) {
+    FlagUtils.markRef(processing);
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/render/ClassComponent.ts b/packages/inula-reactive/src/renderer/render/ClassComponent.ts
new file mode 100644
index 00000000..fc3a1620
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/ClassComponent.ts
@@ -0,0 +1,184 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { mergeDefaultProps } from './LazyComponent';
+import { getNewContext, resetDepContexts } from '../components/context/Context';
+import {
+  callComponentWillMount,
+  callComponentWillReceiveProps,
+  callComponentWillUpdate,
+  callConstructor,
+  callDerivedStateFromProps,
+  callShouldComponentUpdate,
+  markComponentDidMount,
+  markComponentDidUpdate,
+  markGetSnapshotBeforeUpdate,
+} from './class/ClassLifeCycleProcessor';
+import { FlagUtils, DidCapture } from '../vnode/VNodeFlags';
+import { markRef } from './BaseComponent';
+import { processUpdates } from '../UpdateHandler';
+import { setProcessingClassVNode } from '../GlobalVar';
+import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+import { createComponentDependent } from '../../reactive/RContextCreator';
+
+const emptyContextObj = {};
+// 获取当前节点的context
+export function getCurrentContext(clazz, processing: VNode) {
+  const context = clazz.contextType;
+  return typeof context === 'object' && context !== null ? getNewContext(processing, context) : emptyContextObj;
+}
+
+// 挂载实例
+function mountInstance(ctor, processing: VNode, nextProps: Record<string, any>) {
+  if (!processing.isCreated) {
+    processing.isCreated = true;
+    FlagUtils.markAddition(processing);
+  }
+
+  // 构造实例
+  const inst = callConstructor(processing, ctor, nextProps);
+
+  inst.props = nextProps;
+  inst.state = processing.state;
+  inst.context = getCurrentContext(ctor, processing);
+  inst.refs = {};
+
+  processUpdates(processing, inst, nextProps);
+  inst.state = processing.state;
+
+  // 在调用类组建的渲染方法之前调用 并且在初始挂载及后续更新时都会被调用
+  callDerivedStateFromProps(processing, ctor.getDerivedStateFromProps, nextProps);
+  callComponentWillMount(processing, inst, nextProps);
+
+  markComponentDidMount(processing);
+}
+
+// 构建子节点
+function createChildren(clazz: any, processing: VNode) {
+  processing.isStoreChange = false;
+
+  markRef(processing);
+
+  setProcessingClassVNode(processing);
+  processing.state = processing.realNode.state;
+
+  const inst = processing.realNode;
+  const isCatchError = (processing.flags & DidCapture) === DidCapture;
+
+  // 按照已有规格，如果捕获了错误却没有定义getDerivedStateFromError函数，返回的child为null
+  const newElements = isCatchError && typeof clazz.getDerivedStateFromError !== 'function' ? null : inst.render();
+
+  processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
+  return processing.child;
+}
+
+// 根据isUpdateComponent，执行不同的生命周期
+function callUpdateLifeCycle(processing: VNode, nextProps: Record<string, any>, clazz) {
+  const inst = processing.realNode;
+  const newContext = getCurrentContext(clazz, processing);
+  if (processing.isCreated) {
+    callComponentWillMount(processing, inst);
+  } else {
+    callComponentWillUpdate(inst, nextProps, processing.state, newContext);
+  }
+}
+
+function markLifeCycle(processing: VNode, nextProps: Record<string, any>, shouldUpdate: boolean) {
+  if (processing.isCreated) {
+    markComponentDidMount(processing);
+  } else if (processing.state !== processing.oldState || shouldUpdate) {
+    markComponentDidUpdate(processing);
+    markGetSnapshotBeforeUpdate(processing);
+  }
+}
+
+// 用于类组件
+export function captureRender(processing: VNode): VNode | null {
+  const ctor = processing.type;
+  let nextProps = processing.props;
+  if (processing.isLazyComponent) {
+    nextProps = mergeDefaultProps(ctor, nextProps);
+  }
+
+  resetDepContexts(processing);
+
+  // suspense打断后，再次render只需初次渲染
+  if (processing.isSuspended) {
+    mountInstance(ctor, processing, nextProps);
+    processing.isSuspended = false;
+    return createChildren(ctor, processing);
+  }
+
+  // 通过 shouldUpdate 判断是否要复用 children，该值和props,state,context的变化，shouldComponentUpdate,forceUpdate api的调用结果有关
+  let shouldUpdate;
+  const inst = processing.realNode;
+  if (inst === null) {
+    // 挂载新组件，一定会更新
+    mountInstance(ctor, processing, nextProps);
+    shouldUpdate = true;
+  } else {
+    // 更新
+    const newContext = getCurrentContext(ctor, processing) as Record<string, any>;
+
+    // 子节点抛出异常时，如果本class是个捕获异常的处理节点，这时候oldProps是null，所以需要使用props
+    const oldProps = (processing.flags & DidCapture) === DidCapture ? processing.props : processing.oldProps;
+
+    if (oldProps !== processing.props || inst.context !== newContext) {
+      // 在已挂载的组件接收新的 props 之前被调用
+      callComponentWillReceiveProps(inst, nextProps, newContext);
+    }
+
+    processUpdates(processing, inst, nextProps);
+
+    // 如果 props, state, context 都没有变化且 isForceUpdate 为 false则不需要更新
+    shouldUpdate = oldProps !== processing.props || inst.state !== processing.state || processing.isForceUpdate;
+
+    if (shouldUpdate) {
+      // derivedStateFromProps会修改nextState，因此需要调用
+      callDerivedStateFromProps(processing, ctor.getDerivedStateFromProps, nextProps);
+      if (!processing.isForceUpdate) {
+        // 业务可以通过 shouldComponentUpdate 函数进行优化阻止更新
+        shouldUpdate = callShouldComponentUpdate(processing, oldProps, nextProps, processing.state, newContext);
+      }
+      if (shouldUpdate) {
+        callUpdateLifeCycle(processing, nextProps, ctor);
+      }
+      inst.state = processing.state;
+      inst.context = newContext;
+    }
+
+    markLifeCycle(processing, nextProps, shouldUpdate);
+    // 不管有没有更新，props都必须更新
+    inst.props = nextProps;
+  }
+  // 如果捕获了 error，必须更新
+  const isCatchError = (processing.flags & DidCapture) === DidCapture;
+  shouldUpdate = isCatchError || shouldUpdate || processing.isStoreChange;
+
+  // 更新ref
+  markRef(processing);
+
+  // 不复用
+  if (shouldUpdate) {
+    return createComponentDependent(() => createChildren(ctor, processing), processing);
+  } else {
+    return onlyUpdateChildVNodes(processing);
+  }
+}
+
+export function bubbleRender() {}
diff --git a/packages/inula-reactive/src/renderer/render/ContextConsumer.ts b/packages/inula-reactive/src/renderer/render/ContextConsumer.ts
new file mode 100644
index 00000000..c39f1d27
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/ContextConsumer.ts
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import type { VNode, ContextType } from '../Types';
+
+import { resetDepContexts, getNewContext } from '../components/context/Context';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+
+function captureContextConsumer(processing: VNode) {
+  const context: ContextType<any> = processing.type;
+  const props = processing.props;
+  const renderFunc = props.children;
+
+  resetDepContexts(processing);
+  const contextVal = getNewContext(processing, context);
+  const newChildren = renderFunc(contextVal);
+
+  processing.child = createChildrenByDiff(processing, processing.child, newChildren, !processing.isCreated);
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  return captureContextConsumer(processing);
+}
+
+export function bubbleRender() {}
diff --git a/packages/inula-reactive/src/renderer/render/ContextProvider.ts b/packages/inula-reactive/src/renderer/render/ContextProvider.ts
new file mode 100644
index 00000000..58ef4c9c
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/ContextProvider.ts
@@ -0,0 +1,121 @@
+/*
+ * 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.
+ */
+
+import type { VNode, ContextType, ProviderType } from '../Types';
+
+import { isSame } from '../utils/compare';
+import { ClassComponent, ContextProvider } from '../vnode/VNodeTags';
+import { pushForceUpdate } from '../UpdateHandler';
+import { resetContext, setContext } from '../ContextSaver';
+import { travelVNodeTree } from '../vnode/VNodeUtils';
+import { launchUpdateFromVNode } from '../TreeBuilder';
+import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
+import { setParentsChildShouldUpdate } from '../vnode/VNodeShouldUpdate';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+
+// 从依赖中找到匹配context的VNode
+function matchDependencies(depContexts, context, vNode): boolean {
+  for (let i = 0; i < depContexts.length; i++) {
+    const contextItem = depContexts[i];
+    if (contextItem === context) {
+      // 匹配到了更新的context，需要创建update。
+      if (vNode.tag === ClassComponent) {
+        pushForceUpdate(vNode);
+      }
+
+      vNode.shouldUpdate = true;
+
+      // 找到需要更新的节点，所以祖先节点都需要改为shouldUpdate为true
+      setParentsChildShouldUpdate(vNode.parent);
+
+      vNode.isDepContextChange = true;
+      // 由于我们已经找到匹配项，我们可以停止遍历依赖项列表。
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// 从当前子节点开始向下遍历，找到消费此context的组件，并更新
+function handleContextChange(processing: VNode, context: ContextType<any>): void {
+  const vNode = processing.child;
+  if (vNode === null) {
+    return;
+  }
+
+  let isMatch = false;
+
+  // 从vNode开始遍历
+  travelVNodeTree(
+    vNode,
+    node => {
+      const depContexts = node.depContexts;
+      if (depContexts && depContexts.length) {
+        isMatch = matchDependencies(depContexts, context, node) || isMatch;
+      }
+    },
+    node =>
+      // 如果这是匹配的provider，则不要更深入地扫描
+      node.tag === ContextProvider && node.type === processing.type,
+    processing,
+    null
+  );
+
+  // 找到了依赖context的子节点，触发一次更新
+  if (isMatch) {
+    launchUpdateFromVNode(processing);
+  }
+}
+
+function captureContextProvider(processing: VNode): VNode | null {
+  const providerType: ProviderType<any> = processing.type;
+  const contextType: ContextType<any> = providerType._context;
+
+  const newProps = processing.props;
+  const oldProps = !processing.isCreated ? processing.oldProps : null;
+
+  // 获取provider设置的context，即provider组件设置的value
+  const newCtx = newProps.value;
+
+  // 更新processing的context值为newProps.value
+  setContext(processing, newCtx);
+
+  if (oldProps !== null) {
+    const oldCtx = oldProps.value;
+    const isSameContext = isSame(oldCtx, newCtx);
+    if (isSameContext) {
+      // context没有改变，复用
+      if (oldProps.children === newProps.children) {
+        return onlyUpdateChildVNodes(processing);
+      }
+    } else {
+      // context更改，更新所有依赖的组件
+      handleContextChange(processing, contextType);
+    }
+  }
+
+  const newElements = newProps.children;
+  processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  return captureContextProvider(processing);
+}
+
+export function bubbleRender(processing: VNode) {
+  resetContext(processing);
+}
diff --git a/packages/inula-reactive/src/renderer/render/DomComponent.ts b/packages/inula-reactive/src/renderer/render/DomComponent.ts
new file mode 100644
index 00000000..8a2476b6
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/DomComponent.ts
@@ -0,0 +1,123 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import type { Props } from '../../dom/DOMOperator';
+
+import { getNamespaceCtx, setNamespaceCtx, resetNamespaceCtx } from '../ContextSaver';
+import { appendChildElement, newDom, initDomProps, getPropChangeList, isTextChild } from '../../dom/DOMOperator';
+import { FlagUtils } from '../vnode/VNodeFlags';
+import { markRef } from './BaseComponent';
+import { DomComponent, DomPortal, DomText } from '../vnode/VNodeTags';
+import { isDomVNode, travelVNodeTree } from '../vnode/VNodeUtils';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+
+function updateDom(processing: VNode, type: any, newProps: Props) {
+  // 如果oldProps !== newProps，意味着存在更新，并且需要处理其相关的副作用
+  const oldProps = processing.oldProps;
+  if (oldProps === newProps) {
+    // 如果props没有发生变化，即使它的children发生了变化，我们也不会改变它
+    return;
+  }
+
+  const dom: Element = processing.realNode;
+
+  const changeList = getPropChangeList(dom, type, oldProps, newProps);
+
+  // 输入类型的直接标记更新
+  if (type === 'input' || type === 'textarea' || type === 'select' || type === 'option') {
+    FlagUtils.markUpdate(processing);
+    processing.changeList = changeList;
+  } else {
+    // 其它的类型，数据有变化才标记更新
+    if (Object.keys(changeList).length) {
+      processing.changeList = changeList;
+      FlagUtils.markUpdate(processing);
+    }
+  }
+}
+
+export function bubbleRender(processing: VNode) {
+  resetNamespaceCtx(processing);
+
+  const type = processing.type;
+  const newProps = processing.props;
+  if (!processing.isCreated && processing.realNode !== null) {
+    // 更新dom属性
+    updateDom(processing, type, newProps);
+
+    if (processing.oldRef !== processing.ref) {
+      FlagUtils.markRef(processing);
+    }
+  } else {
+    const parentNamespace = getNamespaceCtx();
+
+    // 创建dom
+    const dom = newDom(type, newProps, parentNamespace, processing);
+
+    // 把dom类型的子节点append到parent dom中
+    const vNode = processing.child;
+    if (vNode !== null) {
+      // 向下递归它的子节点，查找所有终端节点。
+      travelVNodeTree(
+        vNode,
+        node => {
+          if (isDomVNode(node)) {
+            appendChildElement(dom, node.realNode);
+          }
+        },
+        node =>
+          // 已经append到父节点，或者是DomPortal都不需要处理child了
+          node.tag === DomComponent || node.tag === DomText || node.tag === DomPortal,
+        processing,
+        null
+      );
+    }
+
+    processing.realNode = dom;
+
+    if (initDomProps(dom, type, newProps)) {
+      FlagUtils.markUpdate(processing);
+    }
+
+    // 处理ref导致的更新
+    if (processing.ref !== null) {
+      FlagUtils.markRef(processing);
+    }
+  }
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  setNamespaceCtx(processing);
+
+  const type = processing.type;
+  const newProps = processing.props;
+  const oldProps = !processing.isCreated ? processing.oldProps : null;
+
+  let nextChildren = newProps.children;
+  const isDirectTextChild = isTextChild(type, newProps);
+
+  if (isDirectTextChild) {
+    // 如果为文本节点，则认为没有子节点
+    nextChildren = null;
+  } else if (oldProps !== null && isTextChild(type, oldProps)) {
+    // 将纯文本的子节点改为vNode节点
+    FlagUtils.markContentReset(processing);
+  }
+
+  markRef(processing);
+  processing.child = createChildrenByDiff(processing, processing.child, nextChildren, !processing.isCreated);
+  return processing.child;
+}
diff --git a/packages/inula-reactive/src/renderer/render/DomPortal.ts b/packages/inula-reactive/src/renderer/render/DomPortal.ts
new file mode 100644
index 00000000..27bad601
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/DomPortal.ts
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+import { popCurrentRoot, pushCurrentRoot } from '../RootStack';
+import { listenSimulatedDelegatedEvents } from '../../event/EventBinding';
+
+export function bubbleRender(processing: VNode) {
+  resetNamespaceCtx(processing);
+  listenSimulatedDelegatedEvents(processing);
+  popCurrentRoot();
+}
+
+function capturePortalComponent(processing: VNode) {
+  setNamespaceCtx(processing, processing.realNode);
+  pushCurrentRoot(processing);
+
+  const newElements = processing.props;
+  if (processing.isCreated) {
+    processing.child = createChildrenByDiff(processing, null, newElements, true);
+  } else {
+    processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
+  }
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  return capturePortalComponent(processing);
+}
diff --git a/packages/inula-reactive/src/renderer/render/DomText.ts b/packages/inula-reactive/src/renderer/render/DomText.ts
new file mode 100644
index 00000000..f0a5f2e5
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/DomText.ts
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { throwIfTrue } from '../utils/throwIfTrue';
+import { newTextDom } from '../../dom/DOMOperator';
+import { FlagUtils } from '../vnode/VNodeFlags';
+
+export function captureRender(): VNode | null {
+  return null;
+}
+
+export function bubbleRender(processing: VNode) {
+  const newText = processing.props;
+
+  if (!processing.isCreated && processing.realNode !== null) {
+    // 更新
+    const oldText = processing.oldProps;
+    // 如果文本不同，将其标记为更新
+    if (oldText !== newText) {
+      FlagUtils.markUpdate(processing);
+    }
+  } else {
+    // 初始化
+    if (typeof newText !== 'string') {
+      // 如果存在bug，可能出现这种情况
+      throwIfTrue(
+        processing.realNode === null,
+        'We must have new text for new mounted node. This error is likely ' +
+          'caused by a bug in Inula. Please file an issue.'
+      );
+    }
+    // 获得对应节点
+    processing.realNode = newTextDom(newText, processing);
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/render/ForwardRef.ts b/packages/inula-reactive/src/renderer/render/ForwardRef.ts
new file mode 100644
index 00000000..5ea01357
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/ForwardRef.ts
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import { captureRender as funCaptureRender } from './FunctionComponent';
+
+export function captureRender(processing: VNode): VNode | null {
+  return funCaptureRender(processing);
+}
+
+export function bubbleRender() {}
diff --git a/packages/inula-reactive/src/renderer/render/Fragment.ts b/packages/inula-reactive/src/renderer/render/Fragment.ts
new file mode 100644
index 00000000..8e645a2f
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/Fragment.ts
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+
+export function bubbleRender() {}
+
+function captureFragment(processing: VNode) {
+  const newElement = processing.props;
+  processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  return captureFragment(processing);
+}
diff --git a/packages/inula-reactive/src/renderer/render/FunctionComponent.ts b/packages/inula-reactive/src/renderer/render/FunctionComponent.ts
new file mode 100644
index 00000000..8419f581
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/FunctionComponent.ts
@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { mergeDefaultProps } from './LazyComponent';
+import { resetDepContexts } from '../components/context/Context';
+import { runFunctionWithHooks } from '../hooks/HookMain';
+import { ForwardRef } from '../vnode/VNodeTags';
+import { FlagUtils, Update } from '../vnode/VNodeFlags';
+import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+import { createComponentDependent } from '../../reactive/RContextCreator';
+
+// 在useState, useReducer的时候，会触发state变化
+let stateChange = false;
+
+export function bubbleRender() {}
+
+// 判断children是否可以复用
+function checkIfCanReuseChildren(processing: VNode) {
+  return !processing.isCreated && processing.oldProps === processing.props && !processing.isDepContextChange;
+}
+
+export function setStateChange(isUpdate) {
+  stateChange = isUpdate;
+}
+
+export function isStateChange() {
+  return stateChange;
+}
+
+export function captureFunctionComponent(processing: VNode, funcComp: any, nextProps: any) {
+  // 函数组件内已完成异步动作
+  if (processing.isSuspended) {
+    // 由于首次被打断，应仍为首次渲染
+    processing.isCreated = true;
+    FlagUtils.markAddition(processing);
+
+    processing.isSuspended = false;
+  }
+  resetDepContexts(processing);
+
+  const isCanReuse = checkIfCanReuseChildren(processing);
+  // 在执行exeFunctionHook前先设置stateChange为false
+  setStateChange(false);
+
+  const newElements = createComponentDependent(
+    () =>
+      runFunctionWithHooks(
+        processing.tag === ForwardRef ? funcComp.render : funcComp,
+        nextProps,
+        processing.tag === ForwardRef ? processing.ref : undefined,
+        processing
+      ),
+    processing
+  );
+
+  // 这里需要判断是否可以复用，因为函数组件比起其他组件，多了context、stateChange、或者store改变了 三个因素
+  if (isCanReuse && !isStateChange() && !processing.isStoreChange) {
+    FlagUtils.removeFlag(processing, Update);
+
+    return onlyUpdateChildVNodes(processing);
+  }
+
+  processing.isStoreChange = false;
+
+  processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  const Component = processing.type;
+  const unresolvedProps = processing.props;
+  const resolvedProps = processing.isLazyComponent ? mergeDefaultProps(Component, unresolvedProps) : unresolvedProps;
+
+  return captureFunctionComponent(processing, Component, resolvedProps);
+}
diff --git a/packages/inula-reactive/src/renderer/render/LazyComponent.ts b/packages/inula-reactive/src/renderer/render/LazyComponent.ts
new file mode 100644
index 00000000..c5f92720
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/LazyComponent.ts
@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { FlagUtils } from '../vnode/VNodeFlags';
+import { getLazyVNodeTag } from '../vnode/VNodeCreator';
+import { ClassComponent, ForwardRef, FunctionComponent, MemoComponent } from '../vnode/VNodeTags';
+import { throwIfTrue } from '../utils/throwIfTrue';
+import { captureFunctionComponent } from './FunctionComponent';
+import { captureRender as captureClassComponent } from './ClassComponent';
+import { captureMemoComponent } from './MemoComponent';
+
+export function bubbleRender() {}
+
+const LazyRendererMap = {
+  [FunctionComponent]: captureFunctionComponent,
+  [ClassComponent]: captureClassComponent,
+  [ForwardRef]: captureFunctionComponent,
+  [MemoComponent]: captureMemoComponent,
+};
+
+export function mergeDefaultProps(Component: any, props: Record<string, any>): Record<string, any> {
+  if (Component && Component.defaultProps) {
+    const clonedProps = { ...props };
+    const defaultProps = Component.defaultProps;
+    Object.keys(defaultProps).forEach(key => {
+      if (clonedProps[key] === undefined) {
+        clonedProps[key] = defaultProps[key];
+      }
+    });
+    return clonedProps;
+  }
+  return props;
+}
+
+function captureLazyComponent(processing, lazyComponent, shouldUpdate) {
+  if (!processing.isCreated) {
+    // 每次加载lazy都当作mount来处理
+    processing.isCreated = true;
+    FlagUtils.markAddition(processing);
+  }
+
+  const Component = lazyComponent._load(lazyComponent._content);
+
+  // ======================loaded===============================
+  // 加载得到的Component存在type中
+  processing.type = Component;
+
+  const lazyVNodeTag = getLazyVNodeTag(Component);
+  processing.tag = lazyVNodeTag;
+  const lazyVNodeProps = mergeDefaultProps(Component, processing.props);
+
+  const lazyRender = LazyRendererMap[lazyVNodeTag];
+  if (lazyRender) {
+    if (lazyVNodeTag === MemoComponent) {
+      // Memo要特殊处理
+      processing.effectList = null;
+      const memoVNodeProps = mergeDefaultProps(Component.type, lazyVNodeProps); // 需要整合defaultProps
+      return lazyRender(processing, Component, memoVNodeProps, shouldUpdate);
+    } else {
+      return lazyRender(processing, Component, lazyVNodeProps, false);
+    }
+  } else {
+    // lazy加载的组件类型未受支持
+    throwIfTrue(
+      true,
+      'Element type is invalid. Received a promise that resolves to: %s. ' +
+        'Lazy element type must resolve to a class or function.%s',
+      Component,
+      ''
+    );
+    return null;
+  }
+}
+
+export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
+  return captureLazyComponent(processing, processing.type, shouldUpdate);
+}
diff --git a/packages/inula-reactive/src/renderer/render/MemoComponent.ts b/packages/inula-reactive/src/renderer/render/MemoComponent.ts
new file mode 100644
index 00000000..b6105687
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/MemoComponent.ts
@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+import type { Source, VNode } from '../Types';
+
+import { mergeDefaultProps } from './LazyComponent';
+import {
+  updateVNode,
+  onlyUpdateChildVNodes,
+  createFragmentVNode,
+  createUndeterminedVNode,
+} from '../vnode/VNodeCreator';
+import { shallowCompare } from '../utils/compare';
+import { TYPE_FRAGMENT, TYPE_PROFILER, TYPE_STRICT_MODE } from '../../external/JSXElementType';
+import { markVNodePath } from '../utils/vNodePath';
+
+export function bubbleRender() {}
+
+export function captureMemoComponent(processing: VNode, shouldUpdate: boolean): VNode | null {
+  const Component = processing.type;
+  // 合并 函数组件或类组件 的defaultProps
+  let newProps = mergeDefaultProps(Component, processing.props);
+  // 解决Inula.memo(Inula.forwardRef(()=>{}))两层包装的场景
+  newProps = mergeDefaultProps(Component.type, newProps);
+
+  if (processing.isCreated) {
+    let newChild: VNode | null = null;
+    const type = Component.type;
+    if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) {
+      newChild = createFragmentVNode(null, newProps.children);
+    } else {
+      newChild = createUndeterminedVNode(type, null, newProps, processing.src);
+    }
+    newChild.parent = processing;
+    newChild.ref = processing.ref;
+    markVNodePath(newChild);
+    processing.child = newChild;
+
+    return newChild;
+  }
+
+  const firstChild = processing.child; // Memo只有一个child
+  if (!shouldUpdate) {
+    const oldProps = firstChild?.props;
+    // 默认是浅对比
+    const compare = Component.compare ? Component.compare : shallowCompare;
+    if (compare(oldProps, newProps) && processing.oldRef === processing.ref) {
+      return onlyUpdateChildVNodes(processing);
+    }
+  }
+
+  const newChild = updateVNode(firstChild!, newProps);
+  newChild.parent = processing;
+  newChild.cIndex = 0;
+  markVNodePath(newChild);
+  newChild.ref = processing.ref;
+  processing.child = newChild;
+
+  return newChild;
+}
+
+export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
+  return captureMemoComponent(processing, shouldUpdate);
+}
diff --git a/packages/inula-reactive/src/renderer/render/ReactiveComponent.ts b/packages/inula-reactive/src/renderer/render/ReactiveComponent.ts
new file mode 100644
index 00000000..33956375
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/ReactiveComponent.ts
@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { throwIfTrue } from '../utils/throwIfTrue';
+import { newTextDom } from '../../dom/DOMOperator';
+import { subscribeReactiveComponent } from '../../reactive/RContextCreator';
+import { getRNode, getValue, isPrimitive } from '../../reactive/Utils';
+
+export function captureRender(): VNode | null {
+  return null;
+}
+
+export function bubbleRender(processing: VNode) {
+  const text = processing.props;
+  const newText = getValue(text);
+
+  if (!processing.isCreated && processing.realNode != null) {
+    // 更新不需要处理
+  } else {
+    // 初始化
+    if (!isPrimitive(newText)) {
+      // 如果存在bug，可能出现这种情况
+      throwIfTrue(processing.realNode === null, 'The reactive obj value must be a primitive.');
+    }
+
+    // 获得对应节点
+    processing.realNode = newTextDom(newText, processing);
+
+    // 监听Reactive
+    subscribeReactiveComponent(processing.realNode, getRNode(text));
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/render/SuspenseComponent.ts b/packages/inula-reactive/src/renderer/render/SuspenseComponent.ts
new file mode 100644
index 00000000..8bb49a2e
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/SuspenseComponent.ts
@@ -0,0 +1,247 @@
+/*
+ * 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.
+ */
+
+import type { VNode, PromiseType } from '../Types';
+
+import { FlagUtils, Interrupted } from '../vnode/VNodeFlags';
+import { onlyUpdateChildVNodes, updateVNode, createFragmentVNode } from '../vnode/VNodeCreator';
+import { ClassComponent, ForwardRef, FunctionComponent, SuspenseComponent } from '../vnode/VNodeTags';
+import { pushForceUpdate } from '../UpdateHandler';
+import { launchUpdateFromVNode, tryRenderFromRoot } from '../TreeBuilder';
+import { updateShouldUpdateOfTree } from '../vnode/VNodeShouldUpdate';
+import { markVNodePath } from '../utils/vNodePath';
+
+export enum SuspenseChildStatus {
+  Init = '',
+  ShowChild = 'showChild',
+  ShowFallback = 'showFallback',
+}
+
+// 创建fallback子节点
+function createFallback(processing: VNode, fallbackChildren) {
+  const childFragment: VNode = processing.child!;
+  let fallbackFragment;
+  childFragment.childShouldUpdate = false;
+
+  if (!processing.isCreated) {
+    const oldFallbackFragment: VNode | null = processing.oldChild ? processing.oldChild.next : null;
+
+    if (oldFallbackFragment !== null) {
+      fallbackFragment = updateVNode(oldFallbackFragment, fallbackChildren);
+    } else {
+      fallbackFragment = createFragmentVNode(null, fallbackChildren);
+      FlagUtils.markAddition(fallbackFragment);
+    }
+  } else {
+    // 创建
+    fallbackFragment = createFragmentVNode(null, fallbackChildren);
+  }
+
+  processing.child = childFragment;
+  childFragment.next = fallbackFragment;
+  childFragment.parent = processing;
+  fallbackFragment.parent = processing;
+  fallbackFragment.eIndex = 1;
+  fallbackFragment.cIndex = 1;
+  markVNodePath(fallbackFragment);
+  processing.suspenseState!.childStatus = SuspenseChildStatus.ShowFallback;
+
+  return fallbackFragment;
+}
+
+// 创建子节点
+function createSuspenseChildren(processing: VNode, newChildren) {
+  let childFragment: VNode;
+  if (!processing.isCreated) {
+    const oldChildFragment: VNode | null = processing.child;
+    const oldFallbackFragment: VNode | null = oldChildFragment!.next;
+
+    childFragment = updateVNode(oldChildFragment!);
+    childFragment.next = null;
+    // 将Suspense新的子参数传给子Fragment
+    childFragment.props = processing.props.children;
+    childFragment.shouldUpdate = true;
+
+    // 删除fallback
+    if (oldFallbackFragment !== null) {
+      FlagUtils.setDeletion(oldFallbackFragment);
+      processing.dirtyNodes = [oldFallbackFragment];
+    }
+    // SuspenseComponent 中使用
+    processing.suspenseState!.childStatus = SuspenseChildStatus.ShowChild;
+  } else {
+    childFragment = createFragmentVNode(null, newChildren);
+  }
+
+  childFragment.parent = processing;
+  childFragment.cIndex = 0;
+  markVNodePath(childFragment);
+  processing.child = childFragment;
+  processing.suspenseState!.promiseResolved = false;
+  return processing.child;
+}
+
+export function captureSuspenseComponent(processing: VNode) {
+  const nextProps = processing.props;
+
+  // suspense被捕获后需要展示fallback
+  const showFallback = processing.suspenseState!.didCapture;
+
+  if (showFallback) {
+    processing.suspenseState!.didCapture = false;
+    const nextFallbackChildren = nextProps.fallback;
+    return createFallback(processing, nextFallbackChildren);
+  } else {
+    const newChildren = nextProps.children;
+    return createSuspenseChildren(processing, newChildren);
+  }
+}
+
+function updateFallback(processing: VNode): Array<VNode> | VNode | null {
+  const childFragment: VNode | null = processing.child;
+
+  if (childFragment?.childShouldUpdate) {
+    if (processing.suspenseState!.promiseResolved) {
+      // promise已完成，展示promise返回的新节点
+      return captureSuspenseComponent(processing);
+    } else {
+      // promise未完成，继续显示fallback，不需要继续刷新子节点
+      const fallbackFragment: VNode = processing.child!.next!;
+      childFragment.childShouldUpdate = false;
+      fallbackFragment.childShouldUpdate = false;
+      return null;
+    }
+  } else {
+    const children = onlyUpdateChildVNodes(processing);
+
+    if (children !== null) {
+      // child不需要更新，跳过child处理fallback
+      return children[1];
+    } else {
+      return null;
+    }
+  }
+}
+
+export function captureRender(processing: VNode, shouldUpdate: boolean): Array<VNode> | VNode | null {
+  if (!processing.isCreated && processing.oldProps === processing.props && !shouldUpdate) {
+    if (processing.suspenseState!.childStatus === SuspenseChildStatus.ShowFallback) {
+      // 当显示fallback时，suspense的子组件要更新
+      return updateFallback(processing);
+    }
+    return onlyUpdateChildVNodes(processing);
+  }
+
+  return captureSuspenseComponent(processing);
+}
+
+export function bubbleRender(processing: VNode) {
+  const { childStatus, oldChildStatus } = processing.suspenseState!;
+  if (
+    childStatus === SuspenseChildStatus.ShowFallback ||
+    (!processing.isCreated && oldChildStatus === SuspenseChildStatus.ShowFallback)
+  ) {
+    FlagUtils.markUpdate(processing);
+  }
+
+  return null;
+}
+
+function canCapturePromise(vNode: VNode | null): boolean {
+  return vNode?.suspenseState!.childStatus !== SuspenseChildStatus.ShowFallback && vNode?.props.fallback !== undefined;
+}
+
+// 处理Suspense子组件抛出的promise
+export function handleSuspenseChildThrowError(parent: VNode, processing: VNode, promise: PromiseType<any>): boolean {
+  let vNode: VNode | null = parent;
+
+  // 向上找到最近的不在fallback状态的Suspense，并触发重新渲染
+  do {
+    if (vNode.tag === SuspenseComponent && canCapturePromise(vNode)) {
+      if (vNode.suspenseState!.promiseSet === null) {
+        vNode.suspenseState!.promiseSet = new Set();
+      }
+      vNode.suspenseState!.promiseSet.add(promise);
+
+      // 移除生命周期flag 和 中断flag
+      FlagUtils.removeLifecycleEffectFlags(processing);
+      FlagUtils.removeFlag(processing, Interrupted);
+
+      if (processing.tag === ClassComponent) {
+        if (processing.isCreated) {
+          // 渲染类组件场景，要标志未完成（否则会触发componentWillUnmount）
+          processing.isSuspended = true;
+        } else {
+          // 类组件更新，标记强制更新，否则被memo等优化跳过
+          pushForceUpdate(processing);
+          launchUpdateFromVNode(processing);
+        }
+      }
+
+      if (processing.tag === FunctionComponent || processing.tag === ForwardRef) {
+        processing.isSuspended = true;
+      }
+      // 应该抛出promise未完成更新，标志待更新
+      processing.shouldUpdate = true;
+
+      vNode.suspenseState!.didCapture = true;
+      launchUpdateFromVNode(vNode);
+
+      return true;
+    }
+
+    vNode = vNode.parent;
+  } while (vNode !== null);
+
+  return false;
+}
+
+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
+
+function resolvePromise(suspenseVNode: VNode, promise: PromiseType<any>) {
+  const promiseCache = suspenseVNode.realNode;
+  if (promiseCache !== null) {
+    promiseCache.delete(promise);
+  }
+  suspenseVNode.suspenseState!.promiseResolved = true;
+  const root = updateShouldUpdateOfTree(suspenseVNode);
+  if (root !== null) {
+    tryRenderFromRoot(root);
+  }
+}
+
+// 对于每个promise，添加一个侦听器，以便当它resolve时，重新渲染
+export function listenToPromise(suspenseVNode: VNode) {
+  const promises: Set<PromiseType<any>> | null = suspenseVNode.suspenseState!.promiseSet;
+  if (promises !== null) {
+    suspenseVNode.suspenseState!.promiseSet = null;
+
+    // 记录已经监听的 promise
+    let promiseCache = suspenseVNode.realNode;
+    if (promiseCache === null) {
+      promiseCache = new PossiblyWeakSet();
+      suspenseVNode.realNode = new PossiblyWeakSet();
+    }
+
+    promises.forEach(promise => {
+      const resole = resolvePromise.bind(null, suspenseVNode, promise);
+      if (!promiseCache.has(promise)) {
+        promiseCache.add(promise);
+        // 监听promise
+        promise.then(resole, resole);
+      }
+    });
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/render/TreeRoot.ts b/packages/inula-reactive/src/renderer/render/TreeRoot.ts
new file mode 100644
index 00000000..0f02ff15
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/TreeRoot.ts
@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+import { throwIfTrue } from '../utils/throwIfTrue';
+import { processUpdates } from '../UpdateHandler';
+import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver';
+import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
+import { createChildrenByDiff } from '../diff/nodeDiffComparator';
+
+export function bubbleRender(processing: VNode) {
+  resetNamespaceCtx(processing);
+}
+
+function updateTreeRoot(processing) {
+  setNamespaceCtx(processing, processing.realNode);
+
+  const updates = processing.updates;
+  throwIfTrue(
+    processing.isCreated || updates === null,
+    'If the root does not have an updates, we should have already ' +
+      'bailed out. This error is likely caused by a bug. Please ' +
+      'file an issue.'
+  );
+
+  const newProps = processing.props;
+  const oldState = processing.state;
+  const oldElement = oldState !== null ? oldState.element : null;
+  processUpdates(processing, null, newProps);
+
+  const newState = processing.state;
+  // 为了保持对Dev Tools的兼容，这里还是使用element
+  const newElement = newState.element;
+  if (newElement === oldElement) {
+    return onlyUpdateChildVNodes(processing);
+  }
+  processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
+  return processing.child;
+}
+
+export function captureRender(processing: VNode): VNode | null {
+  return updateTreeRoot(processing);
+}
diff --git a/packages/inula-reactive/src/renderer/render/class/ClassLifeCycleProcessor.ts b/packages/inula-reactive/src/renderer/render/class/ClassLifeCycleProcessor.ts
new file mode 100644
index 00000000..4ebc4a29
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/class/ClassLifeCycleProcessor.ts
@@ -0,0 +1,163 @@
+/*
+ * 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.
+ */
+
+import type { Callback, VNode } from '../../Types';
+
+import { shallowCompare } from '../../utils/compare';
+import { pushUpdate, newUpdate, UpdateState, processUpdates } from '../../UpdateHandler';
+import { launchUpdateFromVNode } from '../../TreeBuilder';
+import { FlagUtils } from '../../vnode/VNodeFlags';
+import { getCurrentContext } from '../ClassComponent';
+import { PureComponent } from '../../components/BaseClassComponent';
+
+export function callDerivedStateFromProps(
+  processing: VNode,
+  getDerivedStateFromProps: (props: Record<string, any>, state: Record<string, any>) => Record<string, any>,
+  nextProps: Record<string, any>
+) {
+  if (getDerivedStateFromProps) {
+    const oldState = processing.state;
+
+    // 调用class组件的getDerivedStateFromProps函数
+    const newState = getDerivedStateFromProps(nextProps, oldState);
+
+    // 组件未返回state,需要返回旧的preState
+    processing.state = newState ? { ...oldState, ...newState } : oldState;
+  }
+}
+
+function changeStateContent(type: UpdateState, content: Record<string, any>, callback: Callback) {
+  // @ts-ignore
+  const vNode = this._vNode;
+
+  const update = newUpdate();
+  update.type = type;
+  if (type === UpdateState.Update || type === UpdateState.Override) {
+    update.content = content;
+  }
+  if (callback) {
+    update.callback = callback;
+  }
+
+  pushUpdate(vNode, update);
+  launchUpdateFromVNode(vNode);
+}
+
+export function callShouldComponentUpdate(
+  processing: VNode,
+  oldProps: Record<string, any>,
+  newProps: Record<string, any>,
+  newState: Record<string, any>,
+  newContext: Record<string, any>
+) {
+  const inst = processing.realNode;
+
+  if (inst.shouldComponentUpdate) {
+    return inst.shouldComponentUpdate(newProps, newState, newContext);
+  }
+
+  if (inst instanceof PureComponent) {
+    return !shallowCompare(oldProps, newProps) || !shallowCompare(inst.state, newState);
+  }
+
+  return true;
+}
+
+function setStateAndForceUpdateImpl(inst): void {
+  inst.setState = changeStateContent.bind(inst, UpdateState.Update);
+  inst.forceUpdate = changeStateContent.bind(inst, UpdateState.ForceUpdate, null);
+}
+
+export function callConstructor(processing: VNode, ctor: any, props: any): any {
+  const context = getCurrentContext(ctor, processing);
+  const inst = new ctor(props, context);
+  if (inst.state !== null && inst.state !== undefined) {
+    processing.state = inst.state;
+  }
+
+  setStateAndForceUpdateImpl(inst);
+  // 双向绑定processing和inst
+  processing.realNode = inst;
+  inst._vNode = processing;
+
+  return inst;
+}
+
+export function callComponentWillMount(processing, inst, newProps?) {
+  const oldState = inst.state;
+
+  if (inst.componentWillMount) {
+    inst.componentWillMount();
+  }
+  if (inst.UNSAFE_componentWillMount) {
+    inst.UNSAFE_componentWillMount();
+  }
+
+  if (oldState !== inst.state) {
+    changeStateContent.call(inst, UpdateState.Override, inst.state, null);
+  }
+
+  // 处理componentWillMount中可能存在的state更新行为
+  processUpdates(processing, inst, newProps);
+  inst.state = processing.state;
+}
+
+export function callComponentWillUpdate(inst, newProps, newState, nextContext) {
+  if (inst.componentWillUpdate) {
+    inst.componentWillUpdate(newProps, newState, nextContext);
+  }
+
+  if (inst.UNSAFE_componentWillUpdate) {
+    inst.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
+  }
+}
+
+export function callComponentWillReceiveProps(inst, newProps: Record<string, any>, newContext: Record<string, any>) {
+  if (inst.componentWillReceiveProps) {
+    const oldState = inst.state;
+    inst.componentWillReceiveProps(newProps, newContext);
+    if (inst.state !== oldState) {
+      changeStateContent.call(inst, UpdateState.Override, inst.state, null);
+    }
+  }
+  if (inst.UNSAFE_componentWillReceiveProps) {
+    const oldState = inst.state;
+    inst.UNSAFE_componentWillReceiveProps(newProps, newContext);
+    if (inst.state !== oldState) {
+      changeStateContent.call(inst, UpdateState.Override, inst.state, null);
+    }
+  }
+}
+
+export function markComponentDidMount(processing: VNode) {
+  const inst = processing.realNode;
+  if (inst.componentDidMount) {
+    FlagUtils.markUpdate(processing);
+  }
+}
+
+export function markGetSnapshotBeforeUpdate(processing: VNode) {
+  const inst = processing.realNode;
+  if (inst.getSnapshotBeforeUpdate) {
+    FlagUtils.markSnapshot(processing);
+  }
+}
+
+export function markComponentDidUpdate(processing: VNode) {
+  const inst = processing.realNode;
+  if (inst.componentDidUpdate) {
+    FlagUtils.markUpdate(processing);
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/render/index.ts b/packages/inula-reactive/src/renderer/render/index.ts
new file mode 100644
index 00000000..9f1c4dc1
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/render/index.ts
@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+import * as BaseComponentRender from './BaseComponent';
+import * as ClassComponentRender from './ClassComponent';
+import * as ContextConsumerRender from './ContextConsumer';
+import * as ContextProviderRender from './ContextProvider';
+import * as ForwardRefRender from './ForwardRef';
+import * as FragmentRender from './Fragment';
+import * as FunctionComponentRender from './FunctionComponent';
+import * as DomComponentRender from './DomComponent';
+import * as DomPortalRender from './DomPortal';
+import * as TreeRootRender from './TreeRoot';
+import * as DomTextRender from './DomText';
+import * as LazyComponentRender from './LazyComponent';
+import * as MemoComponentRender from './MemoComponent';
+import * as SuspenseComponentRender from './SuspenseComponent';
+import * as ReactiveComponentRender from './ReactiveComponent';
+
+import {
+  ClassComponent,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Fragment,
+  FunctionComponent,
+  DomComponent,
+  DomPortal,
+  TreeRoot,
+  DomText,
+  LazyComponent,
+  MemoComponent,
+  SuspenseComponent,
+  ReactiveComponent,
+} from '../vnode/VNodeTags';
+
+export { BaseComponentRender };
+
+export default {
+  [ClassComponent]: ClassComponentRender,
+  [ContextConsumer]: ContextConsumerRender,
+  [ContextProvider]: ContextProviderRender,
+  [ForwardRef]: ForwardRefRender,
+  [Fragment]: FragmentRender,
+  [FunctionComponent]: FunctionComponentRender,
+  [DomComponent]: DomComponentRender,
+  [DomPortal]: DomPortalRender,
+  [TreeRoot]: TreeRootRender,
+  [DomText]: DomTextRender,
+  [LazyComponent]: LazyComponentRender,
+  [MemoComponent]: MemoComponentRender,
+  [SuspenseComponent]: SuspenseComponentRender,
+  [ReactiveComponent]: ReactiveComponentRender,
+};
diff --git a/packages/inula-reactive/src/renderer/submit/HookEffectHandler.ts b/packages/inula-reactive/src/renderer/submit/HookEffectHandler.ts
new file mode 100644
index 00000000..b05dcb83
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/submit/HookEffectHandler.ts
@@ -0,0 +1,156 @@
+/*
+ * 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.
+ */
+
+/**
+ * useEffect 和 useLayoutEffect的执行逻辑
+ */
+
+import type { VNode } from '../Types';
+import type { Effect, Effect as HookEffect, EffectList } from '../hooks/HookType';
+import { runAsync } from '../taskExecutor/TaskExecutor';
+import { copyExecuteMode, InRender, setExecuteMode, changeMode } from '../ExecuteMode';
+import { EffectConstant } from '../hooks/EffectConstant';
+
+let hookEffects: Array<HookEffect | VNode> = [];
+let hookRemoveEffects: Array<HookEffect | VNode> = [];
+
+export function hasAsyncEffects() {
+  return hookEffects.length > 0 || hookRemoveEffects.length > 0;
+}
+
+// 是否正在异步调度effects
+let isScheduling = false;
+
+export function setSchedulingEffects(value) {
+  isScheduling = value;
+}
+export function isSchedulingEffects() {
+  return isScheduling;
+}
+
+export function runAsyncEffects() {
+  const preMode = copyExecuteMode();
+  changeMode(InRender, true);
+
+  // 调用effect destroy
+  const removeEffects = hookRemoveEffects;
+  hookRemoveEffects = [];
+  removeEffects.forEach((effect: Effect) => {
+    const destroy = effect.removeEffect;
+    effect.removeEffect = undefined;
+
+    if (typeof destroy === 'function') {
+      try {
+        destroy();
+      } catch (error) {
+        // 不处理副作用阶段抛出的异常
+      }
+    }
+  });
+
+  // 调用effect create
+  const createEffects = hookEffects;
+  hookEffects = [];
+  createEffects.forEach((effect: Effect) => {
+    try {
+      const create = effect.effect;
+
+      effect.removeEffect = create();
+    } catch (error) {
+      // 不处理副作用阶段抛出的异常
+    }
+  });
+
+  setExecuteMode(preMode);
+}
+
+export function callUseEffects(vNode: VNode) {
+  const effectList: EffectList = vNode.effectList;
+  if (effectList !== null) {
+    effectList.forEach(effect => {
+      const { effectConstant } = effect;
+      if (
+        (effectConstant & EffectConstant.Effect) !== EffectConstant.NoEffect &&
+        (effectConstant & EffectConstant.DepsChange) !== EffectConstant.NoEffect
+      ) {
+        hookEffects.push(effect);
+        hookRemoveEffects.push(effect);
+
+        // 异步调用
+        if (!isScheduling) {
+          isScheduling = true;
+          runAsync(runAsyncEffects);
+        }
+      }
+    });
+  }
+}
+
+// 在销毁vNode的时候调用remove
+export function callEffectRemove(vNode: VNode) {
+  const effectList: EffectList = vNode.effectList;
+  if (effectList !== null) {
+    effectList.forEach(effect => {
+      const { removeEffect, effectConstant } = effect;
+
+      if (removeEffect !== undefined) {
+        if ((effectConstant & EffectConstant.Effect) !== EffectConstant.NoEffect) {
+          // 如果是useEffect，就异步调用
+          hookRemoveEffects.push(effect);
+
+          if (!isScheduling) {
+            isScheduling = true;
+            runAsync(runAsyncEffects);
+          }
+        } else {
+          // 是useLayoutEffect，直接执行
+          removeEffect();
+        }
+      }
+    });
+  }
+}
+
+// 同步执行UseLayoutEffect的remove
+export function callUseLayoutEffectRemove(vNode: VNode) {
+  const effectList: EffectList = vNode.effectList;
+
+  const layoutLabel = EffectConstant.LayoutEffect | EffectConstant.DepsChange;
+  if (effectList !== null) {
+    effectList.forEach(effect => {
+      if ((effect.effectConstant & layoutLabel) === layoutLabel) {
+        const remove = effect.removeEffect;
+        effect.removeEffect = undefined;
+        if (typeof remove === 'function') {
+          remove();
+        }
+      }
+    });
+  }
+}
+
+// 同步执行UseLayoutEffect
+export function callUseLayoutEffectCreate(vNode: VNode) {
+  const effectList: EffectList = vNode.effectList;
+  if (effectList !== null) {
+    const layoutLabel = EffectConstant.LayoutEffect | EffectConstant.DepsChange;
+    effectList.forEach(effect => {
+      if ((effect.effectConstant & layoutLabel) === layoutLabel) {
+        const create = effect.effect;
+        effect.removeEffect = create();
+      }
+    });
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/submit/LifeCycleHandler.ts b/packages/inula-reactive/src/renderer/submit/LifeCycleHandler.ts
new file mode 100644
index 00000000..e295c05e
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/submit/LifeCycleHandler.ts
@@ -0,0 +1,584 @@
+/*
+ * 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.
+ */
+
+/**
+ * 该文件负责把更新应用到界面上 以及 和生命周期的相关调用
+ */
+
+import type { Container } from '../../dom/DOMOperator';
+import type { RefType, VNode } from '../Types';
+
+import { listenToPromise, SuspenseChildStatus } from '../render/SuspenseComponent';
+import {
+  FunctionComponent,
+  ForwardRef,
+  ClassComponent,
+  TreeRoot,
+  DomComponent,
+  DomText,
+  DomPortal,
+  SuspenseComponent,
+  MemoComponent, ReactiveComponent,
+} from '../vnode/VNodeTags';
+import { FlagUtils, ResetText, Clear, Update, DirectAddition } from '../vnode/VNodeFlags';
+import { mergeDefaultProps } from '../render/LazyComponent';
+import {
+  submitDomUpdate,
+  clearText,
+  appendChildElement,
+  insertDomBefore,
+  removeChildDom,
+  hideDom,
+  unHideDom,
+} from '../../dom/DOMOperator';
+import {
+  callEffectRemove,
+  callUseEffects,
+  callUseLayoutEffectCreate,
+  callUseLayoutEffectRemove,
+} from './HookEffectHandler';
+import { handleSubmitError } from '../ErrorHandler';
+import { travelVNodeTree, clearVNode, isDomVNode, getSiblingDom, findDOMContainer, isDomContainer } from '../vnode/VNodeUtils';
+import { shouldAutoFocus } from '../../dom/utils/Common';
+import { BELONG_CLASS_VNODE_KEY } from '../vnode/VNode';
+import { cleanupRContext } from '../../reactive/RContext';
+
+function callComponentWillUnmount(vNode: VNode, instance: any) {
+  try {
+    instance.componentWillUnmount();
+  } catch (error) {
+    handleSubmitError(vNode, error);
+  }
+}
+
+// 调用界面变化前的生命周期
+function callBeforeSubmitLifeCycles(vNode: VNode): void {
+  if (vNode.tag === ClassComponent && !vNode.isCreated) {
+    // 调用instance.getSnapshotBeforeUpdate
+    const prevProps = vNode.isLazyComponent ? mergeDefaultProps(vNode.type, vNode.oldProps) : vNode.oldProps;
+    const prevState = vNode.oldState;
+    const instance = vNode.realNode;
+
+    const snapshot = instance.getSnapshotBeforeUpdate(prevProps, prevState);
+
+    // __snapshotResult会在调用componentDidUpdate的时候作为第三个参数
+    instance.__snapshotResult = snapshot;
+  }
+}
+
+// 调用vNode.stateCallbacks
+function callStateCallback(vNode: VNode, obj: any): void {
+  const stateCallbacks = vNode.stateCallbacks;
+  vNode.stateCallbacks = null;
+  if (stateCallbacks !== null) {
+    stateCallbacks.forEach(callback => {
+      if (typeof callback === 'function') {
+        callback.call(obj);
+      }
+    });
+  }
+}
+
+// 调用界面变化后的生命周期
+function callAfterSubmitLifeCycles(vNode: VNode): void {
+  switch (vNode.tag) {
+    case FunctionComponent:
+    case ForwardRef: {
+      // 执行useLayoutEffect的create方法
+      callUseLayoutEffectCreate(vNode);
+
+      callUseEffects(vNode);
+      return;
+    }
+    case ClassComponent: {
+      const instance = vNode.realNode;
+      if ((vNode.flags & Update) === Update) {
+        if (vNode.isCreated) {
+          instance.componentDidMount();
+        } else {
+          const prevProps = vNode.isLazyComponent ? mergeDefaultProps(vNode.type, vNode.oldProps) : vNode.oldProps;
+          const prevState = vNode.oldState;
+
+          instance.componentDidUpdate(prevProps, prevState, instance.__snapshotResult);
+        }
+      }
+
+      callStateCallback(vNode, instance);
+      return;
+    }
+    case TreeRoot: {
+      const instance = vNode.child !== null ? vNode.child.realNode : null;
+      callStateCallback(vNode, instance);
+      return;
+    }
+    case DomComponent: {
+      if (vNode.isCreated && (vNode.flags & Update) === Update) {
+        // button、input、select、textarea、如果有 autoFocus 属性需要focus
+        if (shouldAutoFocus(vNode.type, vNode.props)) {
+          vNode.realNode.focus();
+        }
+      }
+    }
+
+    // No Default
+  }
+}
+
+function hideOrUnhideAllChildren(vNode, isHidden) {
+  travelVNodeTree(
+    vNode,
+    (node: VNode) => {
+      const instance = node.realNode;
+
+      if (node.tag === DomComponent || node.tag === DomText) {
+        if (isHidden) {
+          hideDom(node.tag, instance);
+        } else {
+          unHideDom(node.tag, instance, node.props);
+        }
+      }
+    },
+    null,
+    vNode,
+    null
+  );
+}
+
+function handleRef(vNode: VNode, ref, val) {
+  if (ref !== null && ref !== undefined) {
+    const refType = typeof ref;
+
+    if (refType === 'function') {
+      ref(val);
+    } else if (refType === 'object') {
+      (<RefType>ref).current = val;
+    } else {
+      if (vNode[BELONG_CLASS_VNODE_KEY] && vNode[BELONG_CLASS_VNODE_KEY].realNode) {
+        vNode[BELONG_CLASS_VNODE_KEY].realNode.refs[String(ref)] = val;
+      }
+    }
+  }
+}
+
+function attachRef(vNode: VNode) {
+  const ref = vNode.ref;
+
+  handleRef(vNode, ref, vNode.realNode);
+}
+
+function detachRef(vNode: VNode, isOldRef?: boolean) {
+  const ref = isOldRef ? vNode.oldRef : vNode.ref;
+
+  handleRef(vNode, ref, null);
+}
+
+// 卸载vNode，递归遍历子vNode
+function unmountNestedVNodes(vNode: VNode): void {
+  travelVNodeTree(
+    vNode,
+    node => {
+      unmountVNode(node);
+    },
+    node =>
+      // 如果是DomPortal，不需要遍历child
+      node.tag === DomPortal,
+    vNode,
+    null
+  );
+}
+
+// 遍历所有子节点：删除dom节点，detach ref 和 调用componentWillUnmount()
+function unmountDomComponents(vNode: VNode): void {
+  let currentParentIsValid = false;
+
+  // 这两个变量要一起更新
+  let currentParent;
+
+  let node = vNode;
+
+  while (true) {
+    // handle
+    if (!currentParentIsValid) {
+      let parent = node.parent;
+      let tag;
+      while (parent !== null) {
+        tag = parent.tag;
+        if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
+          currentParent = parent.realNode;
+          break;
+        }
+        parent = parent.parent;
+      }
+      currentParentIsValid = true;
+    }
+
+    if (node.tag === DomComponent || node.tag === DomText || node.tag === ReactiveComponent) {
+      let nd = node;
+
+      // 卸载vNode，递归遍历子vNode
+      outer: while (true) {
+        unmountVNode(nd);
+
+        // 找子节点
+        const childVNode = nd.child;
+        if (childVNode !== null && nd.tag !== DomPortal) {
+          childVNode.parent = nd;
+          nd = childVNode;
+          continue;
+        }
+
+        // 回到开始节点
+        if (nd === node) {
+          break;
+        }
+
+        // 找兄弟，没有就往上再找兄弟
+        while (nd.next === null) {
+          if (nd.parent === null || nd.parent === node) {
+            break outer;
+          }
+          nd = nd.parent;
+        }
+        // 找到兄弟
+        const siblingVNode = nd.next;
+        siblingVNode.parent = nd.parent;
+        nd = siblingVNode;
+      }
+
+      // 在所有子项都卸载后，删除dom树中的节点
+      removeChildDom(currentParent, node.realNode);
+    } else if (node.tag === DomPortal) {
+      if (node.child !== null) {
+        currentParent = node.realNode;
+      }
+    } else {
+      unmountVNode(node);
+    }
+
+    // 找子节点
+    const childVNode = node.child;
+    if (childVNode !== null && node.tag !== DomComponent && node.tag !== DomText) {
+      childVNode.parent = node;
+      node = childVNode;
+      continue;
+    }
+
+    // 回到开始节点
+    if (node === vNode) {
+      return null;
+    }
+
+    // 找兄弟，没有就往上再找兄弟
+    while (node.next === null) {
+      if (node.parent === null || node.parent === vNode) {
+        return null;
+      }
+      node = node.parent;
+
+      if (node.tag === DomPortal) {
+        // 当离开portal，需要重新设置parent
+        currentParentIsValid = false;
+      }
+    }
+    // 找到兄弟
+    const siblingVNode = node.next;
+    siblingVNode.parent = node.parent;
+    node = siblingVNode;
+  }
+}
+
+// dom节点上的attr值，如果是reactive对象，会自动创建attrEffect。所以在清除时，需要销毁attrEffect。
+function detachAttrRContexts(vNode: VNode) {
+  const attrRContexts = vNode.attrRContexts;
+  if (attrRContexts) {
+    for (const attrRContext of attrRContexts) {
+      cleanupRContext(attrRContext);
+      attrRContext.callback = null;
+    }
+
+    attrRContexts.clear();
+  }
+}
+
+// 函数组件和Class组件会自动创rContext，所以在清除时，需要销毁rContext
+function detachCompRContext(vNode: VNode) {
+  const rContext = vNode.compRContext;
+  if (rContext) {
+    cleanupRContext(rContext);
+    rContext.callback = null;
+  }
+}
+
+// 卸载一个vNode，不会递归
+function unmountVNode(vNode: VNode): void {
+  switch (vNode.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent: {
+      callEffectRemove(vNode);
+
+      detachCompRContext(vNode);
+      break;
+    }
+    case ClassComponent: {
+      detachRef(vNode);
+
+      const instance = vNode.realNode;
+      // 当constructor中抛出异常时，instance会是null，这里判断一下instance是否为空
+      // suspense打断时不需要触发WillUnmount
+      if (instance && typeof instance.componentWillUnmount === 'function' && !vNode.isSuspended) {
+        callComponentWillUnmount(vNode, instance);
+      }
+
+      // InulaX会在classComponentWillUnmount中清除对VNode的引入用
+      if (vNode.classComponentWillUnmount) {
+        vNode.classComponentWillUnmount(vNode);
+        vNode.classComponentWillUnmount = null;
+      }
+
+      detachCompRContext(vNode);
+      break;
+    }
+    case DomComponent: {
+      detachRef(vNode);
+
+      detachAttrRContexts(vNode);
+      break;
+    }
+    case DomPortal: {
+      // 这里会递归
+      unmountDomComponents(vNode);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+function insertDom(parent, realNode, beforeDom) {
+  if (beforeDom) {
+    insertDomBefore(parent, realNode, beforeDom);
+  } else {
+    appendChildElement(parent, realNode);
+  }
+}
+
+function insertOrAppendPlacementNode(node: VNode, beforeDom: Element | null, parent: Element | Container): void {
+  const { tag, realNode } = node;
+
+  if (isDomVNode(node)) {
+    insertDom(parent, realNode, beforeDom);
+  } else if (tag === DomPortal) {
+    // 这里不做处理，直接在portal中处理
+  } else {
+    // 插入子节点们
+    let child = node.child;
+    while (child !== null) {
+      insertOrAppendPlacementNode(child, beforeDom, parent);
+      child = child.next;
+    }
+  }
+}
+
+function submitAddition(vNode: VNode): void {
+  let parent = vNode.parent;
+  let parentDom;
+  let tag;
+  while (parent !== null) {
+    tag = parent.tag;
+    if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
+      parentDom = parent.realNode;
+      break;
+    }
+    parent = parent.parent;
+  }
+
+  if ((parent!.flags & ResetText) === ResetText) {
+    // 在insert之前先reset
+    clearText(parentDom);
+    FlagUtils.removeFlag(parent!, ResetText);
+  }
+
+  if ((vNode.flags & DirectAddition) === DirectAddition) {
+    insertOrAppendPlacementNode(vNode, null, parentDom);
+    FlagUtils.removeFlag(vNode, DirectAddition);
+    return;
+  }
+  const before = getSiblingDom(vNode);
+  insertOrAppendPlacementNode(vNode, before, parentDom);
+}
+
+function submitClear(vNode: VNode): void {
+  const realNode = vNode.realNode;
+  const cloneDom = realNode.cloneNode(false); // 复制节点后inula添加给dom的属性未能复制
+  // 真实 dom 获取的keys只包含新增的属性
+  // 比如真实 dom 拿到的 keys 一般只有两个 inula 自定义属性
+  // 但考虑到用户可能自定义其他属性，所以采用遍历赋值的方式
+  const customizeKeys = Object.keys(realNode);
+  const keyLength = customizeKeys.length;
+  for (let i = 0; i < keyLength; i++) {
+    const key = customizeKeys[i];
+    // 测试代码 mock 实例的全部可遍历属性都会被Object.keys方法读取到
+    // children 属性被复制意味着复制了子节点，因此要排除
+    if (key !== 'children') {
+      cloneDom[key] = realNode[key]; // 复制cloneNode未能复制的属性
+    }
+  }
+
+  let parent = vNode.parent;
+  let parentDom;
+  let tag;
+  while (parent !== null) {
+    tag = parent.tag;
+    if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
+      parentDom = parent.realNode;
+      break;
+    }
+    parent = parent.parent;
+  }
+  let clearChild = vNode.clearChild as VNode; // 上次渲染的child保存在clearChild属性中
+  // 卸载 clearChild 和 它的兄弟节点
+  while (clearChild) {
+    // 卸载子vNode，递归遍历子vNode
+    unmountNestedVNodes(clearChild);
+    clearVNode(clearChild);
+    clearChild = clearChild.next as VNode;
+  }
+
+  // 在所有子项都卸载后，删除dom树中的节点
+  removeChildDom(parentDom, vNode.realNode);
+  const realNodeNext = getSiblingDom(vNode);
+  insertDom(parentDom, cloneDom, realNodeNext);
+  vNode.realNode = cloneDom;
+  attachRef(vNode);
+  FlagUtils.removeFlag(vNode, Clear);
+  vNode.clearChild = null;
+}
+
+function submitClear2(vNode: VNode): void {
+  let domVNode;
+  if (isDomContainer(vNode)) {
+    domVNode = vNode;
+  }
+
+  // 1、拿到最近的父DOM
+  domVNode = findDOMContainer(vNode);
+  const dom = domVNode.realNode;
+
+  // 2、复制DOM节点
+  const cloneDom = dom.cloneNode(false);
+
+  // 3、复制cloneNode未能复制的属性
+  // 真实 dom 获取的keys只包含新增的属性
+  // 比如真实 dom 拿到的 keys 一般只有两个 horizon 自定义属性
+  // 但考虑到用户可能自定义其他属性，所以采用遍历赋值的方式
+  const customizeKeys = Object.keys(dom);
+  const keyLength = customizeKeys.length;
+  for (let i = 0; i < keyLength; i++) {
+    const key = customizeKeys[i];
+    // 测试代码 mock 实例的全部可遍历属性都会被Object.keys方法读取到
+    // children 属性被复制意味着复制了子节点，因此要排除
+    if (key !== 'children') {
+      cloneDom[key] = dom[key];
+    }
+  }
+
+  // 4、拿到最近的父DOM的父DOM
+  const parentDomVNode = findDOMContainer(domVNode);
+  const parentDom = parentDomVNode.realNode;
+
+  // 5、执行unmount
+  let clearChild = vNode.clearChild as VNode;
+  // 卸载 clearChild 和 它的兄弟节点
+  while (clearChild) {
+    // 卸载子vNode，递归遍历子vNode
+    unmountNestedVNodes(clearChild);
+    clearVNode(clearChild);
+    clearChild = clearChild.next as VNode;
+  }
+
+  // 6、在所有子项都卸载后，删除dom树中的节点
+  removeChildDom(parentDom, dom);
+
+  // 7、插入cloneDom
+  const realNodeNext = getSiblingDom(domVNode);
+  insertDom(parentDom, cloneDom, realNodeNext);
+
+  // 8、重置realNode
+  domVNode.realNode = cloneDom;
+  attachRef(domVNode);
+
+  // 9、清理
+  FlagUtils.removeFlag(vNode, Clear);
+  vNode.clearChild = null;
+}
+
+function submitDeletion(vNode: VNode): void {
+  // 遍历所有子节点：删除dom节点，detach ref 和 调用componentWillUnmount()
+  unmountDomComponents(vNode);
+
+  // 置空vNode
+  clearVNode(vNode);
+}
+
+function submitSuspenseComponent(vNode: VNode) {
+  const { childStatus } = vNode.suspenseState!;
+  if (childStatus !== SuspenseChildStatus.Init) {
+    hideOrUnhideAllChildren(vNode.child, childStatus === SuspenseChildStatus.ShowFallback);
+  }
+}
+
+function submitUpdate(vNode: VNode): void {
+  switch (vNode.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent: {
+      // 执行useLayoutEffect的remove方法
+      callUseLayoutEffectRemove(vNode);
+      break;
+    }
+    case DomComponent:
+    case DomText: {
+      submitDomUpdate(vNode.tag, vNode);
+      break;
+    }
+    case SuspenseComponent: {
+      submitSuspenseComponent(vNode);
+      listenToPromise(vNode);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+function submitResetTextContent(vNode: VNode) {
+  clearText(vNode.realNode);
+}
+
+export {
+  callBeforeSubmitLifeCycles,
+  submitResetTextContent,
+  submitAddition,
+  submitDeletion,
+  submitClear,
+  submitClear2,
+  submitUpdate,
+  callAfterSubmitLifeCycles,
+  attachRef,
+  detachRef,
+};
diff --git a/packages/inula-reactive/src/renderer/submit/Submit.ts b/packages/inula-reactive/src/renderer/submit/Submit.ts
new file mode 100644
index 00000000..700f0f3a
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/submit/Submit.ts
@@ -0,0 +1,218 @@
+/*
+ * 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.
+ */
+
+import type { VNode } from '../Types';
+
+import { FlagUtils, Addition, Snapshot, ResetText, Ref, Update, Deletion, Clear, Callback } from '../vnode/VNodeFlags';
+import { prepareForSubmit, resetAfterSubmit } from '../../dom/DOMOperator';
+import { handleSubmitError } from '../ErrorHandler';
+import {
+  attachRef,
+  callAfterSubmitLifeCycles,
+  callBeforeSubmitLifeCycles,
+  submitDeletion,
+  submitAddition,
+  submitResetTextContent,
+  submitUpdate,
+  detachRef,
+  submitClear,
+  submitClear2,
+} from './LifeCycleHandler';
+import { tryRenderFromRoot } from '../TreeBuilder';
+import { InRender, copyExecuteMode, setExecuteMode, changeMode } from '../ExecuteMode';
+import { isSchedulingEffects, setSchedulingEffects } from './HookEffectHandler';
+import { getStartVNode } from '../GlobalVar';
+
+let rootThrowError = null;
+
+// 防止死循环调用update
+const LOOPING_UPDATE_LIMIT = 50;
+let loopingUpdateCount = 0;
+let lastRoot: VNode | null = null;
+
+function beforeSubmit(dirtyNodes: Array<VNode>) {
+  let node;
+  const nodesLength = dirtyNodes.length;
+  for (let i = 0; i < nodesLength; i++) {
+    node = dirtyNodes[i];
+    try {
+      if ((node.flags & Snapshot) === Snapshot) {
+        callBeforeSubmitLifeCycles(node);
+      }
+    } catch (error) {
+      handleSubmitError(node, error);
+    }
+  }
+}
+
+function submit(dirtyNodes: Array<VNode>) {
+  let node;
+  const nodesLength = dirtyNodes.length;
+  let isAdd;
+  let isUpdate;
+  let isDeletion;
+  let isClear;
+  for (let i = 0; i < nodesLength; i++) {
+    node = dirtyNodes[i];
+    try {
+      if ((node.flags & ResetText) === ResetText) {
+        submitResetTextContent(node);
+      }
+
+      if ((node.flags & Ref) === Ref) {
+        if (!node.isCreated) {
+          // 需要执行
+          detachRef(node, true);
+        }
+      }
+
+      isAdd = (node.flags & Addition) === Addition;
+      isUpdate = (node.flags & Update) === Update;
+      if (isAdd && isUpdate) {
+        // Addition
+        submitAddition(node);
+        FlagUtils.removeFlag(node, Addition);
+
+        // Update
+        submitUpdate(node);
+      } else {
+        isDeletion = (node.flags & Deletion) === Deletion;
+        isClear = (node.flags & Clear) === Clear;
+        if (isAdd) {
+          submitAddition(node);
+          FlagUtils.removeFlag(node, Addition);
+        } else if (isUpdate) {
+          submitUpdate(node);
+        } else if (isDeletion) {
+          submitDeletion(node);
+        }
+        if (isClear) {
+          // submitClear2(node);
+          submitClear(node);
+        }
+      }
+    } catch (error) {
+      handleSubmitError(node, error);
+    }
+  }
+}
+
+function afterSubmit(dirtyNodes: Array<VNode>) {
+  let node;
+  const nodesLength = dirtyNodes.length;
+  for (let i = 0; i < nodesLength; i++) {
+    node = dirtyNodes[i];
+    try {
+      if ((node.flags & Update) === Update || (node.flags & Callback) === Callback) {
+        callAfterSubmitLifeCycles(node);
+      }
+
+      if ((node.flags & Ref) === Ref) {
+        attachRef(node);
+      }
+    } catch (error) {
+      handleSubmitError(node, error);
+    }
+  }
+}
+
+export function setRootThrowError(error: any) {
+  if (!rootThrowError) {
+    rootThrowError = error;
+  }
+}
+
+// 统计root同步重渲染的次数，如果太多可能是无限循环
+function countLoopingUpdate(root: VNode) {
+  if (root.shouldUpdate) {
+    if (root === lastRoot) {
+      loopingUpdateCount++;
+    } else {
+      loopingUpdateCount = 0;
+      lastRoot = root;
+    }
+  } else {
+    loopingUpdateCount = 0;
+  }
+}
+
+export function checkLoopingUpdateLimit() {
+  if (loopingUpdateCount > LOOPING_UPDATE_LIMIT) {
+    loopingUpdateCount = 0;
+    lastRoot = null;
+
+    throw Error(
+      `The number of updates exceeds the upper limit ${LOOPING_UPDATE_LIMIT}.
+      A component maybe repeatedly invokes setState on componentWillUpdate or componentDidUpdate.`
+    );
+  }
+}
+
+export function submitToRender(treeRoot) {
+  treeRoot.shouldUpdate = treeRoot.childShouldUpdate;
+  // 置空task，让才能加入新的render任务
+  treeRoot.task = null;
+
+  const startVNode = getStartVNode()!;
+
+  if (FlagUtils.hasAnyFlag(startVNode)) {
+    // 把自己加上
+    if (startVNode.dirtyNodes === null) {
+      startVNode.dirtyNodes = [startVNode];
+    } else {
+      startVNode.dirtyNodes.push(startVNode);
+    }
+  }
+
+  const dirtyNodes = startVNode.dirtyNodes;
+  if (dirtyNodes !== null && dirtyNodes.length) {
+    const preMode = copyExecuteMode();
+    changeMode(InRender, true);
+
+    prepareForSubmit();
+    // before submit阶段
+    beforeSubmit(dirtyNodes);
+
+    // submit阶段
+    submit(dirtyNodes);
+
+    resetAfterSubmit();
+
+    // after submit阶段
+    afterSubmit(dirtyNodes);
+
+    setExecuteMode(preMode);
+    dirtyNodes.length = 0;
+    startVNode.dirtyNodes = null;
+  }
+
+  if (isSchedulingEffects()) {
+    setSchedulingEffects(false);
+  }
+
+  // 统计root同步重渲染的次数，如果太多可能是无线循环
+  countLoopingUpdate(treeRoot);
+
+  // 在退出`submit` 之前始终调用此函数，以确保任何已计划在此根上执行的update被执行。
+  tryRenderFromRoot(treeRoot);
+
+  if (rootThrowError) {
+    const error = rootThrowError;
+    rootThrowError = null;
+    throw error;
+  }
+
+  return null;
+}
diff --git a/packages/inula-reactive/src/renderer/taskExecutor/BrowserAsync.ts b/packages/inula-reactive/src/renderer/taskExecutor/BrowserAsync.ts
new file mode 100644
index 00000000..c127b2ce
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/taskExecutor/BrowserAsync.ts
@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+/**
+ * 浏览器相关实现
+ */
+
+let isMessageLoopRunning = false;
+let browserCallback = null;
+let port1: MessagePort |null = null;
+let port2: MessagePort |null = null;
+let isTestRuntime = false;
+
+export function isOverTime() {
+  return false;
+}
+
+function asyncCall() {
+  if (isTestRuntime) {
+    setTimeout(callRenderTasks, 0);
+  } else {
+    (port2 as unknown as MessagePort).postMessage(null);
+  }
+}
+
+// 1、设置deadline；2、回调TaskExecutor传过来的browserCallback
+const callRenderTasks = () => {
+  if (browserCallback === null) {
+    return;
+  }
+
+  try {
+    // 执行callback
+    const hasMoreTask = (browserCallback as any)();
+
+    if (!hasMoreTask) {
+      // 没有更多task
+      isMessageLoopRunning = false;
+      browserCallback = null;
+    } else {
+      // 还有task，继续调用
+      asyncCall();
+    }
+  } catch (error) {
+    asyncCall();
+    throw error;
+  }
+};
+
+if (typeof MessageChannel === 'function') {
+  const mc = new MessageChannel();
+  port1 = mc.port1;
+  port1.onmessage = callRenderTasks;
+  port2 = mc.port2;
+} else {
+  // 测试环境没有 MessageChannel
+  isTestRuntime = true;
+}
+
+export function requestBrowserCallback(callback) {
+  browserCallback = callback;
+
+  if (!isMessageLoopRunning) {
+    isMessageLoopRunning = true;
+    asyncCall();
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/taskExecutor/RenderQueue.ts b/packages/inula-reactive/src/renderer/taskExecutor/RenderQueue.ts
new file mode 100644
index 00000000..9467a732
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/taskExecutor/RenderQueue.ts
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+/**
+ * 利用TaskExecutor的异步任务，封装一个renderQueue来执行同步的渲染callback
+ */
+
+import { runAsync, cancelTask, ImmediatePriority } from './TaskExecutor';
+
+type RenderCallback = () => RenderCallback | null;
+
+let renderQueue: Array<RenderCallback> | null = null;
+// 保存正在等待的异步Task，可以用于取消
+let callingQueueTask: any | null = null;
+// 防止重入
+let isCallingRenderQueue = false;
+
+// 执行render回调
+function callRenderQueue() {
+  if (!isCallingRenderQueue && renderQueue !== null) {
+    // 防止重入
+    isCallingRenderQueue = true;
+
+    try {
+      let callback;
+      while ((callback = renderQueue.shift())) {
+        callback();
+      }
+
+      renderQueue = null;
+    } catch (error) {
+      throw error;
+    } finally {
+      isCallingRenderQueue = false;
+    }
+  }
+}
+
+export function callRenderQueueImmediate() {
+  if (callingQueueTask !== null) {
+    // 取消异步调度
+    cancelTask(callingQueueTask);
+    callingQueueTask = null;
+  }
+
+  callRenderQueue();
+}
+
+export function pushRenderCallback(callback: RenderCallback) {
+  if (renderQueue === null) {
+    renderQueue = [callback];
+    // 高优先级的异步调度
+    callingQueueTask = runAsync(callRenderQueue, ImmediatePriority);
+  } else {
+    // 不需要调度，在syncQueue创建的时候已经调度了
+    renderQueue.push(callback);
+  }
+
+  // 返回一个空对象，用于区别null
+  return {};
+}
diff --git a/packages/inula-reactive/src/renderer/taskExecutor/TaskExecutor.ts b/packages/inula-reactive/src/renderer/taskExecutor/TaskExecutor.ts
new file mode 100644
index 00000000..8805cda7
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/taskExecutor/TaskExecutor.ts
@@ -0,0 +1,110 @@
+/*
+ * 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.
+ */
+
+/**
+ * 调度器的核心实现
+ */
+
+import { Node } from '../taskExecutor/TaskQueue';
+import { requestBrowserCallback, isOverTime } from './BrowserAsync';
+
+import { add, shift, first, remove } from './TaskQueue';
+
+const ImmediatePriority = 1;
+const NormalPriority = 10;
+
+// 用于控制插入任务的顺序
+let idCounter = 1;
+
+// 正在执行task
+let isProcessing = false;
+
+// 调度中，等待浏览器回调
+let isWaiting = false;
+
+function callTasks() {
+  isWaiting = false;
+  isProcessing = true;
+
+  let task: Node | null = null;
+  try {
+    task = first();
+
+    // 循环执行task
+    while (task !== null) {
+      if (isOverTime()) {
+        // 超过了deadline
+        break;
+      }
+
+      const callback = task.callback;
+      if (callback !== null) {
+        task.callback = null;
+
+        callback();
+
+        if (task === first()) {
+          shift();
+        } else {
+          // 执行任务中可能插入了新任务
+          remove(task);
+        }
+      } else {
+        shift();
+      }
+
+      task = first();
+    }
+
+    // 返回是否还有任务，如果有，说明是被中断了
+    return task !== null;
+  } finally {
+    isProcessing = false;
+  }
+}
+
+function runAsync(callback, priorityLevel = NormalPriority) {
+  let increment;
+  switch (priorityLevel) {
+    case ImmediatePriority:
+      increment = -1;
+      break;
+    case NormalPriority:
+    default:
+      increment = 10000;
+      break;
+  }
+
+  const task = {
+    id: idCounter++,
+    callback,
+    order: idCounter + increment,
+  };
+
+  add(task);
+
+  if (!isWaiting && !isProcessing) {
+    isWaiting = true;
+    requestBrowserCallback(callTasks);
+  }
+
+  return task;
+}
+
+function cancelTask(task) {
+  task.callback = null;
+}
+
+export { ImmediatePriority, NormalPriority, runAsync, cancelTask };
diff --git a/packages/inula-reactive/src/renderer/taskExecutor/TaskQueue.ts b/packages/inula-reactive/src/renderer/taskExecutor/TaskQueue.ts
new file mode 100644
index 00000000..c0d36184
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/taskExecutor/TaskQueue.ts
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+/**
+ * 任务列表的实现
+ */
+
+type Queue = Array<Node>;
+export type Node = {
+  id: number;
+  order: number;
+  callback: (() => void) | null;
+};
+
+// 任务队列
+const taskQueue: Queue = [];
+
+function compare(a: Node, b: Node) {
+  // 优先先用index排序，其次用id
+  const diff = a.order - b.order;
+  return diff !== 0 ? diff : a.id - b.id;
+}
+
+// 二分法查找第一个大于等于 value 的下标，都比 value 小则返回 -1，时间复杂度O(logn)
+function getBiggerIdx(node: Node) {
+  let left = 0;
+  let right = taskQueue.length - 1;
+
+  while (left <= right) {
+    const middle = left + ((right - left) >> 1);
+
+    if (compare(taskQueue[middle], node) > 0) {
+      right = middle - 1;
+    } else {
+      left = middle + 1;
+    }
+  }
+
+  return left < taskQueue.length ? left : -1;
+}
+
+export function add(node: Node): void {
+  // 查找第一个大于等于 value 的下标，都比 value 小则返回 -1
+  const idx = getBiggerIdx(node);
+
+  if (idx === -1) {
+    taskQueue.push(node);
+  } else {
+    taskQueue.splice(idx, 0, node);
+  }
+}
+
+export function first(): Node | null {
+  const val: Node | null | undefined = taskQueue[0];
+  return val ?? null;
+}
+
+export function shift(): Node | null {
+  const val = taskQueue.shift();
+  return val ?? null;
+}
+
+export function remove(node: Node) {
+  taskQueue.splice(taskQueue.indexOf(node), 1);
+}
diff --git a/packages/inula-reactive/src/renderer/utils/compare.ts b/packages/inula-reactive/src/renderer/utils/compare.ts
new file mode 100644
index 00000000..95e0f3a5
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/utils/compare.ts
@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+/**
+ * 兼容IE浏览器没有Object.is
+ */
+export function isSame(x: any, y: any) {
+  if (!(typeof Object.is === 'function')) {
+    if (x === y) {
+      // +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // NaN == NaN
+      return x !== x && y !== y;
+    }
+  } else {
+    return Object.is(x, y);
+  }
+}
+
+export function isArrayEqual(nextParam: Array<any>, lastParam: Array<any> | null) {
+  if (lastParam === null || lastParam.length !== nextParam.length) {
+    return false;
+  }
+  for (let i = 0; i < lastParam.length; i++) {
+    if (!isSame(nextParam[i], lastParam[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function shallowCompare(paramX: any, paramY: any): boolean {
+  if (isSame(paramX, paramY)) {
+    return true;
+  }
+
+  // 对比对象
+  if (typeof paramX === 'object' && typeof paramY === 'object' && paramX !== null && paramY !== null) {
+    const keysX = Object.keys(paramX);
+    const keysY = Object.keys(paramY);
+
+    // key长度不相等时直接返回不相等
+    if (keysX.length !== keysY.length) {
+      return false;
+    }
+
+    return keysX.every(
+      (key, i) => Object.prototype.hasOwnProperty.call(paramY, key) && isSame(paramX[key], paramY[keysX[i]])
+    );
+  }
+
+  return false;
+}
diff --git a/packages/inula-reactive/src/renderer/utils/throwIfTrue.ts b/packages/inula-reactive/src/renderer/utils/throwIfTrue.ts
new file mode 100644
index 00000000..0dbb55dc
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/utils/throwIfTrue.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 function throwIfTrue(condition: boolean, errTemplate: string, ...errExpressions: string[]) {
+  if (condition) {
+    // 将%s 替换成对应的变量
+    const msg = errTemplate.split('%s').reduce((prevSentence: string, part: string, idx: number) => {
+      // %s对应的变量
+      const expression = idx < errExpressions.length ? errExpressions[idx] : '';
+      return prevSentence + part + expression;
+    }, '');
+    throw Error(msg);
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/utils/vNodePath.ts b/packages/inula-reactive/src/renderer/utils/vNodePath.ts
new file mode 100644
index 00000000..7d8b4a93
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/utils/vNodePath.ts
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import { VNode } from '../vnode/VNode';
+
+const PATH_DELIMITER = ',';
+
+/**
+ * 标记VNode在VNode树中的路径
+ * @param vNode
+ */
+export function markVNodePath(vNode: VNode) {
+  // vNode.path = `${vNode.parent!.path}${PATH_DELIMITER}${vNode.cIndex}`;
+}
+
+export function getPathArr(vNode: VNode) {
+  return vNode.path.split(PATH_DELIMITER);
+}
diff --git a/packages/inula-reactive/src/renderer/vnode/VNode.ts b/packages/inula-reactive/src/renderer/vnode/VNode.ts
new file mode 100644
index 00000000..10c5978e
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNode.ts
@@ -0,0 +1,168 @@
+/*
+ * 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.
+ */
+
+/**
+ * 虚拟DOM结构体
+ */
+import {
+  ClassComponent,
+  ContextConsumer,
+  ContextProvider,
+  DomComponent,
+  DomPortal,
+  DomText,
+  ForwardRef,
+  Fragment,
+  FunctionComponent,
+  LazyComponent,
+  MemoComponent,
+  Profiler,
+  SuspenseComponent,
+  TreeRoot,
+} from './VNodeTags';
+import type { VNodeTag } from './VNodeTags';
+import { InitFlag } from './VNodeFlags';
+import { VNode } from '../Types';
+
+export const BELONG_CLASS_VNODE_KEY = typeof Symbol === 'function' ? Symbol('belongClassVNode') : 'belongClassVNode';
+
+export function VirtualNode(tag: VNodeTag, props: any, key: null | string, realNode) {
+  this.tag = tag; // 对应组件的类型，比如ClassComponent等
+  // 唯一标识符
+  // if (isReactiveObj(this.key)) {
+  //   this.key = getReactiveValue(this.key);
+  //   subscribeKeyEffect(this, this.key);
+  // } else {
+    this.key = key;
+  // }
+
+  this.props = props; // 传给组件的props的值，类组件包含defaultProps，Lazy组件不包含
+  this.type = null;
+  this.realNode = null; // 如果是类，则存放实例；如果是div这种，则存放真实DOM；
+
+  // 关系结构
+  this.parent = null; // 父节点
+  this.child = null; // 子节点
+  this.next = null; // 兄弟节点
+  this.cIndex = 0; // 节点在children数组中的位置
+  this.eIndex = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致
+
+  this.ref = null; // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上
+  this.oldProps = null;
+
+  this.dirtyNodes = null; // 需要改动的节点数组
+  this.shouldUpdate = false;
+  this.childShouldUpdate = false;
+
+  this.flags = InitFlag;
+  this.clearChild = null;
+  this.isCreated = true;
+  this.oldRef = null;
+  this.oldChild = null;
+
+  switch (tag) {
+    case TreeRoot:
+      this.realNode = realNode;
+      this.task = null;
+      this.toUpdateNodes = new Set<VNode>();
+      this.delegatedEvents = new Set<string>();
+      this.updates = null;
+      this.stateCallbacks = null;
+      this.state = null;
+      this.oldState = null;
+      this.context = null;
+      break;
+    case FunctionComponent:
+      this.realNode = null;
+      this.effectList = null;
+      this.hooks = null;
+      this.depContexts = null;
+      this.isDepContextChange = false;
+      this.oldHooks = null;
+      this.isStoreChange = false;
+      this.observers = null;
+      this.classComponentWillUnmount = null;
+      this.src = null;
+      this.compRContext = null;
+      break;
+    case ClassComponent:
+      this.realNode = null;
+      this.updates = null;
+      this.stateCallbacks = null;
+      this.isForceUpdate = false;
+      this.state = null;
+      this.depContexts = null;
+      this.isDepContextChange = false;
+      this.oldState = null;
+      this.context = null;
+      this.isStoreChange = false;
+      this.observers = null;
+      this.classComponentWillUnmount = null;
+      this.src = null;
+      this.compRContext = null;
+      break;
+    case DomPortal:
+      this.realNode = null;
+      this.context = null;
+      this.delegatedEvents = new Set<string>();
+      this.src = null;
+      break;
+    case DomComponent:
+      this.realNode = null;
+      this.changeList = null;
+      this.context = null;
+      this.src = null;
+      this.attrRContexts = null;
+      break;
+    case DomText:
+      this.realNode = null;
+      break;
+    case SuspenseComponent:
+      this.realNode = null;
+      this.suspenseState = {
+        promiseSet: null,
+        didCapture: false,
+        promiseResolved: false,
+        oldChildStatus: '',
+        childStatus: '',
+      };
+      this.src = null;
+      break;
+    case ContextProvider:
+      this.src = null;
+      this.context = null;
+      break;
+    case MemoComponent:
+      this.effectList = null;
+      this.src = null;
+      break;
+    case LazyComponent:
+      this.realNode = null;
+      this.stateCallbacks = null;
+      this.isLazyComponent = true;
+      this.lazyType = null;
+      this.updates = null;
+      this.src = null;
+      break;
+    case Fragment:
+      break;
+    case ContextConsumer:
+      break;
+    case ForwardRef:
+      break;
+    case Profiler:
+      break;
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/vnode/VNodeCreator.ts b/packages/inula-reactive/src/renderer/vnode/VNodeCreator.ts
new file mode 100644
index 00000000..21b09cb2
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNodeCreator.ts
@@ -0,0 +1,269 @@
+/*
+ * 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.
+ */
+
+import type { VNodeTag } from './VNodeTags';
+import { FlagUtils } from './VNodeFlags';
+import {
+  ClassComponent,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Fragment,
+  FunctionComponent,
+  DomComponent,
+  DomPortal,
+  TreeRoot,
+  DomText,
+  LazyComponent,
+  MemoComponent,
+  SuspenseComponent,
+  ReactiveComponent,
+} from './VNodeTags';
+import {
+  TYPE_CONTEXT,
+  TYPE_FORWARD_REF,
+  TYPE_FRAGMENT,
+  TYPE_LAZY,
+  TYPE_MEMO,
+  TYPE_PROFILER,
+  TYPE_PROVIDER,
+  TYPE_STRICT_MODE,
+  TYPE_SUSPENSE,
+} from '../../external/JSXElementType';
+import { VirtualNode } from './VNode';
+import { JSXElement, Source, VNode } from '../Types';
+import { markVNodePath } from '../utils/vNodePath';
+
+const typeLazyMap = {
+  [TYPE_FORWARD_REF]: ForwardRef,
+  [TYPE_MEMO]: MemoComponent,
+};
+const typeMap = {
+  ...typeLazyMap,
+  [TYPE_PROVIDER]: ContextProvider,
+  [TYPE_CONTEXT]: ContextConsumer,
+  [TYPE_LAZY]: LazyComponent,
+};
+
+function newVirtualNode(tag: VNodeTag, key?: null | string, vNodeProps?: any, realNode?: any): VNode {
+  return new VirtualNode(tag, vNodeProps, key as null | string, realNode);
+}
+
+function isClassComponent(comp: Function) {
+  // 如果使用 getPrototypeOf 方法获取构造函数，不能兼容业务组组件继承组件的使用方式，会误认为是函数组件
+  // 如果使用静态属性，部分函数高阶组件会将类组件的静态属性复制到自身，导致误判为类组件
+  // 既然已经兼容使用了该标识符，那么继续使用
+  return comp.prototype?.isReactComponent === true;
+}
+
+// 解析懒组件的tag
+export function getLazyVNodeTag(lazyComp: any): string {
+  if (typeof lazyComp === 'function') {
+    return isClassComponent(lazyComp) ? ClassComponent : FunctionComponent;
+  } else if (lazyComp !== undefined && lazyComp !== null && typeLazyMap[lazyComp.vtype]) {
+    return typeLazyMap[lazyComp.vtype];
+  }
+  throw Error("Inula can't resolve the content of lazy");
+}
+
+// 创建processing
+export function updateVNode(vNode: VNode, vNodeProps?: any): VNode {
+  if (vNode.tag === ClassComponent) {
+    vNode.oldState = vNode.state;
+  }
+
+  if (vNode.tag === SuspenseComponent) {
+    vNode.suspenseState!.oldChildStatus = vNode.suspenseState!.childStatus;
+    vNode.oldChild = vNode.child;
+  }
+
+  vNode.oldProps = vNode.props;
+  vNode.props = vNodeProps;
+
+  vNode.oldRef = vNode.ref;
+
+  FlagUtils.setNoFlags(vNode);
+  vNode.dirtyNodes = null;
+  vNode.isCreated = false;
+
+  return vNode;
+}
+
+export function createFragmentVNode(fragmentKey, fragmentProps) {
+  const vNode = newVirtualNode(Fragment, fragmentKey, fragmentProps);
+  vNode.shouldUpdate = true;
+  return vNode;
+}
+
+export function createReactiveVNode(content) {
+  const vNode = newVirtualNode(ReactiveComponent, null, content);
+  vNode.shouldUpdate = true;
+  return vNode;
+}
+
+export function createDomTextVNode(content) {
+  const vNode = newVirtualNode(DomText, null, content);
+  vNode.shouldUpdate = true;
+  return vNode;
+}
+
+export function createPortalVNode(portal) {
+  const children = portal.children ?? [];
+  const vNode = newVirtualNode(DomPortal, portal.key, children);
+  vNode.shouldUpdate = true;
+  vNode.realNode = portal.realNode;
+  return vNode;
+}
+
+export function createUndeterminedVNode(type, key, props, source: Source | null): VNode {
+  let vNodeTag = FunctionComponent;
+  let isLazy = false;
+  const componentType = typeof type;
+  if (componentType === 'function') {
+    if (isClassComponent(type)) {
+      vNodeTag = ClassComponent;
+    }
+  } else if (componentType === 'string') {
+    vNodeTag = DomComponent;
+  } else if (type === TYPE_SUSPENSE) {
+    vNodeTag = SuspenseComponent;
+  } else if (componentType === 'object' && type !== null && typeMap[type.vtype]) {
+    vNodeTag = typeMap[type.vtype];
+    isLazy = type.vtype === TYPE_LAZY;
+  } else {
+    throw Error(`Component type is invalid, got: ${type === null || type === undefined ? type : componentType}`);
+  }
+
+  const vNode = newVirtualNode(vNodeTag, key, props);
+  vNode.type = type;
+  vNode.shouldUpdate = true;
+
+  if (isLazy) {
+    vNode.lazyType = type;
+  }
+
+  vNode.src = isDev ? source : null;
+  return vNode;
+}
+
+export function getElementTag(element: JSXElement): string {
+  const type = element.type;
+
+  if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) {
+    return Fragment;
+  } else {
+    let vNodeTag = FunctionComponent;
+    const componentType = typeof type;
+
+    if (componentType === 'function') {
+      if (isClassComponent(type)) {
+        vNodeTag = ClassComponent;
+      }
+    } else if (componentType === 'string') {
+      vNodeTag = DomComponent;
+    } else if (type === TYPE_SUSPENSE) {
+      vNodeTag = SuspenseComponent;
+    } else if (componentType === 'object' && type !== null && typeMap[type.vtype]) {
+      vNodeTag = typeMap[type.vtype];
+    }
+
+    return vNodeTag;
+  }
+}
+
+export function createTreeRootVNode(container) {
+  const vNode = newVirtualNode(TreeRoot, null, null, container);
+  vNode.path = '0';
+  vNode.updates = [];
+  return vNode;
+}
+
+// 暂时保留给测试用例使用，后续修改测试用例
+export function createVNode(tag: VNodeTag | string, ...secondArg) {
+  let vNode: VNode | null = null;
+  switch (tag) {
+    case TreeRoot:
+      // 创建treeRoot
+      vNode = newVirtualNode(TreeRoot, null, null, secondArg[0]);
+      vNode.path = '0';
+
+      vNode.updates = [];
+      break;
+    default:
+      break;
+  }
+
+  return vNode;
+}
+
+export function createVNodeFromElement(element: JSXElement): VNode {
+  const { type, key, props, src } = element;
+
+  if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) {
+    return createFragmentVNode(key, props.children);
+  } else {
+    return createUndeterminedVNode(type, key, props, src);
+  }
+}
+
+// 直接更新子节点属性即可，不需要diff
+export function onlyUpdateChildVNodes(processing: VNode): VNode | null {
+  // 检查子树是否需要更新
+  if (processing.childShouldUpdate) {
+    // 此vNode无需更新，但是子树需要
+    if (!processing.isCreated && processing.child !== null) {
+      // 更新子节点
+      let child: VNode | null = processing.child;
+      while (child !== null) {
+        updateVNode(child, child.props);
+        markVNodePath(child);
+        child = child.next;
+      }
+    }
+
+    // 返回子节点，继续遍历
+    return processing.child;
+  }
+
+  // 当跳过子树更新时，父节点path更新时，需要更新所有子树path
+  // if (processing.child && processing.path !== processing.child.path.slice(0, processing.path.length)) {
+  //   // bfs更新子树path
+  //   const queue: VNode[] = [];
+  //
+  //   const putChildrenIntoQueue = (vNode: VNode) => {
+  //     const child = vNode.child;
+  //     if (child) {
+  //       queue.push(child);
+  //       let sibling = child.next;
+  //       while (sibling) {
+  //         queue.push(sibling);
+  //         sibling = sibling.next;
+  //       }
+  //     }
+  //   };
+  //
+  //   putChildrenIntoQueue(processing);
+  //
+  //   while (queue.length) {
+  //     const vNode = queue.shift()!;
+  //
+  //     markVNodePath(vNode);
+  //
+  //     putChildrenIntoQueue(vNode);
+  //   }
+  // }
+  // 子树无需工作
+  return null;
+}
diff --git a/packages/inula-reactive/src/renderer/vnode/VNodeFlags.ts b/packages/inula-reactive/src/renderer/vnode/VNodeFlags.ts
new file mode 100644
index 00000000..7bd0740f
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNodeFlags.ts
@@ -0,0 +1,106 @@
+/*
+ * 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.
+ */
+
+/**
+ * vNode结构的变化标志
+ */
+
+import type { VNode } from './VNode';
+
+export const InitFlag = /**     */ 0;
+// vNode节点的flags
+export const DirectAddition = /**  */ 1 << 0; // 在本次更新前入股父dom没有子节点，说明本次可以直接添加至父节点，不需要通过 getSiblingDom 找到 before 节点
+export const Addition = /**     */ 1 << 1;
+export const Update = /**     */ 1 << 2;
+export const Deletion = /**     */ 1 << 3;
+export const ResetText = /**     */ 1 << 4;
+export const Callback = /**     */ 1 << 5;
+export const DidCapture = /**     */ 1 << 6;
+export const Ref = /**     */ 1 << 7;
+export const Snapshot = /**     */ 1 << 8;
+export const Interrupted = /**     */ 1 << 9; // 被中断了，抛出错误的vNode以及它的父vNode
+export const ShouldCapture = /**     */ 1 << 11;
+export const ForceUpdate = /**     */ 1 << 12; // For suspense
+export const Clear = /**     */ 1 << 13;
+const LifecycleEffectArr = Update | Callback | Ref | Snapshot;
+
+export const FlagUtils = {
+  removeFlag(node: VNode, flag: number) {
+    node.flags &= ~flag;
+  },
+
+  removeLifecycleEffectFlags(node) {
+    node.flags &= ~LifecycleEffectArr;
+  },
+
+  hasAnyFlag(node: VNode) {
+    // 有标志位
+    return node.flags !== InitFlag;
+  },
+
+  hasFlag(node: VNode, flag) {
+    return (node.flags & flag) !== 0;
+  },
+
+  setNoFlags(node: VNode) {
+    node.flags = InitFlag;
+  },
+
+  markAddition(node: VNode) {
+    node.flags |= Addition;
+  },
+
+  setAddition(node: VNode) {
+    node.flags = Addition;
+  },
+
+  markDirectAddition(node: VNode) {
+    node.flags |= DirectAddition;
+  },
+  markUpdate(node: VNode) {
+    node.flags |= Update;
+  },
+  setDeletion(node: VNode) {
+    node.flags = Deletion;
+  },
+  markContentReset(node: VNode) {
+    node.flags |= ResetText;
+  },
+  markCallback(node: VNode) {
+    node.flags |= Callback;
+  },
+  markDidCapture(node: VNode) {
+    node.flags |= DidCapture;
+  },
+  markShouldCapture(node: VNode) {
+    node.flags |= ShouldCapture;
+  },
+  markRef(node: VNode) {
+    node.flags |= Ref;
+  },
+  markSnapshot(node: VNode) {
+    node.flags |= Snapshot;
+  },
+  markInterrupted(node: VNode) {
+    node.flags |= Interrupted;
+  },
+  markForceUpdate(node: VNode) {
+    node.flags |= ForceUpdate;
+  },
+
+  markClear(node: VNode) {
+    node.flags |= Clear;
+  },
+};
diff --git a/packages/inula-reactive/src/renderer/vnode/VNodeShouldUpdate.ts b/packages/inula-reactive/src/renderer/vnode/VNodeShouldUpdate.ts
new file mode 100644
index 00000000..ded4f243
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNodeShouldUpdate.ts
@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+// 从当前节点向上遍历，更新shouldUpdate和childShouldUpdate
+import { VNode } from './VNode';
+import { TreeRoot } from './VNodeTags';
+
+export function updateShouldUpdateOfTree(vNode: VNode): VNode | null {
+  vNode.shouldUpdate = true;
+
+  // 一直向上遍历，修改childShouldUpdate
+  let node = vNode;
+  let parent = vNode.parent;
+  while (parent !== null) {
+    parent.childShouldUpdate = true;
+    node = parent;
+    parent = parent.parent;
+  }
+
+  if (node.tag === TreeRoot) {
+    node.shouldUpdate = true;
+    // 返回根节点
+    return node;
+  }
+
+  return null;
+}
+
+// 设置节点的childShouldUpdate
+export function updateChildShouldUpdate(vNode: VNode) {
+  let child = vNode.child;
+  while (child !== null) {
+    if (child.shouldUpdate || child.childShouldUpdate) {
+      vNode.childShouldUpdate = true;
+      return;
+    }
+    child = child.next;
+  }
+
+  vNode.childShouldUpdate = false;
+}
+
+// 更新从当前节点到根节点的childShouldUpdate为true
+export function setParentsChildShouldUpdate(parent: VNode | null) {
+  let node = parent;
+  while (node !== null) {
+    if (node.childShouldUpdate) {
+      break;
+    }
+    node.childShouldUpdate = true;
+
+    node = node.parent;
+  }
+}
+
+// 设置节点的所有父节点的childShouldUpdate
+export function updateParentsChildShouldUpdate(vNode: VNode) {
+  let node = vNode.parent;
+  const isShouldUpdate = vNode.shouldUpdate || vNode.childShouldUpdate;
+
+  if (isShouldUpdate) {
+    // 开始节点是shouldUpdate或childShouldUpdate
+    // 更新从当前节点到根节点的childShouldUpdate为true
+    setParentsChildShouldUpdate(node);
+  } else {
+    while (node !== null) {
+      updateChildShouldUpdate(node);
+      node = node.parent;
+    }
+  }
+}
diff --git a/packages/inula-reactive/src/renderer/vnode/VNodeTags.ts b/packages/inula-reactive/src/renderer/vnode/VNodeTags.ts
new file mode 100644
index 00000000..c824ab75
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNodeTags.ts
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+/**
+ * 定义vNode的类型
+ */
+export type VNodeTag = string;
+
+export const TreeRoot = 'TreeRoot'; // tree的根节点，用于存放一些tree级的变量
+export const FunctionComponent = 'FunctionComponent';
+export const ClassComponent = 'ClassComponent';
+export const DomPortal = 'DomPortal';
+export const DomComponent = 'DomComponent';
+export const DomText = 'DomText';
+export const Fragment = 'Fragment';
+export const ContextConsumer = 'ContextConsumer';
+export const ContextProvider = 'ContextProvider';
+export const ForwardRef = 'ForwardRef';
+export const Profiler = 'Profiler';
+export const SuspenseComponent = 'SuspenseComponent';
+export const MemoComponent = 'MemoComponent';
+export const LazyComponent = 'LazyComponent';
+export const IncompleteClassComponent = 'IncompleteClassComponent';
+export const ReactiveComponent = 'ReactiveComponent';
diff --git a/packages/inula-reactive/src/renderer/vnode/VNodeUtils.ts b/packages/inula-reactive/src/renderer/vnode/VNodeUtils.ts
new file mode 100644
index 00000000..25cb2753
--- /dev/null
+++ b/packages/inula-reactive/src/renderer/vnode/VNodeUtils.ts
@@ -0,0 +1,298 @@
+/*
+ * 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.
+ */
+
+/**
+ * 提供：vNode的“遍历”，“查找”，“判断”的相关工具方法
+ */
+
+import type { VNode } from '../Types';
+
+import { DomComponent, DomPortal, DomText, TreeRoot, ReactiveComponent } from './VNodeTags';
+import { getNearestVNode } from '../../dom/DOMInternalKeys';
+import { Addition, InitFlag } from './VNodeFlags';
+import { BELONG_CLASS_VNODE_KEY } from './VNode';
+
+export function travelChildren(
+  beginVNode: VNode | null,
+  handleVNode: (node: VNode) => void,
+  isFinish?: (node: VNode) => boolean
+) {
+  let node = beginVNode;
+
+  while (node !== null) {
+    if (isFinish && isFinish(node)) {
+      return;
+    }
+
+    handleVNode(node);
+
+    node = node.next;
+  }
+}
+
+// 从beginVNode开始深度遍历vNode树，对每个vNode调用handleVNode方法
+export function travelVNodeTree(
+  beginVNode: VNode,
+  handleVNode: (node: VNode) => VNode | boolean | null | void,
+  childFilter: ((node: VNode) => boolean) | null, // 返回true不处理child
+  finishVNode: VNode, // 结束遍历节点，有时候和beginVNode不相同
+  handleWhenToParent: ((node: VNode) => void) | null
+): VNode | boolean | null | void {
+  let node = beginVNode;
+
+  while (true) {
+    const ret = handleVNode(node);
+
+    // 如果处理一个vNode时有返回值，则中断遍历
+    if (ret) {
+      return ret;
+    }
+
+    // 找子节点
+    const childVNode = node.child;
+    if (childVNode !== null && (childFilter === null || !childFilter(node))) {
+      childVNode.parent = node;
+      node = childVNode;
+      continue;
+    }
+
+    // 回到开始节点
+    if (node === finishVNode) {
+      return null;
+    }
+
+    const isFun = typeof handleWhenToParent === 'function';
+
+    // 找兄弟，没有就往上再找兄弟
+    while (node.next === null) {
+      if (node.parent === null || node.parent === finishVNode) {
+        return null;
+      }
+      node = node.parent;
+
+      if (isFun) {
+        handleWhenToParent!(node);
+      }
+    }
+    // 找到兄弟
+    const siblingVNode = node.next;
+    siblingVNode.parent = node.parent;
+    node = siblingVNode;
+  }
+}
+
+// 置空vNode
+export function clearVNode(vNode: VNode) {
+  vNode.isCleared = true;
+
+  // 孩子节点的parent也置空
+  travelChildren(vNode.child, node => {
+    node.parent = null;
+  });
+  vNode.child = null;
+
+  vNode.parent = null;
+  vNode.next = null;
+  vNode.depContexts = null;
+  vNode.dirtyNodes = null;
+  vNode.state = null;
+  vNode.hooks = null;
+  vNode.props = null;
+  vNode.suspenseState = null;
+  vNode.changeList = null;
+  vNode.effectList = null;
+  vNode.updates = null;
+  vNode.realNode = null;
+
+  vNode.oldProps = null;
+  vNode.oldHooks = null;
+  vNode.oldState = null;
+  vNode.oldRef = null;
+  vNode.oldChild = null;
+
+  vNode.toUpdateNodes = null;
+
+  vNode[BELONG_CLASS_VNODE_KEY] = null;
+  if (window.__INULA_DEV_HOOK__) {
+    const hook = window.__INULA_DEV_HOOK__;
+    hook.deleteVNode(vNode);
+  }
+
+  if (vNode.attrRContexts) {
+    vNode.attrRContexts = null;
+  }
+  if (vNode.compRContext) {
+    vNode.compRContext = null;
+  }
+}
+
+// 是dom类型的vNode
+export function isDomVNode(node: VNode) {
+  return node.tag === DomComponent || node.tag === DomText || node.tag === ReactiveComponent;
+}
+
+// 是容器类型的vNode
+export function isDomContainer(vNode: VNode): boolean {
+  return vNode.tag === DomComponent || vNode.tag === TreeRoot || vNode.tag === DomPortal;
+}
+
+export function findDomVNode(vNode: VNode): VNode | null {
+  const ret = travelVNodeTree(
+    vNode,
+    node => {
+      if (node.tag === DomComponent || node.tag === DomText) {
+        return node;
+      }
+      return null;
+    },
+    null,
+    vNode,
+    null
+  );
+
+  return ret as VNode | null;
+}
+
+export function findDOMByClassInst(inst) {
+  const vNode = inst._vNode;
+  if (vNode === undefined) {
+    throw new Error('Unable to find the vNode by class instance.');
+  }
+
+  const domVNode = findDomVNode(vNode);
+
+  return domVNode !== null ? domVNode.realNode : null;
+}
+
+function getTreeRootVNode(vNode) {
+  let node = vNode;
+  while (node.parent) {
+    node = node.parent;
+  }
+  return node;
+}
+
+// 判断dom树是否已经挂载
+export function isMounted(vNode: VNode) {
+  const rootNode = getTreeRootVNode(vNode);
+  // 如果根节点是 Dom 类型节点，表示已经挂载
+  return rootNode.tag === TreeRoot;
+}
+
+// 找到相邻的DOM
+export function getSiblingDom(vNode: VNode): Element | null {
+  let node: VNode = vNode;
+
+  findSibling: while (true) {
+    // 没有兄弟节点，找父节点
+    while (node.next === null) {
+      // 没父节点，或父节点已经是根节点，则返回
+      if (node.parent === null || isDomContainer(node.parent)) {
+        return null;
+      }
+      node = node.parent;
+    }
+
+    const siblingVNode = node.next;
+    siblingVNode.parent = node.parent;
+    node = siblingVNode;
+
+    // 如果不是dom节点，往下找
+    while (!isDomVNode(node)) {
+      // 如果节点也是Addition
+      if ((node.flags & Addition) === Addition) {
+        continue findSibling;
+      }
+
+      // 没有子节点，或是DomPortal
+      if (!node.child || node.tag === DomPortal) {
+        continue findSibling;
+      } else {
+        const childVNode = node.child;
+        childVNode.parent = node;
+        node = childVNode;
+      }
+    }
+
+    if ((node.flags & Addition) === InitFlag) {
+      // 找到
+      return node.realNode;
+    }
+  }
+}
+
+function isPortalRoot(vNode, targetContainer) {
+  if (vNode.tag === DomPortal) {
+    let topVNode = vNode.parent;
+    while (topVNode !== null) {
+      const grandTag = topVNode.tag;
+      if (grandTag === TreeRoot || grandTag === DomPortal) {
+        const topContainer = topVNode.realNode;
+        // 如果topContainer是targetContainer，不需要在这里处理
+        if (topContainer === targetContainer) {
+          return true;
+        }
+      }
+      topVNode = topVNode.parent;
+    }
+    return false;
+  }
+  return false;
+}
+
+// 获取根vNode节点
+export function findRoot(targetVNode, targetDom) {
+  // 确认vNode节点是否准确，portal场景下可能祖先节点不准确
+  let vNode = targetVNode;
+  while (vNode !== null) {
+    if (vNode.tag === TreeRoot || vNode.tag === DomPortal) {
+      let dom = vNode.realNode;
+      if (dom === targetDom) {
+        break;
+      }
+      if (isPortalRoot(vNode, targetDom)) {
+        return null;
+      }
+
+      while (dom !== null) {
+        const parentNode = getNearestVNode(dom);
+        if (parentNode === null) {
+          return null;
+        }
+        if (parentNode.tag === DomComponent || parentNode.tag === DomText) {
+          return findRoot(parentNode, targetDom);
+        }
+        dom = dom.parentNode;
+      }
+    }
+    vNode = vNode.parent;
+  }
+  if (vNode === null) {
+    return null;
+  }
+  return targetVNode;
+}
+
+export function findDOMContainer(vNode: VNode): VNode {
+  let parent = vNode.parent;
+  while (parent !== null) {
+    if (isDomContainer(parent)) {
+      break;
+    }
+    parent = parent.parent;
+  }
+
+  return parent as VNode;
+}
diff --git a/packages/inula-reactive/src/types.ts b/packages/inula-reactive/src/types.ts
new file mode 100644
index 00000000..7f31c7f3
--- /dev/null
+++ b/packages/inula-reactive/src/types.ts
@@ -0,0 +1,440 @@
+/*
+ * 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.
+ */
+
+import { Component } from './renderer/components/BaseClassComponent';
+import { MutableRef, RefCallBack, RefObject } from './renderer/hooks/HookType';
+
+import * as Event from './EventTypes';
+
+//
+// --------------------------------- Inula Base Types ----------------------------------
+//
+
+export type Key = string | number;
+
+export interface InulaElement<
+  P = any,
+  T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>
+> {
+  type: T;
+  props: P;
+  key: Key | null;
+}
+
+export interface InulaPortal extends InulaElement {
+  key: Key | null;
+  children: InulaNode;
+}
+
+interface InulaErrorInfo {
+  componentStack: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type KVObject = {};
+
+export type InulaFragment = Iterable<InulaNode>;
+
+export type ComponentState = any;
+
+export type InulaNode =
+  | string
+  | number
+  | null
+  | boolean
+  | undefined
+  | InulaElement
+  | InulaFragment
+  | InulaPortal;
+
+export interface ExoticComponent<P = KVObject> {
+  (props: P): InulaElement | null;
+}
+
+interface ProviderProps<T> {
+  value: T;
+  children?: InulaNode | undefined;
+}
+
+interface ConsumerProps<T> {
+  children: (value: T) => InulaNode;
+}
+
+export interface Context<T> {
+  Provider: ExoticComponent<ProviderProps<T>>;
+  Consumer: ExoticComponent<ConsumerProps<T>>;
+  // 兼容React
+  displayName?: string | undefined;
+}
+
+export interface FunctionComponent<P = KVObject> {
+  (props: P, context?: any): InulaElement<any, any> | null;
+
+  displayName?: string;
+}
+
+export interface ComponentClass<P = KVObject, S = ComponentState> extends StaticLifecycle<P, S> {
+  new (props: P, context?: unknown): Component<P, S>;
+
+  displayName?: string;
+}
+
+export type FC<P = KVObject> = FunctionComponent<P>;
+
+export type ComponentType<P = KVObject> = ComponentClass<P> | FunctionComponent<P>;
+
+export interface ChildrenType {
+  map<T, C>(
+    children: C | Array<C>,
+    fn: (child: C, index: number) => T,
+    context?: any
+  ): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
+
+  forEach<C>(children: C | Array<C>, fn: (child: C, index: number) => void): void;
+
+  count(children: any): number;
+
+  only<C>(children: C): C extends unknown[] ? never : C;
+
+  toArray(children: InulaNode | InulaNode[]): Array<Exclude<InulaNode, boolean | null | undefined>>;
+}
+
+type ForwardRef<T> = ((inst: T | null) => void) | MutableRef<T | null> | null;
+
+export interface ForwardRefRenderFunc<T, P = KVObject> {
+  (props: P, ref: ForwardRef<T>): InulaElement | null;
+}
+
+export type PropsOmitRef<P> = 'ref' extends keyof P ? Omit<P, 'ref'> : P;
+
+export type PropsWithRef<P> = 'ref' extends keyof P
+  ? P extends { ref?: infer R | undefined }
+    ? string extends R
+      ? PropsOmitRef<P> & { ref?: Exclude<R, string> }
+      : P
+    : P
+  : P;
+
+type Attributes = {
+  key?: Key | null | undefined;
+};
+
+export type Ref<T> = RefCallBack<T> | RefObject<T> | null;
+
+export type RefAttributes<T> = Attributes & {
+  ref?: Ref<T> | null;
+};
+
+export type ComponentPropsWithRef<T extends any> = T extends new (props: infer P) => Component<any, any>
+  ? PropsOmitRef<P> & RefAttributes<InstanceType<T>>
+  : PropsWithRef<any>;
+
+export type LazyComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
+  readonly _result: T;
+};
+
+export type MemoComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
+  readonly type: T;
+  displayName?: string;
+};
+
+export type Suspense = ExoticComponent<{ children?: InulaNode; fallback: InulaNode }>;
+
+export type Fragment = ExoticComponent<{ children?: InulaNode }>;
+
+export type StrictMode = ExoticComponent<{ children?: InulaNode }>;
+
+// 兼容React
+export type InulaProfiler = ExoticComponent<{ children?: InulaNode; id: string; onRender: any }>;
+
+//
+// --------------------------------- Inula Component Types ----------------------------------
+//
+
+interface OutDateLifecycle<P, S> {
+  /**
+   * @deprecated
+   * @see componentDidMount
+   */
+  componentWillMount?(): void;
+
+  /**
+   * @deprecated
+   * @alias componentWillMount
+   */
+  UNSAFE_componentWillMount?(): void;
+
+  /**
+   * @deprecated
+   * @see getDerivedStateFromProps
+   */
+  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+
+  /**
+   * @deprecated
+   * @alias componentWillReceiveProps
+   */
+  UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+
+  /**
+   * @deprecated
+   * @alias getSnapshotBeforeUpdate
+   */
+  componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
+
+  /**
+   * @deprecated
+   * @alias componentWillUpdate
+   */
+  UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
+}
+
+interface StaticLifecycle<P, S> {
+  getDerivedStateFromProps?(nextProps: Readonly<P>, prevState: S): Partial<S> | null;
+
+  getDerivedStateFromError?(error: any): Partial<S> | null;
+}
+
+export interface ComponentLifecycle<P, S, SS> extends OutDateLifecycle<P, S>, StaticLifecycle<P, S> {
+  componentDidMount?(): void;
+
+  getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null;
+
+  componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void;
+
+  shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
+
+  componentWillUnmount?(): void;
+
+  componentDidCatch?(error: Error, errorInfo: InulaErrorInfo): void;
+}
+
+//
+// --------------------------------- Inula Hook Types----------------------------------
+//
+
+export type BasicStateAction<S> = S | ((prevState: S) => S);
+
+export type Dispatch<A> = (value: A) => void;
+
+export type DispatchVoid = () => void;
+
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+
+export type ReducerVoid<S> = (prevState: S) => S;
+
+export type ReducerStateVoid<R extends ReducerVoid<any>> = R extends ReducerVoid<infer S> ? S : never;
+
+export type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
+export type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
+
+export type DependencyList = Array<unknown>;
+
+export type EffectCallBack = () => void | (() => void);
+
+//
+// --------------------------------- Inula JSX Types----------------------------------
+//
+
+export type JSXElementConstructor<P> =
+  | ((props: P) => InulaElement<any, any> | null)
+  | (new (props: P) => Component<any, any>);
+
+//
+// --------------------------------- Inula Event Types----------------------------------
+//
+interface InulaBaseEvent<E = unknown, Tr = unknown, Ta = unknown> {
+  nativeEvent: E;
+  trigger: Tr;
+  target: Ta;
+  bubbles: boolean;
+  cancelable: boolean;
+  defaultPrevented: boolean;
+  eventPhase: number;
+  isTrusted: boolean;
+
+  preventDefault(): void;
+
+  isDefaultPrevented(): boolean;
+
+  stopPropagation(): void;
+
+  isPropagationStopped(): boolean;
+
+  persist(): void;
+
+  timeStamp: number;
+  type: string;
+}
+
+// eslint-disable-next-line
+interface SyntheticEvent<T = Element, E = Event> extends InulaBaseEvent<E, EventTarget & T, EventTarget> {}
+
+export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, Event.DomClipboardEvent> {
+  clipboardData: DataTransfer;
+}
+
+export interface CompositionEvent<T = Element> extends SyntheticEvent<T, Event.DomCompositionEvent> {
+  data: string;
+}
+
+export interface DragEvent<T = Element> extends MouseEvent<T, Event.DomDragEvent> {
+  dataTransfer: DataTransfer;
+}
+
+export interface PointerEvent<T = Element> extends MouseEvent<T, Event.DomPointerEvent> {
+  pointerId: number;
+  pressure: number;
+  tangentialPressure: number;
+  tiltX: number;
+  tiltY: number;
+  twist: number;
+  width: number;
+  height: number;
+  pointerType: 'mouse' | 'pen' | 'touch';
+  isPrimary: boolean;
+}
+
+export interface FocusEvent<Target = Element, RelatedTarget = Element>
+  extends SyntheticEvent<Target, Event.DomFocusEvent> {
+  relatedTarget: (EventTarget & RelatedTarget) | null;
+  target: EventTarget & Target;
+}
+
+export type FormEvent<T = Element> = SyntheticEvent<T>;
+
+export interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
+  target: EventTarget & T;
+}
+
+export interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
+  target: EventTarget & T;
+}
+
+export interface WheelEvent<T = Element> extends MouseEvent<T, Event.DomWheelEvent> {
+  deltaMode: number;
+  deltaX: number;
+  deltaY: number;
+  deltaZ: number;
+}
+
+export interface AnimationEvent<T = Element> extends SyntheticEvent<T, Event.DomAnimationEvent> {
+  animationName: string;
+  elapsedTime: number;
+  pseudoElement: string;
+}
+
+export interface TransitionEvent<T = Element> extends SyntheticEvent<T, Event.DomTransitionEvent> {
+  elapsedTime: number;
+  propertyName: string;
+  pseudoElement: string;
+}
+
+export interface UIEvent<T = Element, E = Event.DomUIEvent> extends SyntheticEvent<T, E> {
+  detail: number;
+}
+
+export type ModifierKey =
+  | 'Alt'
+  | 'AltGraph'
+  | 'CapsLock'
+  | 'Control'
+  | 'Fn'
+  | 'FnLock'
+  | 'Meta'
+  | 'NumLock'
+  | 'ScrollLock'
+  | 'Shift'
+  | 'Symbol'
+  | 'SymbolLock';
+
+export interface KeyboardEvent<T = Element> extends UIEvent<T, Event.DomKeyboardEvent> {
+  altKey: boolean;
+  /** @deprecated */
+  charCode: number;
+  ctrlKey: boolean;
+  code: string;
+  key: string;
+  /** @deprecated */
+  keyCode: number;
+  locale: string;
+  location: number;
+  metaKey: boolean;
+  repeat: boolean;
+  shiftKey: boolean;
+  /** @deprecated */
+  which: number;
+
+  getModifierState(key: ModifierKey): boolean;
+}
+
+export interface TouchEvent<T = Element> extends UIEvent<T, Event.DomTouchEvent> {
+  altKey: boolean;
+  changedTouches: TouchList;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  targetTouches: TouchList;
+  touches: TouchList;
+
+  getModifierState(key: ModifierKey): boolean;
+}
+
+export interface MouseEvent<T = Element, E = Event.DomMouseEvent> extends UIEvent<T, E> {
+  altKey: boolean;
+  button: number;
+  buttons: number;
+  clientX: number;
+  clientY: number;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  movementX: number;
+  movementY: number;
+  pageX: number;
+  pageY: number;
+  relatedTarget: EventTarget | null;
+  screenX: number;
+  screenY: number;
+  shiftKey: boolean;
+
+  getModifierState(key: ModifierKey): boolean;
+}
+
+//
+// --------------------------------- Event Handler Types----------------------------------
+//
+
+export type EventHandler<E extends SyntheticEvent<unknown>> = { bivarianceHack(event: E): void }['bivarianceHack'];
+
+export type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
+export type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
+export type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
+export type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
+export type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
+export type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
+export type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
+export type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
+export type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
+export type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
+export type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
+export type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
+export type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
+export type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+
+//
+// --------------------------------- Css Props----------------------------------
+//
+
+export type CSSProperties = Record<string | number, any>;
diff --git a/packages/inula-reactive/tsconfig.build.json b/packages/inula-reactive/tsconfig.build.json
new file mode 100644
index 00000000..9c3955bc
--- /dev/null
+++ b/packages/inula-reactive/tsconfig.build.json
@@ -0,0 +1,11 @@
+{
+  "files": [
+    "./src/index.ts"
+  ],
+  "compilerOptions": {
+    "declaration": true,
+    "skipLibCheck": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./build/inula/@types"
+  }
+}
diff --git a/packages/inula-reactive/tsconfig.json b/packages/inula-reactive/tsconfig.json
new file mode 100644
index 00000000..16b1349d
--- /dev/null
+++ b/packages/inula-reactive/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "outDir": "./build",
+    "incremental": false,
+    "sourceMap": false,
+    "allowJs": true, // allowJs=true => tsc compile js as module, no type check
+    "checkJs": false, // Disable ts error checking in js
+    "strict": false, // js-ts mixed setting
+    "noImplicitReturns": true,
+    "noUnusedLocals": false, // 等大部分js代码改成ts之后再启用.
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    // "strictNullChecks": true,
+    "module": "CommonJS",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "target": "es5",
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "types": [], // 赋值为空数组使@types/node不会起作用
+    "lib": ["dom", "esnext", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],
+    "baseUrl": ".",
+    "rootDir": "./",
+    "strictNullChecks": true
+  },
+  "include": ["./src/**/*.ts", "./global.d.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts", "dev"],
+  "types": ["node"]
+}
diff --git a/packages/inula/scripts/__tests__/temp.test.jsx b/packages/inula/scripts/__tests__/temp.test.jsx
new file mode 100644
index 00000000..18a8050a
--- /dev/null
+++ b/packages/inula/scripts/__tests__/temp.test.jsx
@@ -0,0 +1,308 @@
+/*
+ * 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.
+ */
+
+import { useRef, useState } from 'openinula';
+
+let interval;
+
+function HooksComponent() {
+  const renderCount = ++useRef(0).current;
+
+  const [count, setCount] = useState(0);
+
+  if (!interval) {
+    interval = setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+  }
+
+  return (
+    <div>
+      <div>组件渲染次数:{renderCount}</div>
+      <div>Count:{count}</div>
+    </div>
+  );
+}
+
+
+import { useRef, useReactive, useComputed } from 'openinula';
+
+function ReactiveComponent() {
+  const renderCount = ++useRef(0).current;
+
+  const data = useReactive({ count: 0 });
+  const countText = useComputed(() => {
+    return `Count: ${data.count.get()}`;
+  });
+
+  setInterval(() => {
+    data.count.set(c => c + 1);
+  }, 1000);
+
+  return (
+    <div>
+      <div>组件渲染次数:{renderCount}</div>
+      <div>{countText}</div>
+    </div>
+  );
+}
+
+
+import { createStore } from 'openinula';
+
+const getStore = createStore({
+  id: 'value',
+  state: {
+    val: 0,
+  },
+  actions: {
+    plusOne(state) {
+      state.val += 1;
+    },
+    plusValue(state, value) {
+      state.val += value;
+    },
+  },
+});
+
+function App() {
+  const store = getStore();
+
+  return (
+    <>
+      <h1>{store.val}</h1>
+      {/*修改state值*/}
+      <button onClick={() => store.plusOne()}>+1</button>
+    </>
+  );
+}
+
+import { BrowserRouter, Link, Route, Switch } from 'inula-router';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div>
+        <Link to="/">Main page</Link> | <Link to="/page1">Page 1</Link> | <Link to="/page2">Page 2</Link>
+      </div>
+
+      <Switch>
+        <Route path="/page2">
+          <h1>I'm Page 2</h1>
+        </Route>
+        <Route path="/page1">
+          <h1>I'm Page 1</h1>
+        </Route>
+        <Route path="/">
+          <h1>I'm Page</h1>
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}
+
+
+import { useState, render } from 'openinula';
+import { IntlProvider, FormattedMessage } from 'inula-intl';
+
+export const App = () => {
+  // 英文资源
+  const en = {
+    text: 'Welcome to the Inula-intl component!',
+    button: 'click me!',
+  };
+
+  // 中文资源
+  const zh = {
+    text: '欢迎使用Inula-intl组件！',
+    button: '点我！',
+  };
+
+  const [locale, setLocale] = useState('zh');
+  const messages = locale === 'zh' ? zh : en;
+
+  return (
+    <IntlProvider locale={locale} messages={messages}>
+      <div>
+        <h2>Inula-intl 国际化</h2>
+        <pre>
+          <FormattedMessage id="text" />
+          <FormattedMessage id="text" />
+          <FormattedMessage id="text" />
+          <button
+            className="Button"
+            onClick={() => {
+              setLocale(locale === 'zh' ? 'en' : 'zh');
+            }}
+          >
+            <FormattedMessage id={'button'} />
+          </button>
+          <br />
+        </pre>
+      </div>
+    </IntlProvider>
+  );
+};
+
+/**
+ *  index.tsx
+ */
+function render() {
+  render(
+    <>
+      <App/>
+    </>,
+    document.querySelector('#root')
+  );
+}
+
+render();
+
+
+// 使用自定义配置发送GET请求
+import hr from 'inula-request';
+
+hr.get('https://www.example.com/data', {
+  params: {
+    id: 123,
+    sortBy: 'name',
+  },
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest',
+    Authorization: 'your-token',
+  },
+})
+  .then(response => {
+    // 处理响应数据
+  })
+  .catch(error => {
+    // 处理错误
+  });
+
+// 配置使用实时数据流
+import { useHR } from 'inula-request';
+
+const App = () => {
+  const options = {
+    pollingInterval: 3000,
+    enablePollingOptimization: true,
+    limitation: { minInterval: 500, maxInterval: 4000 },
+  };
+  const { data, error } = useHR('https://www.example.com', null, options);
+
+  return (
+    <div>
+      <pre>{error ? error.message : data}</pre>
+    </div>
+  );
+};
+
+import { createStore } from 'openInula';
+
+export const getStore = createStore({
+  state: {
+    visible: false,
+    value: 0,
+    title: ''
+  },
+  actions: {
+    showProgress: (state, title) => {
+      state.visible = true;
+      state.tilte = title;
+    },
+    hideProgress: (state) => {
+      state.visible = false;
+    },
+    updateProgress: (state, value) => {
+      state.value = value;
+    }
+  }
+});
+
+
+
+
+// 1. constant.js
+export const SHOW_PROGRESS = 'SHOW_PROGRESS';
+export const HIDE_PROGRESS = 'HIDE_PROGRESS';
+export const UPDATE_PROGRESS = 'UPDATE_PROGRESS';
+
+// 2. action.js
+import { SHOW_PROGRESS, HIDE_PROGRESS, UPDATE_PROGRESS } from './constant';
+
+export const showProgress = title => {
+  return {
+    type: SHOW_PROGRESS,
+    visible: true,
+    title,
+  };
+};
+
+export const hideProgress = () => {
+  return {
+    type: HIDE_PROGRESS,
+    visible: false,
+  };
+};
+
+export const updateProgress = value => {
+  return {
+    type: UPDATE_PROGRESS,
+    value,
+  };
+};
+
+// 3. reducer.js
+import { SHOW_PROGRESS, HIDE_PROGRESS, UPDATE_PROGRESS } from './constant';
+
+const INIT_STATE = {
+  visible: false,
+  value: 0,
+  title: '',
+};
+
+export function Progress(state = INIT_STATE, action) {
+  switch (action.type) {
+    case SHOW_PROGRESS:
+      return {
+        ...state,
+        visible: action.visible,
+        title: action.title,
+      };
+    case HIDE_PROGRESS:
+      return {
+        ...state,
+        visible: action.visible,
+      };
+    case UPDATE_PROGRESS:
+      return {
+        ...state,
+        value: action.value,
+      };
+    default:
+      return state;
+  }
+}
+
+// 4. index.js
+import { showProgress, hideProgress, updateProgress } from './action';
+import { Progress } from './reducer';
+
+export {
+  showProgress,
+  hideProgress,
+  updateProgress,
+  Progress
+};