useState的基本用法
useState用于向函数组件添加状态
它接收一个参数作为状态的初始值，并返回一个数组
数组的第一个值为状态，第二个值为改变状态的函数
import React, { useState } from 'react'
function stateClass(){
const [name, setName] = useState('hong')
return (
<div>
<div>hello,{name}</div>
<button onClick={() => {setName('nihao')}}>点击</button>
</div>
)
}
export default stateClass
在组件中读状态：直接访问状态名即可
在组件中修改状态：调用函数，传入状态改变后的值
useEffect的基本用法
useEffect的作用是：添加组件已挂载的信号，并执行(和清理)副作用
它可以接收2个参数：回调函数、数组
1、只接收第一个参数：
当componentDidMount的时候，执行回调函数
当useState声明的状态被更新（视图重新渲染）后，也执行回调函数
2、接收2个参数：“effect依赖于某一些state”
数组中写的是用useState定义的状态名称
只有当数组中的状态发生更新时，才执行回调函数
如果我们希望回调函数只在componentDidMount的时候执行一次，就可以写一个空的数组（称为“跳过effect"）
3、回调函数的返回值
useEffect的回调函数允许返回一个函数，用来清理副作用
默认情况下（useEffect不写第二个参数），只会在组件卸载(componentWillUnmount)的时候执行这个返回的函数
如果useEffect多次执行，在调用一个新的effect之前会对前一个effect进行清理
例子：我们想要订阅this.props.friend.id的变化：
useEffect(() => {
// ...
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
可能产生的动作序列如下：
// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // 运行第一个 effect
// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // 运行下一个 effect
// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // 运行下一个 effect
// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect
需求分析
- 动态地、实时地显示倒计时的时间
- 倒计时结束后，自动跳转到另外一个页面
代码实现
首先我们需要一个counter状态，表示 正在倒数的时间
还有一个timerID状态，用来保存计时器的ID
其次，当页面挂载完成的时候，需要创建一个计时器，待1s后执行count-1的操作
然后清理上一个计时器，并再次创建计时器，1s后执行count-1的操作...
我们可以利用useEffect的特性来实现这个功能：
const [timerID, setTimerID] = useState(null);
const [counter, setCounter] = useState(5);
useEffect(() => {
if(counter > 0){
let timer = setTimeout(() => {
setCounter(counter-1)
}, 1000);
setTimerID(timer)
}else{
props.history.push('/order')
}
return () => {
setTimerID(null)
}
},[counter]);
页面挂载完成时：counter = 5，执行回调函数，保存计时器ID
1s后，执行计时器，count = 4
useEffect发现count更新，先清理副作用（setTimerID(null)），再新建计时器
1s后，执行计时器，count = 3
...如此循环直到count = 0 时，利用react-router做页面的跳转
完整代码如下：
import React, {useState,useEffect} from 'react'
function Reminder(props) {
const [timerID, setTimerID] = useState(null);
const [counter, setCounter] = useState(5);
useEffect(() => {
if(counter > 0){
let timer = setTimeout(() => {
setCounter(counter-1)
}, 1000);
setTimerID(timer)
}else{
props.history.push('/order')
}
return () => {
setTimerID(null)
}
},[counter]);
return (
<div>
<p>{counter}秒后将自动跳转至订单页面...</p>
</div>
);
}
export default Reminder
