react hook + stamen store + pug实现纯函数无痛版react开发体验

基于最新的react 16.7.0-alpha.2,结合react hook + stamen store + pug,实现纯函数无痛版react开发体验,畅快度直逼clojurescript + reagent。

看图:

import React, { useState, useEffect} from "react"
import { createStore } from "stamen"
import logo from './logo.svg'
import './App.css'

// main
function App() {
  return pug`
    div 
      //- Click Component使用组件内部state,基于hook
      UIClickUseState(showGreeting, name="xjp")
      //- Click Component使用组件外部store,基于stamen
      UIClickUseStore
`;}

// store
const Store = createStore({
  state: {
    count: 10
  },
  reducers: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  effects: {
    async asyncIncrement(dispatch) {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      dispatch("increment")
    }
  }
});

// UIClickUseState
function UIClickUseState(props) {
  const [count, setCount] = useState(0);
  const addNum = num => setCount(count + num);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return pug`
    div.w1.m1.flex
      if props.showGreeting
        p.greeting Hello #{props.name}!
      button(
        onClick=()=>addNum(10)
      ) #{count} Click Me
`;
}

// UIClickUseStore
function UIClickUseStore(props) {
  const { get, dispatch } = Store.useStore();
  const count = get(s => s.count);
  return pug`
    div
      span #{count}
      button(onClick=()=>dispatch('decrement')) -
      button(onClick=()=>dispatch('increment')) +
      button(onClick=()=>dispatch('asyncIncrement')) +
`;
}

export default App

复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值