react扩展Hooks

一、 简介

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()一样

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容