反应useState导致双重渲染

Question

考虑规范的useState示例：

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  console.log(count);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

单击按钮使每个状态打印两次。为什么呢？

Answer 1

const countRef = useRef(1);
countRef.current += 1;

这样，渲染将一次执行2次

const countRef = useRef(1);
useEffect(() => {
   countRef.current += 1;
})

这样，渲染将一次执行1次

Answer 2

关于双重重新渲染的更多信息（根据关闭的反应问题）。

这是StrictMode的一个有意的特性。这只发生在开发中，并有助于发现意外的副作用放入渲染阶段。我们只对带有钩子的组件这样做，因为这些组件更有可能在错误的地方意外产生副作用。

https://github.com/facebook/react/issues/15074

另一个相关问题在这里。

useState（）执行双重渲染

Answer 3

放置控制台。在一个没有依赖项的useffecthook中记录，您将看到它实际上不会呈现两次。

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  });
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

这是一个很好的组件生命周期图，它列出了基于类的生命周期函数，但呈现/提交阶段是相同的。

需要注意的重要一点是，组件可以“渲染”，而无需实际提交（即，您在屏幕上看到的常规渲染）。控制台。日志本身就是其中的一部分。效果在“提交”阶段之后运行。

使用效果

... 传递给useEffect的函数将在渲染提交到屏幕后运行。。。

默认情况下，效果在每次完成渲染后运行。。。

检测意外的副作用

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

• 类组件构造函数，呈现，以及应组件更新方法

这只适用于开发模式。