React 应该渲染多少时间

Question

我写了一个简单的 react 来测试 React 如何渲染：

    import ReactDOM from 'react-dom';
    import React, { useState, useEffect } from 'react';
    const App = (props) => {
      // State
      const [trackIndex, setTrackIndex] = useState(1);
      const [trackProgress, setTrackProgress] = useState(0);
      const clickHandler = () =>{
           setTrackIndex((trackIndex)=>trackIndex+1)
      }
 
      useEffect(() => {
        console.log("effect; trackIndex=",trackIndex)
        console.log("effect; trackProgress=",trackProgress)
        if(trackIndex<5){
          console.log("set trackProgress")
          setTrackProgress(trackIndex)
        }
      });
      console.log("render")
      return (
        <div>
          <p>{trackIndex}</p>
          <p>{trackProgress}</p>
          <button onClick={clickHandler}>Click me</button>
        </div>
      );
    };

ReactDOM.render(
      <App />,
  document.getElementById('root')
);

以下是控制台output：

render
effect; trackIndex= 1
effect; trackProgress= 0
set trackProgress
render
effect; trackIndex= 1
effect; trackProgress= 1
set trackProgress
render

在我单击按钮之前，React 似乎渲染了三次。 最后的渲染真的让我很困惑。 谁能向我解释为什么会发生这种渲染以及为什么渲染后没有效果？ 先感谢您

Answer 1

似乎您的setTrackProgress在组件的初始渲染上使用useEffect设置 state 。 这是因为trackIndex从1开始，低于 5。（通过if(trackIndex<5)看到）请注意，您没有将数组依赖项提供给useEffect作为第二个参数。 根据react-documentation ，这意味着效果只会在组件的第一次初始渲染后发生一次。

另外，我建议将useCallback添加到您的clickHandler中，以防止为每个渲染重新定义 function。 （根据反应文档）

Answer 2

你实际上是在做一个无限循环，但 React 可以拯救你。 第一个render日志是初始渲染，然后执行useEffect并且您的组件重新渲染，导致第二个render日志和第一个effect; ... effect; ...日志。 现在执行第二个useEffect 。 但是， trackIndex的值没有改变，因此您的 if 语句将评估 true 并使用相同的 state/value(1) 更新trackProgress 。 这导致另一个重新渲染和第三个log语句。 现在，您会认为将执行第三个useEffect ，但 React 足够聪明，可以知道 state 何时没有更改，因此不会执行useEffect 。

如上所述，将依赖项添加到您的useEffect中。 那会解决你的问题。

useEffect(
  ...
, [trackIndex])