基于最新的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，基于hookUIClickUseState(showGreeting, name="xjp")//- Click Component使用組件外部store，基于stamenUIClickUseStore `;}// 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.flexif props.showGreetingp.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`divspan #{count}button(onClick=()=>dispatch('decrement')) -button(onClick=()=>dispatch('increment')) +button(onClick=()=>dispatch('asyncIncrement')) + `; }export default App復制代碼

總結

以上是生活随笔為你收集整理的react hook + stamen store + pug实现纯函数无痛版react开发体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。