react composition api

[noe132]

vue composition api 给组件化开发带来了新的逻辑组合方式。但是 我 /公司 /项目 用的是 react 怎么办？

答案是 react composition api！和 mobx 配合，react 也能用上 composition api 。

通过 defineComponent 创建组件，setup 函数只执行一次，返回的 render function 完全由 observable 驱动，可以轻松自由的组合各种数据和逻辑，做到和 vue-composition-api 一样的开发体验，并享受 react 完善的生态和 typescript 的绝佳支持!

项目已有 100% 单元测试覆盖，但当前库还未进入 1.0.0 正式版本，暂时请勿用于生产环境。

安装

yarn add react mobx mobx-react-lite
yarn add @firefox-pro-coding/react-composition-api

github: https://github.com/Firefox-Pro-Coding/react-composition-api

计数器例子：

export const App = defineComponent((props) => {
  const state = observable({ count: 0 })

  onMounted(() => { console.log('mounted') })
  onUnmounted(() => { console.log('unmounted') })

  // observation
  reaction(
    () => state.count,
    () => { console.log('new value is', state.count) },
    { fireImmediately: true },
  )

  const handleAdd = () => { state.count += 1 }
  const handleSub = () => { state.count -= 1 }

  // render function
  return () => (
    <div>
      <div>{state.count}</div>
      <button onClick={handleAdd}>add</button>
      <button onClick={handleSub}>sub</button>
    </div>
  )
})

关于 vue-composition-api: https://vue-composition-api-rfc.netlify.app/