React Hook UseEffect 与 className

Question

是否无法在重新渲染时更新 classNames？

const [selected, setSelectedState] = useState(true);

let className = "none";
useEffect(() => {
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );


return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

className控制台中显示正确，但是当 div 重新渲染时（我看到这是因为随机数更新），className 保持为“none”。我也很困惑，因为我认为 useEffect 也会立即运行..所以它首先不应该是“无”，因为它应该立即被覆盖？

Answer 1

要添加有关 @MarkoCen 答案的更多详细信息（这是正确的），使用钩子时需要了解一些事情：

• useEffect每次渲染后运行。

• 在每次渲染时，组件都会在钩子定义之后从头开始重新执行。给定您的代码（我添加了注释来标识每个周期）

const [selected, setSelectedState] = useState(true); // 0

let className = "none"; // 1

useEffect(() => { 
    // 3
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );

// 2
return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

以下是按顺序排列的周期：

第一次渲染：

• 0：使用状态

• 1：类名=无

• 2：使用 className = none 进行渲染

• 3：使用效果

重新渲染：

• 1：类名=无

• 2：使用 className = none 重新渲染

• 3：使用效果

正如您所看到的，每次渲染都设置className为“无”，因此您永远不会得到您所期望的结果。