组件渲染两次吗？这是代码沙盒问题吗？

Question

以下是我的简单反应应用程序：

let idCounter = 0;

export default function App() {
  const id = useMemo(() => {
    console.log("useMemo");
    return idCounter++;
  }, []);

  console.log("render", id);

  useEffect(() => {
    console.log("useEffect", id);
  });

  return id;
}

https://codesandbox.io/s/morning-bush-swky8

这是控制台输出：

useMemo
render 0
useEffect 1

为什么在用效应id等于1？

看起来组件已经呈现了两次，但是为什么第二次没有调用useMemo和useEffect呢？我是怎么变成1的？

Answer 1

从React Docs-严格模式：

从React 17开始，React自动修改控制台方法，如console。log（）以在对生命周期函数的第二次调用中使日志静音。但是，在可以使用变通方法的某些情况下，它可能会导致不期望的行为。

组件确实渲染了两次，但在由StrictMode引起的第二次重新渲染期间，React会隐藏日志语句。

如果删除StrictMode，您将获得预期的输出。

另一个选项是在控制台对象上使用不同的方法进行日志记录，例如console.dir。

let idCounter = 0;

function App() {
  const id = React.useMemo(() => {
    console.dir("useMemo");
    return idCounter++;
  }, []);

  console.dir("render");
  console.dir(id);

  React.useEffect(() => {
    console.log("useEffect", id);
  });

  return id;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>

<div id="root"></div>