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 與試用，更歡迎一塊兒來尋找突破 ^_^