console
const {startup, register, CcFragment} = cc;
startup({
isModuleMode:true,
store:{
counter:{
count:0,
info:''
}
},
reducer:{
counter:{
inc({moduleState}){
return {count: moduleState.count + 1 };
},
dec({moduleState}){
return {count: moduleState.count - 1 };
},
set({payload:count}){
return { count };
},
}
}
});
class _ClazzCounter extends React.Component {
inc = ()=>{
this.$$dispatch('inc');
}
render(){
const {count} = this.state;
return (
<div style={{border:'1px solid lightgrey',padding:'9px'}}>
count: {count}
<div>
<button onClick={this.inc}>+</button>
<button data-cct="dec" onClick={this.$$domDispatch}>-</button>
</div>
</div>
);
}
}
const ClazzCounter = register('Counter', {module:'counter', sharedStateKeys:'*'})(_ClazzCounter)
function FnCounter(){
return (
<CcFragment connect={{'counter/*':''}} render={({propState, hook, dispatch})=>{
const [count, setCount] = hook.useState(0);
const mySetCount = (count)=>{
setCount(count);
if(count%10===0){
dispatch('counter/set', count);
}
}
return (
<div style={{border:'1px solid blue',padding:'9px',marginTop:'12px'}}>
counter count:{propState.counter.count}<br/>
local count: {count}
<div>
<button onClick={()=>mySetCount(count+1)}>+</button>
<button onClick={()=>mySetCount(count-1)}>-</button>
</div>
</div>
);
}}/>
);
}
class App extends React.Component {
render(){
return (
<div>
<ClazzCounter />
<ClazzCounter />
<FnCounter />
<FnCounter />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
react.js 练习模板
</title>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js">
</script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js">
</script>
<script src="https://www.zzkai.com/js/react-control-center-1.1.74.min.js">
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>