fre 发布 1.0，拥抱 fiber 和 hooks~

唔，终于搞定 fiber 和 hooks 啦::>_<::

对比

使用

import { render, h, useState } from 'fre'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

render(<Counter />, document.getElementById('app'))

Hooks API

纯 hooks API，完全移除 class ，class 和 hooks 是水火不容的，没办法配合使用，所以 hooks 对 class 是替代关系，而不是替补关系

function Counter() {
  const [up, setUp] = useState(0)
  const [down, setDown] = useState(0)
  return (
    <div>
      <h1>{up}</h1>
      <button onClick={() => setUp(up + 1)}>+</button>
      <h1>{down}</h1>
      <button onClick={() => setDown(down -1)}>-</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))

FunctionalComponent

新的组件化方案，完全的 functional ，不解释，就是爽，组件通讯和 react 几乎一致

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Sex />
    </div>
  )
}

function Sex(props){
  const [sex, setSex] = React.useState(0)
  return (
    <div>
      <h1>{up}</h1>
      <button onClick={() => {sex==='boy'?setSex('girl'):setSex('boy')}}>+</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))

props

props 用于组件间通信，还支持渲染 children

另外，正在考虑将生命周期放到 props 中，也可能是单独写一个生命周期的 hook

function App() {
  const [sex, setSex] = useState('boy')
  return (
    <div>
      <Sex sex={sex}/>
      <button onClick={()=>{sex==='boy'?setSex('girl'):setSex('boy')}}></button>
    </div>
  )
}
function Sex(props){
  return <div>{props.sex}</div>
}

Fiber

fre 可以说是 fiber 的最小实现了，不过 fiber 是内部算法，用来替代 diff 的

包含时间切片，调度的极简实现，由于关键的 requestIdeCallback 兼容到 ie11，所以如果运行低版本 ie 中需要自行打补丁

JSX

默认也对外暴露了 h 函数，可以选用 JSX

import { h } from 'fre'

webpack 需配置：

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"h" }]
  ]
}

当然，如果运行于浏览器环境，推荐 htm

总结

github：github.com/132yse/fre 欢迎试用与 star