说明:react有两种api一种是class的api还有一个是函数api
一般函数只能执行数据和输出html而需要额外的像保存日志啊事件点击这些 都需要额外的方法来执行 这些额外就是钩子函数
1.使用方法
分为4步
1.启动:要将 转换为有状态组件,需要告诉 React: 从’react’包中导入useState钩子,然后在组件函数的顶部调用useState()
2.初始化:usesate(false) 就是复制false
3.读取:const [on] = useState(false) on用来保存变量的值
4.更新:const[state,setState] = useState(false) state用来保存状态而setState用来执行更新状态的函数
2.使用位置
1.在函数组建的最上面使用
2.在自定义组件的最上面使用
3.不可以使用的情况
1.条件语句中
2.嵌套函数中不可以
useEffect
1.使用方法
useEffect(function(){},[])第一个参数是执行函数,第二个参数是数组 第二个参数的理解:一般是某一个变量 比如{obj.name}当name改变时就会执行函数 并且渲染dom元素 如果是空数组 那么就相当于没有变量会发生改变 所以就只有页面加载dom的时候汇执行一次
使用场景
useEffect 的执行时机是浏览器完成渲染之后,而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前,和 componentDidMount 等价
比如当页面渲染完成之后 让一段数字进行自增 就可以把数字自增写进这个钩子中