Tyaff — JavaScript的VDOM库，纯JavaScript (ES6+)的轻量级替代品，具有自己的虚拟DOM和极简主义哲学。与React的关键区别在于memo()仅阻止当前组件——子组件继续独立更新链，使优化可预测。来自任何来源的可变数据——一个组件可以直接读取全局存储、单例或窗口，而无需传递props。无Provider/Consumer的拉取式上下文——任何组件通过context: { key() { ... } }声明自己是提供者，子组件通过this.context(key)请求值。props作为第一个参数——像init(props)、memo(props)、render({ title, items })这样的函数签名允许在定义中解构props。键在整个渲染中唯一——这允许在不同的父组件之间移动组件，同时保留实例和状态。主要特点：紧凑且高效——最小API表面、自定义diff/patch算法、通过微任务批量更新。优化批量操作——反转、交换、重新父级比React更快。动态上下文树——具有自动通过HTML标签传播的层次化提供者系统。基于工厂的组件——统一创建模式、自动方法绑定、灵活生命周期。具有延迟挂载的门户——！可挂载到具有锚节点的任意DOM容器。关键系统——用户定义的键在整个渲染中唯一，基于路径的键自动生成。具有键的Fragment——在不使用包装器的情况下分组子组件，有能力移动组。安装：npm install tyaff 快速开始：import { h , Component , mount } from 'tyaff'; const Counter = Component({ count: 0, increment() { this.update({ count: this.count + 1 }); }, render() { return h('div', null, h('p', null, '计数器: ' + this.count), h('button', { onClick: this.increment }, ' + ')); } }); mount(Counter, document.getElementById('app')); 示例：带有上下文的组件 const ThemeProvider = Component({ theme: 'light', context: { theme() { return this.theme; }, toggleTheme() { this.theme = this.theme === 'light' ? 'dark' : 'light'; this.update(); } }, render() { return h('div', null, this.props.children); } }); const ThemedButton = Component({ render() { const theme = this.context('theme'); return h('button', { className: 'btn-' + theme }, '按钮'); } }); mount(h(ThemeProvider, null, h(ThemedButton)), document.body); 示例：全局存储 // store.js export const store = { count: 0 }; // app.js import { store } from './store.js'; import { h, Component, mount, refresh } from 'tyaff'; const Counter = Component({ render() { return h('div', null, '计数: ', store.count); } }); mount(Counter, document.getElementById('app')); // 更新 store.count = 55; await refresh(); // 所有组件将重新读取存储。资源 文档——完整的API描述、使用示例、生命周期、上下文、门户、优化。实时示例——浏览器中的互动演示。基准——tyaff与React的性能比较（14种情况）。更新日志——项目中新变化的记录。致谢：这个项目展示了人类与AI的协作：人类：架构、设计决策、代码审查、愿景；Qwen：开发、优化、文档、视觉设计；GLM：开发、优化；Gemini：研究和分析（通过搜索）。浏览器支持：Chrome 86+、Firefox 78+、Safari 14+、所有支持ES6模块的现代浏览器。许可证：MIT