import React , { useState , useCallback } from 'react' ; import { Card , Button , Input } from 'antd' ; import { Provider , useStore } from '../../src/store' ; import { store , mutations , Store } from './store' ; import './index.css' ; import 'antd/dist/antd.css' ; function Count ( ) { const countState = useStore ( ( store ) => { const { state , computed } = store ; const { count } = state ; const { plusOne , plusTwo } = computed ; return { count , plusOne , plusTwo , } ; } ) ; mutations . log ( '计数器组件重新渲染💐' ) ; return ( < Card hoverable style = { { marginBottom : 24 } } > < h1 > 计数器 < /h1> < div className = "chunk" > < div className = "text-chunk" > store中的count现在是 { countState . count } < /div> < div className = "text-chunk" > computed值中的plusOne现在是 { countState . plusOne . value } < /div> < div className = "text-chunk" > 嵌套computed值中的plusTwo现在是 { countState . plusTwo . value } < /div> < Button onClick = { mutations . add } > add < /Button> < /div> < /Card>); } function Chat ( ) { const message = useStore ( ( store ) => store . state . message ) ; const [ value , setValue ] = useState ( '' ) ; mutations . log ( '聊天室组件重新渲染💐' ) ; const onSubmit = ( e ) => { e . preventDefault ( ) ; mutations . chat ( value ) ; } ; return ( < Card hoverable style = { { marginBottom : 24 } } > < h1 > 聊天室 < /h1> < div className = "text-chunk" > 当前消息是 : { message } < /div> < form onSubmit = { onSubmit } > < Input onChange = { e => setValue ( e . target . value ) } placeholder = "请输入消息" / > < /form> < /Card>); } function Logger ( ) { const logs = useStore ( ( store ) => { return store . state . logs . map ( ( log , idx ) => ( < p className = "log" key = { idx } > { log } < /p>)); } ) ; return ( < Card hoverable > < h1 > 控制台 < /h1> < div className = "logs" > { logs } < /div> < /Card>); } export default ( ) => { return ( < Provider value = { store } > < div className = "flex" > < div className = "left" > < div className = "count" > < Count /> < /div> < div className = "chat" > < Chat /> < /div> < /div> < div className = "right" > < Logger /> < /div> < /div> < /Provider>); } ;