React、Vue我都要！ReactHook实现Vue的11个基本功能

,document.getElementById('app'));2.鍦≧eact涓负鍏冪礌璁剧疆鏍峰紡銆俁eact浣跨敤鍐呰仈鏍峰紡銆傛垜浠彲浠ヤ娇鐢╟amelCase璇硶鏉ヨ缃唴鑱旀牱寮忋€俁eact浼氳嚜鍔ㄥ湪鎸囧畾鐨勫厓绱犵紪鍙峰悗娣诲姞px銆備笅闈㈢殑渚嬪瓙婕旂ず浜嗙粰h1鍏冪礌娣诲姞myStyle鍐呰仈鏍峰紡锛氳彍楦?/h1>}3.React涓负鍏冪礌璁剧疆class鐢变簬JSX鏄疛avaScript锛屾墍浠ヤ笉鎺ㄨ崘浣跨敤class绛夋爣璇嗙浣滀负XML灞炴€у悕銆傜浉鍙嶏紝浣跨敤className浣滀负鐩稿簲鐨勫睘鎬с€俧unctionDemo(){constclasses='hahaheiheixixi'return()}4.React涓殑鐐瑰嚮浜嬩欢鍦╒ue涓偣鍑讳簨浠剁敱@click瑙﹀彂锛宱nClickfunctionDemo(){consthandleClick=()=>{console.log('鏋椾笁蹇冩槸鑿滈笩')}return(鐐规垜)}5.淇敼React涓殑鍊艰Е鍙慏OM鏇存柊銆傛垜鍦≧eact閽╁瓙涓娇鐢╱seState銆傝繖涓挬瀛愬湪淇敼甯搁噺鐨勬椂鍊欐瘮杈冪畝鍗曪紝浣嗘槸鍦ㄤ慨鏀瑰紩鐢ㄥ璞℃垨鑰呬娇鐢ㄦ暟缁勭殑鏃跺€欙紝闇€瑕佸厛鍋氫竴涓祬鎷疯礉锛岀劧鍚庤鐩栦慨鏀筰mport{useState}from'react'functionDemo(){const[msg,setMsg]=useState('鎴戞槸鑿滈笩')const[obj,setObj]=useState({name:'涓夐懌鏋?,food:'鏂逛究闈?})const[arr,setArr]=useState([{message:'鏋椾笁閼?,id:1},{message:'鏋椾笁閼?鍟?,id:2},{message:'鏋椾笁閼?,id:3}])consthandleClick=(type:number)=>{寮€鍏筹紙绫诲瀷锛墈case1:setMsg('鏋椾笁閼槸鑿滈笩')//鐩存帴璧嬪€糱reak;case2:setObj({...obj,food:'beefball',})//娴呮嫹璐濅腑鏂紱case3:setArr([...arr,{message:'鏋椾笁閼?,id:4}])//娴呮嫹璐濆疄鐜皃ush鏁堟灉break;}}return(

handleClick(1)}>淇敼娑堟伅handleClick(2)}>淇敼obj鐨勯鐗?/button>handleClick(3)}>arrAddanitem

{msg}

{`鎴戞槸${obj.name}鎴戝枩娆㈠悆${obj.food}`}

{arr.map(({message,id})=>{return{message}})}

)}6.鐢熷懡鍛ㄦ湡浣跨敤Reacthook鈥斺€攗seEffectimport{useState,useEffect}from'react'functionApp(){const[num,setNum]=useState(1)const[count,setCount]=useState(1)useEffect(()=>{鎺у埗鍙?log('hahahaha')})return(

setNum(num+1)}>鐐规垜淇敼numsetCount(count+1)}>clickmycount

)}绗簩涓弬鏁版病鏈変紶useEffect(()=>{console.log('hahahaha')})浣滀负useEffect鐨勭浜屼釜鍙傛暟鏃朵笉浼犵殑璇濓紝绗竴涓弬鏁板嚱鏁颁細鍦ㄩ〉闈㈠垵濮嬪寲鍜屾暟鎹洿鏂扮殑鏃跺€欐墽琛岋紝鎵€浠ヨ繖涓椂鍊欏垵濮嬮〉闈細杈撳嚭鍝堝搱鍝堝搱锛岀劧鍚庝笉绠℃槸鐐瑰嚮鎸夐挳淇敼num杩樻槸淇敼count,涔熶細杈撳嚭haha鈥嬧€媓aha绗簩涓弬鏁颁紶涓€涓┖鏁扮粍鍙湪鍒濆椤甸潰鎵嶄細琚墽琛屼竴娆★紝鏃犺浣犵偣鍑绘寜閽慨鏀筺um杩樻槸淇敼count锛岃繖涓嚱鏁伴兘涓嶄細鎵ц銆傜浜屼釜鍙傛暟浼犻€掍竴涓潪绌烘暟缁?/鈶爑seEffect(()=>{console.log('Hahahaha')},[num])//鈶seEffect(()=>{console.log('hahahaha')},[count])//鈶seEffect(()=>{console.log('hahahaha')},[num,count])褰搖seEffect鐨勭浜屼釜鍙傛暟浼犱竴涓潪绌烘暟缁勬椂锛屽綋鍒濆椤甸潰鍜屼緷璧栨暟鎹鏇存柊锛岀涓€涓弬鏁扮殑鍑芥暟灏嗚鎵ц姣斿涓婇潰鐨勪緥瀛愶細鈶狅紝鍙湁鎸変笅淇敼num閿椂锛屽搱鍝堝搱鍝堟墠浼氬啀娆¤緭鍑衡憽锛屽彧鏈夋寜涓嬭鏁颁慨鏀归敭鏃讹紝鎵嶄細鍐嶆杈撳嚭鍝堝搱鍝堝搱鈶紝鏃犺鎸変笅鍝釜閿紝鍝堝搱鍝堝搱閮戒細鍐嶆杈撳嚭returnclearoperationuseEffect(()=>{consttimeId=setTimeout(()=>console.log('鎴戞槸瀹氭椂鍣?),1000)return()=>clearTimeout(timeId)})React灏嗗湪鍗歌浇缁勪欢鏃舵墽琛屾竻闄ゆ搷浣溿€傛晥鏋滃湪姣忔娓叉煋鏃舵墽琛屻€俁eact浼氬湪鎵ц褰撳墠effect涔嬪墠娓呯悊涔嬪墠鐨別ffect銆傝繕涓嶆槑鐧界殑鍚屽锛屽彲浠ョ柉鐙傜偣鍑绘寜閽紝鐪嬬湅鎴戞槸瀹氭椂鍣ㄨ繖鍙ヨ瘽鏄緭鍑哄娆¤繕鏄彧杈撳嚭涓€娆★紝鐒跺悗浣犲氨浼氭亶鐒跺ぇ鎮?.瀹炵幇v-if&v-elseinReactinv-if鍜寁-elsev-if鎸囦护鐢ㄤ簬鏈夋潯浠跺湴鍛堢幇涓€娈靛唴瀹广€備粎褰撴寚浠ょ殑琛ㄨ揪寮忚繑鍥炵湡鍊兼椂鎵嶄細鍛堢幇姝ゅ唴瀹广€?h1v-if="show">鏋椾笁閼槸鑿滈笩涔熷彲浠ョ敤v-else鍔犱竴涓€渆lse鍧椻€濓細鏋椾笁閼槸鑿滈笩Ohno馃槩鍦≧eact涓殑瀹炵幇濡傛灉鍙兂瀹炵幇v-if锛屽彲浠ヤ娇鐢?&閫昏緫杩愮畻绗mport{useState}from'react'functionDemo(){const[show,setShow]=useState(false)constchangeShow=()=>{setShow(!show)}return(

{show&&

鏋椾笁鏂版槸鑿滈笩

}Clickme

)}濡傛灉瑕佸疄鐜皏-if鍜寁-else锛屽彲浠ヤ娇鐢ㄤ笁鍏冭繍绠楃import{useState}from'react'functionDemo(){const[show,setShow]=useState(false)constchangeShow=()=>{setShow(!show)}return(

{show?

鏋椾笁蹇冩槸鑿滈笩

:

鑿滈笩鏄灄涓変俊

}鐐规垜

)}8.React涓疄鐜皏-showvue涓殑v-show鏍规嵁鏉′欢鏄剧ず鍏冪礌鐨勫彟涓€绉嶉€夋嫨鏄痸-鏄剧ず鎸囦护銆傜敤娉曞ぇ鑷寸浉鍚岋細鏋椾笁淇℃槸涓彍楦?/h1>涓嶅悓鐨勬槸甯-show鐨勫厓绱犱細涓€鐩磋娓叉煋骞朵繚鐣欏湪DOM涓€倂-show鍙槸鍒囨崲鍏冪礌鐨凜SS灞炴€ф樉绀恒€俁eact涓殑瀹炵幇鍏跺疄灏辨槸鏀瑰彉鍏冪礌鐨勬樉绀烘牱寮忔潵杈惧埌鏁堟灉functionDemo(){//...鍚屾牱鐨勪唬鐮乺eturn(

鏋椾笁蹇冩槸鑿滈笩鐐规垜

)}9.React涓疄鐜皏-for锛屾垜浠彲浠ヤ娇鐢╲-鐢ㄤ簬鍩轰簬鏁扮粍鐨勬寚浠ゆ覆鏌撳垪琛ㄣ€倂-for鎸囦护闇€瑕乮tems涓璱tem褰㈠紡鐨勭壒娈婅娉曪紝鍏朵腑items鏄簮鏁版嵁鏁扮粍锛岃€宨tem鏄杩唬鐨勬暟缁勫厓绱犵殑鍒悕銆倂-for

inVue{{item.message}}

鍦≧eact涓疄鐜癑SX浠ュ厑璁竔n鍦ㄦā鏉夸腑鎻掑叆涓€涓暟缁勶紝鏁扮粍浼氳嚜鍔ㄥ睍寮€鎵€鏈夋垚鍛橈細functionDemo(){constarr=[鏋椾笁閼?/li>,鏋椾笁閼晩,鏋椾笁蹇冨晩鍟?/li>,]return(

{arr}

)}涓嶈繃澶ч儴鍒嗘椂鍊欐垜浼氱敤鍦板浘鏁扮粍鐨勬柟娉曡緟鍔╂覆鏌撳嚱鏁癉emo(){constarr=[{message:'鏋椾笁閼?,id:1},{message:'鏋椾笁閼?,id:2},{message:'鏋椾笁閼績鍟婂晩',id:3}]return(

{arr.map(({message,id})=>{return{message}})}

)}10.鍦≧eact涓殑computedVue涓疄鐜癱omputed锛屽彧瑕乶ame鎴栬€協ood鍙戠敓鍙樺寲锛宮ag灏变細鏇存柊涓哄搴旂殑鍊?h1>{{msg}}computed:{msg(){return`鎴戞槸${this.name}锛屾垜鐖卞悆${this.food}`}}React涓殑React瀹炵幇闇€瑕佷娇鐢╱seMemo杩欎釜hook鏉ュ疄鐜拌绠楁晥鏋渋mport{useState,useMemo}from'react'functionDemo(){const[name,setName]=useState('鏋椾笁閼?)const[food,setFood]=useState('鏂逛究闈?)//瀹炵幇璁＄畻鐨勫姛鑳絚onstmsg=useMemo(()=>`鎴戞槸${name},Ilovetoeat${food}`,[name,food])//鐩戞帶涓や釜鍙橀噺name鍜宖oodconsthandleClick=(type:number)=>{if(type===1){setName('澶ц彍楦?)}elseif(type===2){setFood('鐗涜倝涓?)}}return(

handleClick(1)}>淇敼鍚嶇ОhandleClick(2)}>Modifyfood

{msg}

)}11.React涓疄鐜皐atch//useWatch.tsimport{useEffect,useRef}from'react'typeCallback=(prev?:T)=>voidinterfaceConfig{immdiate:Boolean}constuseWatch=(data:T,callback:Callback,config:Config={immdiate:false})=>{constprev=useRef()const{immdiate}=configconstinited=useRef(false)conststop=useRef(false)useEffect(()=>{constexecute=()=>callback(prev.current)if(!stop.current){if(!inited.current){inited.current=trueimmdiate&&execute()}else{execute()}prev.current=data}},[data])return()=>stop.current=true}exportdefaultuseWatchuseimport{useState}from'react'importuseWatchfrom'/@/hooks/web/useWatch'functionApp(){const[num,setNum]=useState(1)useWatch(num,(pre)=>console.log(pre,num),{immdiate:true})return(

{num}

setNum(num+1)}>鐐规垜