当前位置: 首页 > Web前端 > HTML5

HTML界面搭建,react-Hook基础:useState和useEffect简述

时间:2023-04-05 14:21:22 HTML5

Hook基础知识:useState、useEffect;useState用于声明组件状态和修改状态,例如:const[cards,setCards]=useState('currentcards');//es6解构const[profile,setProfile]=useState({name:'liaoxinyu',status:'writing'});1.cards为组件状态,初始值为:currentcards2.setCards为修改卡片数据的方法,如:setCards('newcards'),cards会更新为'newcards'3.声明多个状态,即多写useStateuseEffect来执行功能组件中的代码,比如网络请求、修改组件状态等,例如:importReact,{useEffect,useState}from'react';constExample=()=>{const[count,setCount]=useState(0)const[title,setTitle]=useState('原标题')const[profile,setProfile]=useState({name:'liaoxinyu',status:'写作'});useEffect(()=>{setTitle('newtitle...'+count)//创建组件时会执行一些代码//这里修改了titlereturn()=>{setTitle('originaltitle')}//useEffect中的return会在组件销毁时执行,用于销毁一些副作用代码//比如恢复数据},[count]);//这里设置了[count],即当count改变后,会自动执行setTitle('newtitle...'+count)//如果设置了[]空数组,这个useEffect只会执行一次name

setCount(count+1)}>modifycount
)//渲染标题,计数//点击按钮button,调用setCount,将计数加1}