为什么我的 React 组件会自动重新渲染？

Question

我有一个简单的 React 组件，当我检查控制台时，我记录的内容出现了 3 次。

Load APP日志来自我的主App.js组件， Load New来自App.js的导航呈现的组件： FasList.js 。

为什么我在组件中只记录一次时会看到 3 个日志？

我使用useEffect的日志进行了第二次测试：

这是App.hjs的代码：

    console.log('APP');
    
    useEffect(() => {
        fetchAuthStatus();
        console.log("I'm in useEffect");
    }, []);

重复的日志输出是否与 React 的工作方式有关？

根据第二次测试，该组件只渲染了1次但仍然是3个APP日志

这是我的 2 个组件问题的一个工作示例： https : //stackblitz.com/edit/logs-output-demo

Answer 1

每次渲染组件时，组件函数的主体都会运行。 你的组件在 React 认为有必要的任何时候都会被渲染，但通常在最初添加到页面时渲染一次，然后在其状态改变时再次渲染。 （同时进行的多个状态更改通常只会导致一次渲染，但如果它们之间存在任何间隙，则每次渲染都会发生。）

useEffect钩子回调中的代码在第一次渲染后运行，然后在您列出的依赖项中的任何一个更改时再次运行。 由于您的代码未列出任何依赖项，因此挂钩回调仅运行一次。

这是一个简单的例子：

 const {useState, useEffect} = React; const Example = () => { const [counter, setCounter] = useState(0); const [flag, setFlag] = useState(false); // Runs after initial render, then again every time `flag` changes useEffect(() => { console.log(`useEffect #1 ran, flag = ${flag}`); }, [flag]); // Runs after initial render, then every time `flag` or // `counter` changes useEffect(() => { console.log(`useEffect #2 ran, flag = ${flag}, counter = ${counter}`); }, [flag, counter]); // Runs after initial render only useEffect(() => { console.log(`useEffect #3 ran`); }, []); return ( <div> <input type="button" value="Increment" onClick={() => setCounter(c => c + 1)} /> <input type="button" value="Flip Flag" onClick={() => setFlag(f => !f)} /> </div> ); }; ReactDOM.render(<Example />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

您可能会发现Dan Abramov 的这篇文章很有用。 在解释useEffect的上下文中，它深入介绍了 React 如何渲染（但它是一个有用的阅读，甚至与理解useEffect分开）。

Answer 2

您正在使用fetchAuthStatus()方法更改状态 1 次，因此会发生重新渲染。 这并不意味着 DOM 被更改了两次。 我认为你的代码是有效的。