trrn-h

用 闭包变量 替代 useState，用 update() 替代 setState。render 函数中仍可自由使用 React hooks。实验性项目。

import { defineComponent } from "trrn-h";

const Counter = defineComponent(({ initial = 0 }, { update }) => {
  let count = initial; // 闭包 = 状态（只初始化一次）
  return () => (
    // render 函数 = 每次渲染执行
    <button
      onClick={() => {
        count++;
        update();
      }}
    >
      {count}
    </button>
  );
});

核心概念

defineComponent((props, ctx) => {
  // ┌─ 工厂函数 ─────────────────────────┐
  // │ 只执行一次，闭包变量 = 组件状态     │
  // │ ctx.onMount / ctx.onUnmount 注册    │
  // └─────────────────────────────────────┘
  return (props) => {
    // ┌─ render 函数 ────────────────────┐
    // │ 每次渲染执行，可使用 React hooks │
    // │ props 始终是最新值               │
    // └──────────────────────────────────┘
  };
});

| API | 作用 | | ------------------- | ---------------------------------------------- | | ctx.update() | 触发重渲染（修改闭包后调用） | | ctx.onMount(fn) | DOM 挂载后回调（基于 useEffect，SSR 不执行） | | ctx.onUnmount(fn) | 卸载时清理 | | render 中的 hooks | useContext、useMemo、use() 等全部可用 |

工厂函数不能用 hooks（不在组件顶层），render 函数全都能用——闭包和 hooks 按需选用。

render 函数的 props 始终是最新值

工厂函数的 props 参数只初始化一次（闭包捕获），而 render 函数的 props 参数每次渲染都是最新的：

const Comp = defineComponent(({ label }: { label: string }) => {
  // 外层 label — 仅初始值（闭包捕获后不再更新）
  return ({ label }) => <div>{label}</div>;
  //       ^^^^^^^^  同名解构参数遮蔽外层变量，每次渲染都是最新值
});

利用 JavaScript 的变量遮蔽（shadowing），render 函数参数解构与工厂函数解构参数同名时，render 函数内部引用的是参数（最新值），而非外层闭包变量（初始值）。

父组件更新 props 时，React 重新调用组件函数，render 函数收到最新的 props。任何依赖 props 的渲染逻辑都要用 render 函数的参数，不要用外层工厂函数的参数。

安装

npm install trrn-h
# 或
pnpm add trrn-h

// tsconfig.json
{ "compilerOptions": { "jsx": "react-jsx" } }

// 入口
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("app")!).render(<App />);

Preact 项目配置 @preact/preset-vite 将 react 自动映射到 preact/compat 即可使用。

完整示例

const Timer = defineComponent((_, { onMount, onUnmount, update }) => {
  let seconds = 0;
  let timerId: ReturnType<typeof setInterval>;

  onMount(() => {
    timerId = setInterval(() => {
      seconds++;
      update();
    }, 1000);
  });
  onUnmount(() => clearInterval(timerId));

  return () => <div>{seconds}s</div>;
});

// hooks + 闭包联用
const DataList = defineComponent((_, { update, onMount }) => {
  let items = [];

  onMount(async () => {
    items = await fetch("/api/data").then((r) => r.json());
    update();
  });

  return () => {
    const theme = useContext(ThemeCtx);       // hook
    const filtered = useMemo(() => items.filter(...), [items]);
    return <div className={theme}>{filtered}</div>;
  };
});

SSR

天然兼容。onMount 在 SSR 期间不执行（基于 useEffect），hydrate 后自动触发。update() 在服务端安全调用但不产生效果。

常见陷阱

| # | 陷阱 | 正确 | | --- | --------------------------------------- | ---------------------------------------------- | | 1 | 修改闭包后忘了 update() | count++; update(); | | 2 | render 函数中调 update()（无限循环） | 只在事件/异步/生命周期中调用 | | 3 | render 函数用了外层 props（永远初始值） | 用 ({ label }) => label 同名解构遮蔽外层变量 |

License

MIT