每当组件在 ReactJS 中更新时如何添加 CSS 类？

在 React 中，可以通过 className 属性为组件添加 CSS 类。如果需要在组件更新时根据某些条件添加或移除某个 CSS 类，可以在 render 函数中根据条件动态生成 className 属性值。

以下是一个示例：

import React, { useState } from "react";
import "./styles.css";

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  const evenOrOdd = count % 2 === 0 ? "even" : "odd";

  return (
    <div className={`counter ${evenOrOdd}`}>
      <p>{count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

在上面的示例中，我们使用了 useState 钩子来为计数器组件添加状态。在 render 函数中，我们根据 count 状态的奇偶性动态生成了 even 或 odd CSS 类，并将它们与 counter 类组合在一起，作为 className 属性的值。这样，在每次组件更新时，都会根据 count 状态的奇偶性自动添加或移除相应的 CSS 类。

另外，如果需要在组件的 componentDidUpdate 周期钩子函数中手动添加或移除某个 CSS 类，可以使用 className 属性和组件的 ref 引用。

以下是一个示例：

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

function Countdown(props) {
  const { seconds } = props;
  const [count, setCount] = useState(seconds);
  const intervalIdRef = useRef(null);

  useEffect(() => {
    intervalIdRef.current = setInterval(() => {
      setCount(count => count - 1);
    }, 1000);

    return () => {
      clearInterval(intervalIdRef.current);
    };
  }, []);

  useEffect(() => {
    if (count === 0) {
      clearInterval(intervalIdRef.current);
    }
  }, [count]);

  const countdownClass = count <= 5 ? "countdown warning" : "countdown";

  return (
    <div className={countdownClass} ref={props.innerRef}>
      {count}
    </div>
  );
}

export default function App() {
  const countdownRef = useRef(null);

  function handleClick() {
    countdownRef.current.classList.toggle("paused");
  }

  return (
    <div className="App">
      <Countdown seconds={10} innerRef={countdownRef} />
      <button onClick={handleClick}>Pause</button>
    </div>
  );
}

在上面的示例中，我们创建了一个倒计时组件 Countdown，并在组件初始化时使用 useEffect 钩子函数来启动计时器。在 render 函数中，我们根据倒计时的剩余时间动态生成 countdown 或 countdown warning CSS 类，并将它们作为 className 属性的值。我们还通过 ref 属性将组件的引用传递给父组件，这样就可以在父组件中使用组件的引用来手动添加或移除某个 CSS 类。

在父组件的 render 函数中，我们定义了一个按钮，并在点击时通过组件的引用获取到组件元素的 DOM 对象。然后，我们使用 classList 属性来手动添加或移除 paused CSS 类，从而实现暂停倒计时的效果。

总结：在 React 中，可以通过动态生成 className 属性值或手动操作组件元素的 DOM 对象来实现在组件更新时添加或移除 CSS 类的效果。