React中onClick首次点击失效问题及底层原理咨询

核心原因 #

你遇到的问题根源是React中useState的状态更新是异步操作，并非同步执行：

• 调用setElem(true)时，React不会立刻修改elem的当前值，而是将这个更新请求加入到内部的更新队列中。
• 只有当当前函数执行完毕，组件进入下一次渲染周期时，React才会处理队列中的更新，把elem的值更新为true。
• 因此在首次点击的handleClick函数执行过程中，elem仍然是初始的false，if代码块自然不会执行。

解决方案（保留state的前提下） #

方案1：用useEffect监听状态变化处理DOM操作

利用useEffect监听elem的变化，每次状态更新后再执行DOM操作，确保使用的是最新状态：

import { useState, useEffect } from "react";

function myComponent() {
    const [elem, setElem] = useState(false);
    
    const handleClick = () => {
        setElem(prev => !prev); // 直接基于前一次状态取反，更适配切换场景
    }

    useEffect(() => {
        const item = document.getElementById('item');
        if (item) {
            item.classList.toggle('show');
            item.classList.toggle('hide');
        }
    }, [elem]); // 仅当elem变化时执行

    return (
        <>
            <button onClick={handleClick}>touch me</button>
            <div id="item" className="hide">需要切换的元素</div>
        </>
    );
}

export default myComponent;

方案2：先计算新状态再同步执行操作

在点击时先算出更新后的状态值，直接用这个值判断，不需要等待React的异步更新：

import { useState } from "react";

function myComponent() {
    const [elem, setElem] = useState(false);
    
    const handleClick = () => {
        const newState = !elem; // 提前计算出新状态
        setElem(newState);
        const item = document.getElementById('item');
        if (item) {
            item.classList.toggle('show');
            item.classList.toggle('hide');
        }
    }

    return (
        <>
            <button onClick={handleClick}>touch me</button>
            <div id="item" className="hide">需要切换的元素</div>
        </>
    );
}

export default myComponent;

更符合React规范的写法：用状态控制className

React不推荐直接操作DOM，更好的方式是通过状态直接控制元素的类名，彻底规避异步问题：

import { useState } from "react";

function myComponent() {
    const [isShow, setIsShow] = useState(false);
    
    const handleClick = () => {
        setIsShow(prev => !prev);
    }

    return (
        <>
            <button onClick={handleClick}>touch me</button>
            <div id="item" className={isShow ? 'show' : 'hide'}>需要切换的元素</div>
        </>
    );
}

export default myComponent;

内容的提问来源于stack exchange，提问作者mon