reactjs - useEffect 冲突？

我觉得我经常遇到这个问题。

当将 useEffect 链接起来以在状态更改后触发时，我发现链中的某些 useEffect 具有重叠的依赖项，这会导致它们同时被触发，而不是在其中一个设置状态后按顺序触发。

示例：当 chapterIndex 更新时，我正在触发一系列 useEffect。

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
    setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
    if (chapterIndex !== null) {
        const {
            current: chapter = null
        } = chapterRefs.current[chapterIndex];
            
        if (textTransitioning === 'in') {
            chapter?.classList.add('in');
        }
    }
}, [textTransitioning, chapterIndex])

当 chapterIndex 变化时，我如何防止两个都运行？我只希望在第一个 useEffect 设置为 textTransitioning 之后第二个 useEffect 才运行。当从依赖数组中移除 chapterIndex 时，我收到错误：‘React Hook useEffect 缺少依赖项：‘chapterIndex’。要么将其包括在内，要么移除依赖数组。’

答案＃1

你需要在第二个 useEffect 中从数组中移除“chapterIndex”。这样，当第一个 useEffect 运行时，它会更新“textTransitioning”，这将导致第二个 useEffect 被触发。

有关 useEffect 的更多有条件执行，你可以参考 https://reactjs.org/docs/hooks-effect.html

答案＃2

useEffect 接受两个参数。第一个是要调用的函数，第二个是一个叫做依赖数组的变量数组。第二个参数用于在数组中的某个变量发生变化时触发 useEffect。所以，如果你不希望 useEffect 在某个特定变量变化时被调用，就不要将它传入依赖数组。你的代码应该像这样：

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
      setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
 if (chapterIndex !== null) {
     const {
         current: chapter = null
     } = chapterRefs.current[chapterIndex];
         
     if (textTransitioning === 'in') {
         chapter?.classList.add('in');
     }
 }
}, [textTransitioning]

我认为让一个 useEffect 触发另一个并不是很高效，但也许我没有看到整个情况