基于最新的react 16.7.0-alpha.2，結(jié)合react hook + stamen store + pug，實(shí)現(xiàn)純函數(shù)無(wú)痛版react開(kāi)發(fā)體驗(yàn)，暢快度直逼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使用組件內(nèi)部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復(fù)制代碼

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。