Create now ➫🔗 kee.so

React Split Components (RiC)

Introduction

Features

Simple Example

functiondemo({ atom}){conststate=atom({count:0,});constonClick=()=>{state.count+=1;};return()=>{const{ count}=state;return(<><h1>{count}</h1><buttononClick={onClick}>Click me</button></>);};}constDemo=create(demo);

Full Example

functiondemo({ props, atom, onMount, onEffect}){conststate=atom({// for useStateloading:true,data:null,count:0,// for useMemopower:()=>state.count*state.count,text:()=>`${props.theme} ~${state.count}`,});// for useRefconstcountRef={current:null};// for useCallbackconstonClick=()=>{const{ setTheme}=props;setTheme();state.count+=1;};constgetData=()=>{request().then((res)=>{state.data=res.data;state.loading=false;});};// for useEffectonMount(()=>{getData();console.log('mount!');return()=>{console.log('unmount!');};});onEffect(state.power,(val,prevVal)=>{console.log('enter state.power',val,prevVal);return()=>{console.log('clear state.power',val,prevVal);};});constonReload=()=>{state.loading=true;getData();};return()=>{const{ theme}=props;const{ loading, data, count, power, text}=state;return(<><h1>{loading ?'loading...' :JSON.stringify(data)}</h1><buttononClick={onReload}>Reload data</button><h1>{theme}</h1><h1ref={countRef}>{count}</h1><h1>{power}</h1><h1>{text}</h1><buttononClick={onClick}>Click me</button></>);};}constDemo=create(demo);

Online Demo

License