21K代码的全新前端框架！React的掘墓人现世！

废话一会儿再说，先上Demo，一个经典桌游“璀璨宝石”：splendor.ezh.dev ，可以2～4人联机玩，进了 游戏可以看具体规则，说明里还藏着源码库地址。

性能碾压React，而易用性可说是达到前端框架的极限了。你要小心的是，你用了这个以后，再回去用React写代码会犯恶心。

核心代码只有2500行，min.js合计21KB，接口共11个API，学习曲线不能说平缓，只能说根本没有。

上面这个界面交互非常复杂的Demo，游戏页面的实现代码只有八百行左右。当然，十个码农有九个懒得去看八百行代码，下面是个微型Demo，四十多行代码，是个很直观的例子，一眼懂，完全不必读文档。

import { $ezh, bindData, Com, useState } from 'ezh'

type Player = {
    name: string
    isSelected: boolean
}

const PlayerView: Com<{ player: Player, onRemove: (player: Player) => void }> = (
    { player, onRemove },
) => {
    return <p>
        <input type='checkbox' checked={bindData(player, 'isSelected')} />
        Name: {player.name}
        <input type='button' value='Remove' onclick={() => onRemove(player)} />
    </p>
}

const MainView: Com = () => {
    const state = useState({
        name: '',
        players: [] as Player[],
    })
    const { players } = state
    const onAdd = () => {
        if (state.name) {
            const isSelected = (players.length + 1) % 2 === 0
            players.push({ name: state.name, isSelected })
            state.name = ''
        }
    }
    const onRemove = (player: Player) => {
        const idx = players.indexOf(player)
        players.splice(idx, 1)
    }
    const selectedCount = players.reduce((count, player) => count + (player.isSelected ? 1 : 0), 0)
    return <div>
        <p>Player count: {players.length}, seleted count: {selectedCount}</p>
        <p>
            {players.map((player, i) => <PlayerView key={i} player={player} onRemove={onRemove} />)}
        </p>
        <p>
            <input type='text' value={bindData(state, 'name')} />
            <input type='button' value='Add' onclick={onAdd} />
        </p>
    </div>
}

$ezh.render(document.getElementById('root')!, MainView)

自我介绍下，我叫 Ezh，读音被定为同"edge"。先秀一下2500行的小肌肉：

1. TypeScript Only。之前某个知名框架说TS太麻烦，他们于是回归了纯JS，所以Ezh当然也要极端一点：只支持TS写代码和编译代码，绝不支持JS。每个html元素、每个组件在Ezh里都有静态类型检查，拼错了属性名当场甩脸给你看。
2. TSX语法当然是标配，让你扔掉React扔得心安理得，完全无痛。甚至过去的React屎山，代码垃圾但是TSX部分还能接着用，也许你删一删它的垃圾代码，剩下的部分可以轻松移植到Ezh框架上来。
3. 基于全新原创的机制的DOM刷新，以O1复杂度，实现最小变化单位（单个字段）触发最小刷新集合（逻辑上不该刷新的绝对不会刷新）。虚拟DOM树Diff，这种听起啦高大上的垃圾路线可以滚了。
4. 说到垃圾（React我没说你哈），这个框架可以配置延迟释放和垃圾收集：想象你刚费了九牛二虎之力组装出了一个结构复杂的1000+元素的DOM分支，没两秒用户点了另一个标签把它销毁了，三秒之后他又点回来了。现在这两个用户动作带来的开销接近于0了。
5. 中国人喜欢大一统不是，一个包全功能最理想。React主包尺寸172K，但Route得加，Redux得要，用TS还得Type包单算。Ezh的npm包解包尺寸41.5K，其中18K的Type文件。无限自由的状态管理、强大却易用的路由表、直观的组件生命期管理，都浓缩在这剩下的21K代码里了。

目前 npm 包 ezh 直接可用，用法参考 Demo源码 ，一小时学习成本搞定。核心源码开源早就在计划中，但可能会晚些。