fre 新突破，class 与 hooks 混用

如题，起因是 rasmus 提交的一个 demo

codesandbox.io/s/fre-demo-…

大家都知道，fre 是一个纯 hooks 的 react like 框架，也正是因为这个原因，它才可以做到 1kb，才可以无痛搞定异步渲染

但是如果有一种方式可以毫不费力的实现 class 的话，那顺手的事，支持一下也无妨

import { h, render } from 'fre'
import { Component, useComponent } from './fre-component'

class Counter extends Component {
  constructor (props) {
    super(props)
    this.state = { count: 0 }
  }

  render () {
    const { count } = this.state
    const setCount = count => this.setState({ count })

    return (
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
      </div>
    )
  }
}

Counter = useComponent(Counter)

render(<Counter />, document.body)

如题，原理很简单，就是将一个 class 变成 function 组件，这个做法和 react 是相反的，react 是在 class 的基础上实现 hooks 的 API，而 fre 是在 hooks 的基础上，实现 class 的 API

fre 的做法带来了新的突破： class 和 hooks 的混用

因为这个 class 的 render 方法其实是和 hooks 对等的，他只是换了层皮而已

所以你在 render 方法里使用 hooks 完全没有影响

同时，也解决了 hooks 无法使用 HOC 的问题

这是一个非常有趣的 idea，也是至今为止，fre 第一次脱离 react 而主动发现的兴奋♂ 点

我现在还在思考，是否需要内置到 fre 中，但是我觉得这个实现不需要 fre 内部做什么事情，暂时我提倡大家使用 fre 自己改造适合自己的 class 组件

最后放 fre 的 github 地址：github.com/132yse/fre

欢迎 star 与试用，更欢迎一起来寻找突破 ^_^