useState
组件记住一些信息,并且重置(设置当前的值初始状态)
允许在react函数组件中添加state的hook
是一个特殊hook,特殊的函数
import {useState} form 'react' //引入函数
function myButton (){
const [count, setCount] = useState(0) //声明state 设置count 初始值0,在重复渲染时记住当前的值
function handleClick(){
setCount(count + 1) //更新当前的count
}
return (
<button onClick={handleClick}>
click { count} times
</button>
)
}
hooks
其实上面写的每个函数 都是一个hooks
//函数组件中声明并且使用变量和方法
function myButton({count, click}){
return (
<button onClick={click}>
click {count} me
</button>
)
}
//主函数中 声明要用到的变量 和方法
// return中在组件中传入当前的变量和方法
export default function myApp(){
const [count, setCount] = useState(0)
function handleClick(){
setCount(count + 1)
}
return (
<div>
<myButton count={count} onClick={handleClick}></myButton>
</div>
)
}
)
网友评论