V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
noe132
V2EX  ›  前端开发

react composition api

  •  
  •   noe132 ·
    noe132 · 2020-07-22 11:58:23 +08:00 · 866 次点击
    这是一个创建于 1345 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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/

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2614 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:51 · PVG 23:51 · LAX 08:51 · JFK 11:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.