一 简介

一个简单的js框架 把状态保存在闭包里。需要注意的是:

1. 定义的变量需要写在函数前面，不能写在return函数里面
2. jsx需要写在return函数里
3. 变更状态后需要调用update() 完整的代码如下：

import h, { renderDom, useEffect } from "./closurejs";
const app = (_, update) => {
  let arr = []; // 定义的变量需要写在这里
  let text; // 定义的变量需要写在这里
  let ml = 0; // 定义的变量需要写在这里

  useEffect(
    () => {
      for (let i = 0; i < 10; i++) {
        setTimeout(() => {
          arr.push({
            finish: false,
            type: "测试" + i++
          });
          update();
        }, (i + 1) * 1000);
      }
    },
    () => [] // effect的依赖也需要是函数来返回
  );

  // 需要return一个函数 用于创建闭包 jsx需要放在函数里面
  return () => (
    <div>
      <div>
        <input
          onChange={(e) => {
            text = e.target.value;
          }}
        />
        <button
          onClick={() => {
            arr.push({ type: text, finish: false });
            update();
          }}
        >
          提交
        </button>
      </div>
      <div>
        <p>总数：{arr.length}</p>
        <p>已完成：{arr.filter((item) => item.finish).length} </p>
      </div>
      {arr.map((item) => {
        return (
          <TodoItem
            key={item.type}
            data={item}
            onFinish={() => {
              item.finish = true;
              update();
            }}
            onDelete={() => {
              arr = arr.filter((a) => a.type !== item.type);
              update();
            }}
          />
        );
      })}
      <div style={{ marginLeft: ml + "px", width: "10px", height: "10px" }}>
        111111
      </div>
    </div>
  );
};

renderDom(app, "#app");

效果图

代码地址

gitee.com/wangyi_7099…

克隆下来安装之后直接运行即可