最近在慢慢由class component转用function component代替，写法清爽了很多，不过带来的问题也有点多。。。

问题

首先让我们使用function component实现一个倒计时功能

import React, {useEffect, useState} from 'react';
import { Button } from 'antd-mobile';

let ClearTimer = null;

const Test = ()=>{

    const [seconds, setSeconds] = useState(10);

    useEffect(()=>{
        ClearTimer = setInterval(countDown, 1000);

        return clearUp;
    }, []);

    const clearUp = ()=>{
        clearInterval(ClearTimer);
    };

    const countDown = ()=>{
        let num = seconds - 1;
        if(num < 1){
            clearInterval(ClearTimer);
        }
        setSeconds(num);
    };

    return (
        <div>
            <Button>剩余时间{seconds}s</Button>
        </div>
    )
};

export default Test;

代码很简单，利用setInterval逐秒递减。实际跑起来后，会发现 根本没有递减！！！一直卡在9s不动。

原因

究其原因，还是seconds取值的问题。countDown是个闭包传入setInterval，其中seconds的值，在传入的时候就已经决定了，不会再取当前值，所以每次执行countDown函数seconds的值都是10。

解决办法

1. setState传入函数参数

更改countDown的写法，setSeconds不直接传入数值，而是传入一个callback

const countDown = ()=>{
        setSeconds((pre)=>{
            console.log('pre = ', pre);
            let num = pre - 1;
            if(num <= 0){
                clearInterval(ClearTimer);
            }

            return num;
        });
    };

callback的参数，为当前的seconds值，而不再是闭包里的值，此时计算结果已经是正确了。

2. 利用useEffect及setTimer实现（不推荐，容易影响其他逻辑）

首先修改useEffect，让其依赖seconds进行刷新，setInterval替换成setTimeout

useEffect(()=>{
        ClearTimer = setTimeout(countDown, 1000);

        return clearUp;
    }, [seconds]);

再简单改下countDown，只要调用setSeconds就行

const countDown = ()=>{
        seconds > 0 && setSeconds(seconds - 1);
    };

更改后，每次setSeconds都会引起useEffect函数的刷新动作，从而重新生成一个新Timer，保证了闭包内seconds的值始终是最新的

总结

由闭包引起的变量值没更新的问题，在class component中比较少见，而在function component中一不注意就会踏入陷阱。在需要根据当前state值计算下一个state时，尽量传入setState的函数参数，使用其参数state来进行计算，避免受其他环境的影响，比如闭包、别处的引用修改。
注意：使用useReducer虽能解决数值更新的问题，却也无法解决闭包值的问题。