美文网首页
学习react

学习react

作者: 怎么昵称 | 来源:发表于2022-11-16 15:55 被阅读0次

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>
    )

}

)

相关文章

网友评论

      本文标题:学习react

      本文链接:https://www.haomeiwen.com/subject/xjolxdtx.html