React开发者转投Hyperapp6大概念映射与心智模型迁移完全指南【免费下载链接】hyperapp1kB-ish JavaScript framework for building hypertext applications项目地址: https://gitcode.com/gh_mirrors/hy/hyperapp对于 React 开发者来说学习 Hyperapp 的最大误区是又要重新学一套框架。其实Hyperapp是一个 1kB 左右的超轻量 JavaScript 框架仅靠h()、text()、app()三个函数就能构建完整的 Web 应用。好消息是它在数据流、单向更新、纯函数渲染这些底层心智上与 React尤其是 Redux 时代的 React高度同构你只需要把 6 个核心概念对号入座一天之内就能上手写生产级应用。一图看懂React 与 Hyperapp 概念对照总表#你的 React 记忆Hyperapp 对应概念一句话解释1useState/ ReduxstoreState统一状态全局一份init没有组件私有状态2JSX 组件树Viewh()text()纯函数返回虚拟 DOM 节点3事件回调 / reducerAction动作纯函数接收状态、返回新状态4useEffect对外Effect效果副作用出口发请求、写存储5useEffect cleanup对内Subscription订阅副作用入口键盘、定时器、轮询6Redux middlewareDispatch调度可插拔的 dispatch 管道支持调试这张表就是全文的路线图下面逐个拆解。映射1从 useState 本地状态到全局统一 StateReact 里状态是分散的每个组件一个useState跨组件共享靠 props 或 Context。Hyperapp 反其道而行——整个应用只有一份状态由app()的init:初始化视图、动作、订阅共享访问同一份数据。app({ init: { todos: [], value: }, view: ({ todos, value }) h(main, {}, [/* ... */]), node: document.getElementById(app), })心智迁移要点忘掉组件状态拥抱应用状态的切片。子组件想要什么数据从全局状态里解构即可。状态变更永远不可变必须返回新对象{ ...state, x: 1 }。直接 mutate 原状态Hyperapp 检测不到变化页面不会更新——这与 Redux 的纪律完全一致。状态越扁平越好官方建议状态可序列化方便持久化与调试。 详见 docs/architecture/state.md映射2从 JSX 到 h() 与 text() 虚拟 DOMReact 用 JSX 语法糖描述 UIHyperapp 没有 JSX直接用h()创建元素节点、text()创建文本节点组合出虚拟 DOM 树h(input, { type: text, oninput: NewValue, value }), h(button, { onclick: AddTodo }, text(New!)),规则非常简洁h(tag, props, children)对应 JSX 标签children必须是数组。类名class既可以是字符串也可以是对象值 truthy 才生效条件类名写法与 React 的classnames习惯如出一辙。列表渲染同样需要key让 diff 算法精准复用节点。视图是纯函数(state) VNode不持有任何状态与 React 的 stateless 组件同构。Hyperapp 的 diff 算法高度优化源码不足 400 行想理解细节可直接阅读核心文件 index.js类型签名参考 index.d.ts。 详见 docs/architecture/views.md映射3从事件回调到 Action——Hyperapp 的灵魂这是 React 开发者感受最强烈的差异。React 的事件回调里可以干任何事setState、发请求、改 DOM而 Hyperapp 把改状态和产生副作用彻底分开Action 无副作用的纯函数(state, payload) newStateconst AddTodo (state) ({ ...state, todos: state.todos.concat(state.value), })把 Action 挂到事件属性上onclick: AddTodo点击时框架自动分发它。Action 还可以携带 payloadonclick: [AddBy, 5]返回另一个 Action动作链式包装优雅地预处理事件对象返回undefined来停止整个应用自动清理全部订阅与事件如果你写过 Redux这就是 reducer如果只写过useState这里就是最需要刻意练习的一点事件处理器里不许写副作用副作用要申请给框架执行。 详见 docs/architecture/actions.md映射4useEffect 一分为二——Effects 与 SubscriptionsReact 的useEffect身兼两职对外发请求 对内监听事件这也是它心智负担重的根源。Hyperapp 把它拆成两个方向职责清晰Effect效果——应用向外Action 返回[newState, ...effects]框架负责执行这些副作用。效果器effecter能拿到dispatch异步完成后回派结果const Select (state, selected) [ { ...state, selected }, jsonFetcher(url, GotBio), // fetch 完成后再 dispatch GotBio ]Subscription订阅——世界向内键盘、窗口尺寸、定时器、地理位置等全局事件通过subscriptions: state [...]声明式绑定并可随状态条件启停条件为 falsy 时自动清理等价于useEffect的 cleanup。subscriptions: (state) [ state.selected ! null onKeyDown(ArrowUp, SelectUp), ]官方配套包把常用订阅做得开箱即用packages/time/间隔与时间、packages/events/鼠标、键盘、窗口事件还有 packages/dom/、packages/svg/、packages/html/ 等。 详见 docs/architecture/effects.md 与 docs/architecture/subscriptions.md映射5从组件到 View Component——更简单的组合React 组件有生命周期、有 hooks、有 memo 体系Hyperapp 的组件就是普通函数接收 props 返回 VNode没有任何特殊机制纯靠函数组合const person (props) h(div, { class: person }, [ h(p, {}, text(props.name)), ])组件不拥有状态状态在全局因此天然没有prop drilling 到 useState的别扭。需要性能优化时用memo()惰性渲染等价于React.memo的思路props 没变就不重算。命名建议组件用驼峰名词articleHeaderAction 用帕斯卡动词短语AddTodoEffect/Subscription 用驼峰动词onKey命名即文档。 详见 docs/api/memo.md映射6从 Redux middleware 到 Dispatch 管道app()返回的dispatch就是应用唯一的数据入口。Hyperapp 允许你注入dispatch 初始化器像中间件一样包裹默认 dispatch——调试日志、状态快照、不可变代理保护都能实现app({ /* ... */ dispatch: logActionsMiddleware, // 每次分发自动打印动作名 })这正好接住了 Redux 用户我想要 middleware 做埋点/调试的需求而且实现极其轻dispatch 本身就是可递归、可组合的函数。 详见 docs/architecture/dispatch.md迁移必看的3个坑与学习路径坑1直接 mutate 状态。state.count后返回同一个引用Hyperapp 认为状态没变界面纹丝不动。永远返回新对象。坑2在 Action 里写副作用。Action 必须纯。发请求返回[newState, someEffect]监听全局事件放进subscriptions。纯度是整套架构可靠性的来源。坑3忘记列表 key。数组渲染的 VNode 不带keydiff 只能假设全部变化性能与状态都会出问题。推荐学习路径由浅入深全程无需构建工具快速上手docs/tutorial.md —— 从 Hello World 到订阅一步步搭出完整应用概念速查docs/reference.md —— API 与架构术语总表深入架构docs/architecture/flowchart.md —— 一张流程图看懂 State→View→Action→Effect 的完整循环真实项目packages/ 目录下每个官方包都是最小可用的完整示例结论React 开发者迁移 Hyperapp本质是从组件为中心切换到状态为中心的单向数据流。概念少到一屏能数完心智负担显著下降而函数式纯度让你对状态为什么变了永远有答案。1kB 的体量 几乎为零的学习成本使它成为理解前端框架原理的最佳教具也是构建轻量应用的务实选择。【免费下载链接】hyperapp1kB-ish JavaScript framework for building hypertext applications项目地址: https://gitcode.com/gh_mirrors/hy/hyperapp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考