3

我有一个简单的组件示例，用于useRef()计算我的组件渲染的次数，并useState()保持一些状态： 

const {useState, useRef} = React;
const App = () => {
  const [counter, setCounter] = useState(0);
  const renderCount = useRef(0);
  const onClick = () => {
    setCounter(1);
  }
  renderCount.current++;
  alert("rendering"); // executes 3 times, not twice.
  return <div>
    <p>Render count: {renderCount.current}</p>
    <button onClick={onClick}>{counter}</button>
  </div>
}

ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

当我运行上面的代码片段时，alert触发器和引用计数器由于第一次渲染而增加。当我第一次单击该按钮时，setCounter(1)会调用它，这会导致组件重新渲染/重新执行（如预期的那样），导致警报第二次出现并且参考计数器增加。当我第二次单击该按钮时，setCounter(1)将运行（它不会更新状态，因为它已经是1）。由于状态没有改变，我希望不需要重新渲染，所以我的App组件不会再次执行。但是，我反而看到了第三个警报，表明该组件再次执行，但是 ref 计数器没有增加，第二次单击后呈现的输出也没有改变。进一步单击该按钮不会按预期显示任何警报。我的问题是，当状态没有改变时（即：第二次单击按钮），为什么 React 会再次执行我的 App 组件？

4

2 回答 2

2

这是 React 重新渲染的渲染行为，这是一种特殊情况。如果你将 state 更新为与当前 state 相同的值，那么 React 会再次重新渲染组件并避免后续的重新渲染。

  • 第一次渲染是初始渲染，状态为0
  • 第二次渲染是为了状态改变state is 1
  • 第三次渲染用于特殊情况（这不是初始渲染）状态为 1

然而，这种不必要的重新渲染不是初始渲染的情况。我的意思是，如果您setCounter(0)在onClick方法中使用而不是，那么即使随后调用方法setCounter(1)，组件也只会呈现一次。onClick

流程如下图所示：

在此处输入图像描述

原因是; React 无法猜测渲染的输出不会改变，它必须再渲染一次，并将结果与​​之前的渲染进行比较。但我不确定它在初始状态下是如何处理的（可能是一个标志）。文档中没有太多关于它的信息。

您可能认为存在效率问题，但实际上没有。React 渲染周期有两个阶段：渲染阶段和提交阶段。DOM 在提交阶段后更新，在这种情况下，进程不会进入提交阶段，也不会引导 DOM 更新

于 2021-08-05T12:39:58.370 回答
0

您没有使用 React 的 hook useEffect()，这就是为什么您的函数（随时调用）将其称为本地作用域函数。把你的函数组件想象成一个字母。您将其传递给已关闭并签名的letterman。但是在您的情况下，您将它打开（在传输期间它被读取和调用）但已签名（它知道它将在哪里），因此您需要使用钩子/生命周期方法来控制您的 React 组件。

这就是您遇到警报和增量的原因。

如果您已经使用过 React 类组件，那么您应该知道它的生命周期是什么。如果没有，我鼓励你阅读这篇文章：React Lifecycles。

useEffect在和componentDidMount之间具有连接行为。每当您更新状态或道具时，都会调用此方法并执行给定的代码。componentDidUpdatecomponentWillUnmount

于 2021-08-05T12:00:41.387 回答