如何让useEffect在组件挂载时只运行一次而不影响反应？

Question

如果我希望useEffect在组件挂载时只运行一次，那么正确的方法是什么？检查以下示例：

const UseEffectCounter1 = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, []);
    return (
        <div>
            <button onClick={() => {setCount(count + 1)}}>+1</button>
        </div>
    )
}

由于[]作为依赖项数组传递，因此会阻止重新呈现。代码运行正常，没有错误。“你点击了0次”只显示一次，点击按钮什么也不做，这符合“在组件挂载上只运行一次”的目的。

然而，这是说谎的反应，不建议在丹·阿布拉莫夫的文章here中。我应该将依赖项传递给依赖项数组，该数组被警告为React Hook useEffect has a missing dependency: 'count'。但是，如果我在依赖项数组中传递[count]，useEffect会在组件挂载后开始更新。

让useEffect只在组件挂载时更新的正确方法是什么？

Answer 1

正如评论中提到的，如果您不打算每次更改计数时都更新标题，那么让useEffect钩子依赖于count是没有意义的。代码可能是：

const UseEffectCounter1 = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = 'You clicked 0 times';
    }, []);
    return (
        <div>
            <button onClick={() => {setCount(count + 1)}}>+1</button>
        </div>
    )
}

无论如何，如果你真的想要避免硬编码的值，你可以这样做：

const UseEffectCounter1 = () => {
    const initCount = 0;
    const [count, setCount] = useState(initCount);
    useEffect(() => {
        document.title = `You clicked ${initCount} times`;
    }, [initCount]);
    return (
        <div>
            <button onClick={() => {setCount(count + 1)}}>+1</button>
        </div>
    )
}

因为initCount永远不会改变，所以useEffect钩子只会被触发一次。