React学习-hock钩子
什么是hock钩子？ 为了弥补函数式组件没有生命周期和状态的缺点
如何使用呢？
首先我们引入
import React
,{useState
} from 'react';
设置const
const [状态的名字
,修改状态的方法
]=useState(状态的初始值
);
状态直接用
onClick
={()=>修改状态的方法(怎么修改
)}
只有React函数可以使用hock其他不能用不能在循环条件或者嵌套中使用
生命周期
引入
import React
,{useState
,useEffect
} from 'react';
使用
useEffect(()=>{
console
.log(1111);
})
完整代码
App.js
import React
,{useState
,useEffect
} from 'react';
export default function App(){
const [num
,addNum
]=useState(1);
useEffect(()=>{
console
.log(1111);
})
return (
<div
>
<button onClick
={()=>addNum(num
+1)}>点我
</button
>
<span
>{num
}</span
>
</div
>
)
}
最终实现的效果
点击按钮数字会加一，且一开始会调到生命周期的钩子函数并打印出相应数据。
