/**
* 函数式组件,其实就是导出一个构造函数,把一个函数当成一个组件
* 函数式组件:
* 1.没有生命周期
* 2.没有状态
* 3.没有this
* 函数式组件通常使用需要结合hook实现
* 函数式组件快捷键rfc
*/
import { useState } from 'react'
//一种写法
// function App2() {
//二种写法
const App2 = () => {
//所有hook都不能写在条件判断语句中
// const [变量名,修改变量的方法]=useState(变量初始值)
const [num, setNum] = useState(0)
/* 二种写法 */
const handleClickFn=()=> {
setNum(num+1)
}
//setNum(新值) 用新值替换掉num旧值
return (
<>
<h2>{num}</h2>
{/* 一种写法 */}
{/* <button onClick={()=>setNum(num+1)}>增加</button> */}
{/* 二种写法 */}
<button onClick={handleClickFn}>增加</button>
</>
)
}
export default App2
1.函数式组件结合hook实现
最新推荐文章于 2023-06-14 16:03:30 发布