\n
\n );\n}\n\n// 这是一个用于演示 函数赋值/更新 的组件\nfunction StatefulExample({ name }: { name: string }) {\n console.log(\n \"这个日志仅会打印一次，因为 aoife.next 更新仅仅会派发元素的子属性，不会重绘整个组件\"\n );\n let num = 0;\n return (\n Hello World
\n\n {\n num += 1;\n aoife.next(\".add\");\n }}\n >\n {name}\n \n ({\n fontSize: 20 + num + \"px\",\n })}\n >\n
\n \n );\n}\n\ndocument.body.append({() => num}
\n\n {\n // 异步取值\n return new Promise((res) => {\n setTimeout(() => res(\"hello\"), 500);\n });\n }}\n />\n {() => {\n // 异步插入元素\n return new Promise((res) => {\n setTimeout(() => {\n res(
\n );\n}\n```\n\n## 设计细节\n\n1. 为了延续声明式的开发方式，`aoife.next` 函数并没有传递值，仅仅是派发了更新命令，元素的属性还是由内部状态管理的逻辑来解决状态分支问题\n2. 我们移除了类似 React 中 SCU，purecomponent、memo 等解决重绘问题的概念，因为**一次** aoife.next 执行仅仅更新**一次**局部元素的**属性**，并不会造成大规模重绘\n3. `aoife.next` 已经是全局可选则的更新，所以失去了传统的状态管理库的必要；合理规范好 `aoife.next` 的调用即可。\n\n### 编写 css\n\n```jsx\nconst css = (\n \n);\n\ndocument.body.append(css);\n```\n\n## 生态\n\naoife 的核心设计理念就是用原生 JS 解决生态问题，任何一个函数，其返回值是一个 HTMLElement，就可以在 aoife 中作为标签进行使用。\n\n### 原生 JS 和 aoife 混用的例子\n\nvanilla-pop 组件是一个由 tippy.js 封装的函数，内部并无引入 aoife， 使用方法：\n\n```jsx\n// npm i --save vanilla-app\nimport Pop from \"vanilla-pop\";\n\nconst App = () => {\n return (\n list-a
);\n }, 1000);\n });\n }}\n {() => {\n // 异步插入元素\n return new Promise((res) => {\n setTimeout(() => {\n res(list-b
);\n }, 300);\n });\n }}\n label
\n pop tip
\n ![](\"./document/aoife.svg\")
"}