1. 首页
  2. Reactjs

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

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

看图:

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

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

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


作者:freemem
链接:https://juejin.im/post/5becf7c4e51d4514024958b4

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/3789.html

« 菜逼新手webpack入门指南
亿级前端项目中的 3D 技术:支付宝 2020 年新春活动的背后»
Flutter 中文教程资源

相关推荐

QR code