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/

大佬有話說 (0)