如何让 useEffect 只在组件挂载上运行一次而不对 React 撒谎？

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>
    )
}

由于[]作为依赖数组传递，因此阻止了重新渲染。 代码运行良好，没有错误。 'You clicked 0 times'只显示一次，点击按钮什么都不做，符合'只在组件挂载上运行一次'的目的。

然而，这是对 React 的欺骗，并且在 Dan Abramov 的文章中不推荐。 我应该将依赖项传递给依赖项数组，当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 挂钩只会被触发一次。