Question

我遇到了这个简单的React功能组件，它会渲染四次，而我希望它最初会渲染一次，执行useEffect来更新状态并因此再次渲染。相反，控制台发送4个日志输出，表明它渲染了四次。知道为什么以及在反应功能组件的基本生命周期上有任何资源吗？

const { useState, useEffect } = React;

function App() {
  const [jobs, setJobs] = useState([]);

  useEffect(() => setJobs(["test"]), []);

  console.log("APP", jobs);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{jobs}</div>
    </div>
  );
}

ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
    document.getElementById("root")
);

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

https://codesandbox.io/s/solitary-tree-t120d?file=/src/App.js:149-191

Answer 1

之所以会这样，是因为您在代码和框中使用<React.StrictMode>来包装<App />。

文档特别声明（https://reactjs.org/docs/strict-mode.html）：

严格模式无法自动为您检测副作用，但可以通过使其更具确定性来帮助您发现它们。这是通过有意重复调用以下功能来完成的：

类组件constructor， render 和shouldComponentUpdate方法
....

功能组件渲染四次-为什么不渲染两次？

1 个答案: