一、 简介
hooks是react16.8新增加的一个语法
可以在函数组件中使用state及react其他特性
二、三个常用的Hooks
1、React.useState
(1)、State Hook让函数组件也可以由state状态,并进行状态数据的读写操作
(2)、语法: const [xxx, setXxx] = React.useState(initValue)
(3)、useState()说明:
参数:第一个为初始化指定的值,在内部作缓存
返回值: 包含2个元素的数组,第一个为内部当前状态值,第二个为更新状态值的函数
(4)、setXxx()2种写法:
setXxx(newValue):参数为非函数值,直接指定新的状态值,中内部用其覆盖原来的状态值
setXxx(value => newValue):参数为函数,接受原本的状态值,返回新的状态值,内部用其覆盖原来的状态值
2、React.useEFFECT
(1)、Effect Hook可以让你在函数组件中执行副作用操作(用于模拟类组中的生命周期钩子)
(2)、React中的副作用操作:
发ajax请求数据获取
发布订阅、启动定时器
手动更改真是DOM
(3)、语法和说明
useEffect(()=> {
//在此可以执行任何带副作用操作
return () => {//在组件卸载前执行
//在此做一些收尾类的工作,比如清除定时器、取消订阅等
}
}, [stateVlaue])//如果指定的是[],回调函数指挥在第一次render()后执行
(4)、可以把useEffect Hook看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
3、React.useRef
(1)、Ref Hook可以在函数组件中存储、查找组件内的标签或任意其他数据
(2)、语法: const refContainer = useRef()
(3)、作用:保存标签对象,功能与React.createRef()一样