鑳屾櫙闅忕潃ReactHooks鐨勬櫘鍙婏紝缁勪欢閫昏緫缂栧啓鍙樺緱鍑芥暟鍖栵紱閫昏緫鍑芥暟澹版槑鍜屽嚱鏁颁唬鐮佺粨鏋勯殢鐫€閫昏緫鐨勫鍔犺€屽彉寰楀鏉傦紝浠ｇ爜缁勭粐娣蜂贡锛屽嚱鏁板０鏄庡垎鏁ｏ紱鏈€鍏抽敭鐨勪竴鐐规槸姣忎釜浜哄浠ｇ爜鐨勭悊瑙ｄ笉鍚屻€傛湁鐨勫枩娆㈡妸涓€澶у潡閫昏緫鍐欏湪涓€涓嚱鏁伴噷锛屾湁鐨勫枩娆㈡妸閫昏緫鎷嗗垎鎴愬皬鍧椼€傝繖鏍蜂細瀵艰嚧椤圭洰缁存姢鏃朵唬鐮侀鏍煎拰浠ｇ爜缁撴瀯瓒婃潵瓒婁笉缁熶竴锛岄毦浠ョ淮鎶ゃ€傞拡瀵逛互涓婃儏鍐碉紝闇€瑕佷竴绉嶈兘澶熺粍缁囦唬鐮佺粨鏋勶紝姊崇悊閫昏緫鐨勬柟娉曪紝杈惧埌椤圭洰鍙淮鎶ゆ€ч珮銆佷唬鐮佺粨鏋勭粺涓€銆侀€昏緫娓呮櫚鐨勭洰鐨勩€傚彉閲忔暟鎹?鍏变韩鍙橀噺澹版槑锛岀姸鎬佸０鏄?letxxx=xxx/useState鏂规硶澹版槑/functionxx(){}/action/dispatch鏂规硶璋冪敤/xx()/action()/dispatch()閫氳繃涓婂浘锛屽彲浠utcommon缁勪欢鍐呴儴閫昏緫鍒嗕负3閮ㄥ垎锛屽叾涓?鍜?灞炰簬鍚屼竴閮ㄥ垎::涓昏鏄０鏄庢暟鎹紝withuseState/letxxx=11;:澹版槑鍑芥暟鍜屾柟娉曪紝浼氭秹鍙婂埌淇敼鏁版嵁**setcounts**锛屼娇鐢ㄦ暟鎹?*sendLogcount**锛涘叾涓紝淇敼涓細鏈変竴浜涜緟鍔╂柟娉昮etch锛岀敤浜庢墽琛岀浉搴旂殑閫昏緫锛沜all鏂规硶锛?鍜?閮ㄥ垎閮戒娇鐢ㄤ簡瑙嗗浘涓殑鍑芥暟鍜屾柟娉曪紝缁熺О涓篶all鏂规硶銆傜粡杩囨媶鍒嗗垎鏋愪唬鐮佺粨鏋勶紱鍏跺疄鍦ㄦ棩甯哥殑寮€鍙戣繃绋嬩腑锛屽ぇ閮ㄥ垎浠ｇ爜鐨勫鏉傞€昏緫閮藉湪1鍜?閮ㄥ垎锛?閮ㄥ垎鏈夌浉浜掕皟鐢ㄧ殑閫昏緫锛屽悇绉嶈緟鍔╁姛鑳芥贩鏉傚湪涓€璧凤紝鎱㈡參鐨勫氨鎶婁唬鐮佹悶瀹氫簡瓒婃潵瓒婂鏉傚拰闅句互闃呰銆傚０鏄庡拰瀹氫箟鎴戜滑鍙互灏佽绗?閮ㄥ垎鍜岀2閮ㄥ垎鐨勫鏉傛€э紝骞跺畾涔変竴涓爣鍑嗗寲鍜屽共鍑€鐨勭粨鏋勩€備粠涓婂浘鍙互鐪嬪嚭锛屽師鏉ョ殑1銆?銆?閮ㄥ垎缁熶竴灏佽鍦ㄤ竴涓猦ooks.js鏂囦欢涓紱浠ｇ爜鐨勫師濮?鍜?閮ㄥ垎閫氳繃璋冪敤**polymerAction**鑱氬悎锛屽皢鐘舵€佸拰鍔ㄤ綔/鏂规硶澹版槑鏀惧湪涓€璧凤紱鐒跺悗閫氳繃**const[state,actions,shareVars]=usePolymerActionState(countActions)**鍏紑鏁版嵁鍜屽姩浣?鏂规硶銆傚師濮嬬殑3閮ㄥ垎灏佽鎸傞挬浣跨敤**usePolymerActionState**鏉ュ叕寮€鏂规硶璋冪敤锛岄伒寰甯哥殑璋冪敤閫昏緫銆傚湪瑙嗗浘涓紝姝ｅ父浣跨敤hooks灏佽鏂规硶锛?*return**鍑?*usePolymerActionState**鏆撮湶鏁版嵁鍜屾柟娉曪紝姝ｅ父璋冪敤閫昏緫銆傚彲浠ョ湅鍑烘牳蹇冮儴鍒嗘槸灏唖tate鍜宎ction楂樺唴鑱氬皝瑁呭湪涓€璧凤紝閫氳繃瀵硅薄鏉ョ粍缁囦唬鐮佺粨鏋勶紝瀵硅薄鍙互缁勫悎璧锋潵缁勭粐鏇村ぇ鏇村鏉傜殑浠ｇ爜閫昏緫鍜岀粨鏋勩€備粠瑙嗗浘鐨勮搴︽潵鐪嬶紝鍙槸璋冪敤浜嗘毚闇茬殑鏂规硶銆傜患涓婃墍杩帮紝鎸夌収涓婅堪鏂规硶锛屽彲浠ユ彁楂橀」鐩殑鍙淮鎶ゆ€э紝缁熶竴浠ｇ爜缁撴瀯銆俇sage/**@jsxcreateElement*/import{createElement,useEffect,useState,useRef,useMemo}from'react';\export榛樿鍑芥暟Realtimetrendinghotels(props){const{gdc,mds,pageUtils}=props;return();}import{createElement,useEffect,useState,useRef,useMemo}from'react';`import{initHooksAction}from'./hooks';functionCustomComponent(props){const[璁℃暟,{setCounts,鍙戦€佹棩蹇梷]=initHooksAction();杩斿洖({setCounts('Inputdata');}}>{count});}initHooksAction鍙互鑾峰彇鏁版嵁鍜屾柟娉曪紱閬靛惊姝ｅ父閫昏緫锛沜onstcountActions=polymerAction({count:0},{setCounts({state,setState},params){setState({count:++state.count})console.log(params)},fetch({state,setState},count){console.log(`鎺ュ彛璇锋眰鍩嬪叆${count}`)},sendLog({state,setState,actions},count){actions.fetch(count)console.log(`鍙戦€佺浉鍏冲煁鐐?{count}`)},},{});functioninitHooksAction(){const[state,actions,shareVars]=usePolymerActionState(countActions);useEffect(()=>{sendLog(state.count);},[state.count])return[state.count,actions,shareVars]}polymerAction锛氬０鏄庣姸鎬侊紝鍔ㄤ綔锛宻hareVar锛泆sePolymerActionState锛氬簳灞備細閲嶅啓actions鏂规硶锛宻hareVar鏁版嵁锛岃繑鍥炴暟鎹搴攑olymerAction涓０鏄庣殑鏁版嵁锛屾柟娉昳nitHooksAction锛氬皝瑁卙ooks閫昏緫楂樼骇鐢ㄦ硶split/mergeactionconstinfiniteScrollAction=polymerAction({isLoadingShow:false,isLoadingError:false,isEmptyData:false,},{showLoading({state,setState,shareVars,actions}){setState({isLoadingShow:true,isLoadingError:false,isEmptyData:false});},closeLoading({state,setState,shareVars,actions}){setState({isLoadingShow:false});shareVars.throttleTarget=true;},...,},{throttleTarget:true,});consthandleAction=polymerAction({},{/***鍒锋柊鐣岄潰*/onRefreshList({鐘舵€?setState,shareVars,琛屼负绂诲瓙}){....},},{})constscrollListAction=polymerAction({cityList:[],recommendList:[],isCityListShow:false,},{initListParam({state,setState,shareVars,actions}){shareVars.pageNo=0;shareVars.dataVersion=0;},exp({state,setState,shareVars,actions},data){const{cityName,cityCode}=shareVars.cityData;letshidsArr=[];if(data[0]&&data[0].hotHotelList){shidsArr=hotCityListShids(data);sendUT.exp(cityName,shidsArr[0].join('/'),shidsArr[1].join('/'));}else{shidsArr=shids(data);sendUT.exp(cityName,'',shidsArr.join('/'));}},...,},{pageNo:0,dataVersion:0,cityData:{cityName:'',cityCode:'',}});functioninitEffect(param){const[state,action]=usePolymerActionState(mergePolymerAction(scrollListAction,infiniteScrollAction,handleAction));......杩斿洖[state,action]}閫氳繃**mergePolymerAction**鍙互鎶婂涓猘ction锛宻crollListAction銆乮nfiniteScrollAction銆乭andleAction鍚堝苟锛涜繖鏍峰氨鍙互浠绘剰鎷嗗垎actionAPIuseSetState绠＄悊瀵硅薄绫诲瀷state鐨凥ooks锛岀敤娉曚笌绫荤粍浠剁殑this.setState鍩烘湰鐩稿悓銆俢onst[state,setState]=useSetState({hehe:1,aaa:1});//淇敼setState({aaa:2})getAction浠巔olymerAction鑾峰彇鍔ㄤ綔consthandleAction=polymerAction({},{/***鍒锋柊鐣岄潰*/onRefreshList({state,setState,shareVars,actions}){....},},{});consthandle=getAction(handleAction);console.log(handle);,{/***鍒锋柊鐣岄潰*/onRefreshList({state,setState,shareVars,actions}){....},}polymerAction鐢熸垚鍔ㄤ綔闆嗗悎constscrollListAction=polymerAction({cityList:[],recommendList:[],isCityListShow:false,},{initListParam({state,setState,shareVars,actions}){shareVars.pageNo=0;shareVars.dataVersion=0;},...,},{pageNo:0,dataVersion:0,cityData:{cityName:'',cityCode:'',}});const[state,actions,shareVal]=polymerAction(stateObj,actionObj,shareValObj)Params鍙傛暟璇存槑绫诲瀷榛樿鍊約tateObj蹇呴』浼狅紝澹版槑stateobject{}actionObj蹇呴』浼狅紝澹版槑鏂规硶锛屽嚱鏁板璞}shareValObj鍙€夛紝浼犲叆榛樿鐘舵€佸€糱oolean{}缁撴灉鍙傛暟鎻忚堪绫诲瀷state鐘舵€佸€紀bjectactions鎿嶄綔闆咥ctionsshareVal鍏变韩鍙橀噺objectactionObjconsthandleAction=polymerAction({},{/***鍒锋柊鐣岄潰*/onRefreshList({state,actions,shareVars,setState,setShareVars},param){...},/***鐣岄潰閿欒锛屽埛鏂扮晫闈?/onRefreshListError({state,setState,shareVars,actions}){actions.getList(true);},},{});鍙傛暟璇存槑绫诲瀷state鑾峰彇stateObj**object**actions鑾峰彇actionObj**object**shareVars鑾峰彇shareValObj**object**setStatesetstate**({})=>void**setShareVarssetshareVal**({})=>void**usePolymerActionState杞崲鎴?*PolymerActionState鍙互鏍规嵁浼犲叆鐨刟ction鏀瑰彉椤甸潰**functioninitEffect(param){const[state,actions]=usePolymerActionState(scrollListAction);......return[state,action]}const[state,actions,shareVal]=usePolymerActionState(polymerAction);Params鍙傛暟璇存槑蹇呴』浼犲叆绫诲瀷polymerAction锛屽０鏄巔olymerActionStateset**Array**Result鍙傛暟璇存槑绫诲瀷state鐘舵€佸€?*object**actions鎿嶄綔闆?*object**shareVal鍏变韩鍙橀噺**object**mergePolymerAction鍚堝苟澶氫釜**polymerAction**mergePolymerAction(scrollListAction,infiniteScrollAction,handleAction)浠ｇ爜letuseState=null;letuseRef=null;letuseMemo=null;functionuseSetState(initData){const[state,setState]=useState(initData);constdispatch=(next)=>{if(typeofnext==='object'){setState((pre)=>Object.assign({},pre,next));}else{璁剧疆鐘舵€侊紙涓嬩竴姝ワ級锛泒};return[state,dispatch];}functionpolymerAction(state,action={},shareVar={}){return[state,action,shareVar];}functionnewActionData(actions,states,shareVars,setState){璁﹏ewAction={};Object.keys(actions).forEach((name)=>{constold=actions[name];if(typeofold==='function'){//閲嶆柊鍐檃ctions鏂规硶newAction[name]=function(...arg){returnold.call(null,{state:states,shareVars,actions:newAction,setState(param,fn=()=>{}){setState(param);fn(param);},setShareVars(param){shareVars=Object.assign(shareVars,param);},},...鍙傛暟);};}});returnnewAction;}//涓庨挬瀛愬嚱鏁皍sePolymerActionState(param){const[state,action={},shareVar={}]=param;const鍔ㄤ綔=鍔ㄤ綔锛?/Object.assign({},xxx)澶氫釜鍔犺浇閲嶅鐨勭粍浠剁敓鎴愬搴旂殑鏁版嵁锛岄槻姝㈡暟鎹浉浜掕鐩朿onst[states,setState]=useSetState(Object.assign({},state));//鍒涘缓涓€涓柊鐨勫叡浜彉閲廲onstshareVars=useMemo(()=>(Object.assign({},shareVar)),[]);shareVars.updateAfterState=states;constnewAction=useMemo(()=>(newActionData(actions,states,shareVars,setState)),[action,states,shareVars])return[states,newAction,shareVars];}functiongetAction(polymer){杩斿洖鑱氬悎鐗1];}functionmergePolymerAction(action1,...res){constactions=action1.map(function(val,index){letresAction={};res.forEach((action)=>{Object.assign(resAction,action[index]);});杩斿洖Object.as绗﹀彿锛坽}锛寁al锛宺esAction锛夛紱});returnactions;}functioninjectState(newUseState,newUseRef,newUseMemo){if(!newUseState||!newUseMemo){console.warn(`璇峰湪妯″潡useState,useMemo涓紶鍏oduleInit锛屽锛歮oduleInit({gdc,mds,pageUtils})(useState,useEffect,useRef,useMemo);`);杩斿洖}useState=newUseState;useRef=newUseRef;useMemo=newUseMemo;}export{useSetState,getAction,polymerAction,usePolymerActionState,mergePolymerAction,injectState};githubhttps://github.com/NoahsDante...濡傛灉瀵逛綘鏈夊府鍔╋紝璇风偣鍑诲紑濮嬸煓?/p>
