为什么在反应的“useState”钩子中一遍又一遍地设置初始状态

Question

我创建了一个函数，它正在侦听 resize 事件，它检查窗口宽度并更新我的 IsMobile 变量 if(width

代码如下：

import React, { useEffect, useState } from 'react';

export interface MechnicalLiftProps {
}

const MechnicalLift: React.SFC<MechnicalLiftProps> = () => {

    const [IsMobile, setIsMobile] = useState(true)

    const handleWindowChange = () => {

        console.log('window inner width', window.innerWidth);
        console.log('is mobile in handle', IsMobile);

        if (window.innerWidth <= 600 && IsMobile === false) {
            setIsMobile(true);
            console.log('is mobile set to true');
        }

        if (window.innerWidth > 600 && IsMobile === true) {
            setIsMobile(false);
            console.log('is mobile set to false');
        }

    }

    useEffect(() => {
        console.log('mount running');
        window.addEventListener('resize', handleWindowChange)
        handleWindowChange()
        return () => {
            window.removeEventListener('resize', handleWindowChange)
        }
    }, [])

    useEffect(() => {
        console.log('is this mobile ', IsMobile);
    }, [IsMobile])

    return (
        <div>

        </div>
    );
}

export default MechnicalLift;

我的控制台输出：

我觉得每次重新渲染组件时都会设置初始状态，否则为什么每次处理窗口更改时 IsMobile 都设置为 true，即使它多次设置为 false。 Hooks 新手请尽可能详细说明您的解释

Answer 1

由于useEffect 上的空数组，您在第一次渲染时只设置了一次事件侦听器。您创建的函数在第一次渲染中引用了IsMobile，它的值是true。它的价值永远不会改变。

如果需要知道状态的最新值，可以使用set state的回调版本：

const handleWindowChange = () => {
  setIsMobile(prev => {
    console.log('previous value', prev);
    if (window.innerWidth <= 600 && prev === false) {
      return true;
    }
    if (window.innerWidth > 600 && prev === true) {
      return false;
    }
    return prev;
  });
});

顺便说一句，如果值没有改变，设置状态将不会重新呈现，因此您无需防范将其设置为已有的值。换句话说，如果您不需要日志记录，那么您的代码可以简化为：

const handleWindowChange = () => {
  setIsMobile(window.innerWidth <= 600);
}