怎样写一个 mini React（createElement、render、useState）？

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children
        .flat()
        .filter((child) => child != null && child !== false)
        .map((child) =>
          typeof child === 'object' ? child : { type: 'TEXT', props: { value: String(child), children: [] } },
        ),
    },
  };
}

let currentHooks = null;
let hookIndex = 0;

// 把元素树展开成只含普通标签的结果树；函数组件在这里被调用
function resolve(element, path, store) {
  if (typeof element.type === 'function') {
    // 用组件在树里的位置当钥匙，同一位置的组件每次渲染都拿到同一份状态
    if (!store.has(path)) store.set(path, []);
    currentHooks = store.get(path);
    hookIndex = 0;
    const child = element.type(element.props);
    currentHooks = null;
    return resolve(child, `${path}/${element.type.name}`, store);
  }
  const { children, ...rest } = element.props;
  return {
    type: element.type,
    props: rest,
    children: children.map((child, i) => resolve(child, `${path}.${i}`, store)),
  };
}

function useState(initial) {
  const hooks = currentHooks;
  const index = hookIndex++;
  if (hooks.length <= index) hooks.push({ state: initial });
  const hook = hooks[index];
  const setState = (next) => {
    const value = typeof next === 'function' ? next(hook.state) : next;
    if (Object.is(value, hook.state)) return;
    hook.state = value;
    root.rerender();
  };
  return [hook.state, setState];
}

let root = null;
function createRoot() {
  const store = new Map();
  let element = null;
  root = {
    tree: null,
    render(next) {
      element = next;
      root.rerender();
    },
    rerender() {
      root.tree = resolve(element, 'root', store);
    },
  };
  return root;
}

function toText(node) {
  if (node.type === 'TEXT') return node.props.value;
  const attrs = Object.entries(node.props)
    .filter(([, v]) => typeof v !== 'function')
    .map(([k, v]) => ` ${k}="${v}"`)
    .join('');
  return `<${node.type}${attrs}>${node.children.map(toText).join('')}</${node.type}>`;
}

let renders = 0;
function Counter({ label }) {
  renders++;
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  return createElement(
    'button',
    { title: label, onClick: () => setCount((c) => c + step), onSetStep: setStep },
    label, '：', count,
  );
}

function App() {
  return createElement('div', null,
    createElement(Counter, { label: '点赞' }),
    createElement(Counter, { label: '收藏' }),
  );
}

const app = createRoot();
app.render(createElement(App, null));
console.log(toText(app.tree)); // <div><button title="点赞">点赞：0</button><button title="收藏">收藏：0</button></div>

const [like, star] = app.tree.children;
like.props.onClick();
like.props.onClick();
star.props.onSetStep(10);
app.tree.children[1].props.onClick();
console.log(toText(app.tree)); // <div><button title="点赞">点赞：2</button><button title="收藏">收藏：10</button></div>

const before = renders;
app.tree.children[1].props.onSetStep(10);
console.log(renders - before); // 0