什么是hooks
- Hook事react 16.8.0版本增加的新特性/新语法
- 可以让我们函数组件中使用state以及其他的React特性
三个常用的Hook
- State Hook: React.useState()
- Effect Hook: React.useEffect()
- Ref Hook: React.useRef()
State Hook
- State Hook让函数也可以有state状态,并进行状态数据的读写操作
- 语法:
const [age, setAge] = React.useState(19)
- useState说明:
- 参数:第一次舒适化制定的值在内部作缓存
- 返回值:包含2个元素的数组,第一个为内部当前状态值,第2个为更新状态值的函数
- setXX()两种写法
- setXxx(newValue): 参数为非函数值,直接制定新的状态值,内部用其覆盖原来的状态值
- setXxx(value => newValue):参数为函数,接受原来的状态值,返回新的状态值,内部用其覆盖原来的状态值
function Demo() {
const [age, setAge] = React.useState(19);
function changeAge () {
// setAge使用一
// setAge(20);
// setAge使用二
setAge(age => age + 1);
}
return (
<div>
<h2>我今年{age}岁</h2>
<button onClikc={changeAge}>修改年龄</button>
</div>
)
}
Effect Hook
- Effect hook可以让我们的函数组件中执行副作用(用于模拟类组件中的生命周期狗子)
- React中的副作用擦欧哦:
- 发ajax请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实dom(尽量避免)
- 语法和说明
useEffect(() => {
return () => {
}
}, [stateValue]);
- 可以吧useEffect Hook看作以下三个函数的组合
- componentDidMount
- componentDidUpdate
- componentWillUnmount
function Demo() {
let [count, setCount] = React.useState(50);
React.useEffect(() => {
const timer = setInterval(() => {
setCount((count) => --count)
});
return () => {
clearInterval(timer);
}
}, [])
function unmount() {
ReactDom.unmountComponnentAtNode(document.getElementById('root'));
}
return (
<div>
<div>倒计时{count}</div>
<button onClick={unmount}>卸载组件</button>
</div>
)
}
Ref Hook
- Ref Hook可以在函数组件中存储/查找组件内的标签或其他数据
- 语法:
const refContainer = useRef()
- 作用:保存标签对象,功能与
React.createRef()
一样