无法在 React 钩子 useEffect 和 setTimeout 更新中一起更新父值

Question

我有两个组件，parentComponent 和 ChildrenComponent。当我单击该按钮时，它将呈现handleClick 方法以更新ChildrenComponent 中的childrenValue。在ChildrenComponent 内部，我使用useEffect 来观察childrenValue 的变化。

当我在useEffect 内部有一个计时器时，而不是在ParentComponent 上重新渲染一次，为什么每次父组件值更改时都会渲染它？

父组件：

import React, { useState } from "react";
import { ChildrenComponent } from "./ChildrenComponent";

export const ParentComponent = () => {
  const [test1, setTest1] = useState(false);
  const [test2, setTest2] = useState(false);
  const [test3, setTest3] = useState(false);

  console.log("ParentComponent render", test1, test2, test3);

  const handleChangeParentValue = () => {
    setTest1(true);
    setTest2(true);
    setTest3(true);
  };

  return (
    <>
      <ChildrenComponent handleChangeParentValue={handleChangeParentValue} />
    </>
  );
};

子组件：

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

export const ChildrenComponent = (props) => {
  const { handleChangeParentValue } = props;
  const [childrenValue, setChildrenValue] = useState(false);

  useEffect(() => {
    if (childrenValue) {
      // handleChangeParentValue(); 
      // if I use handleChangeParentValue() instead of a timer, 
      // the parent component only render once with three true value: 
      // ParentComponent render true true true
      const timerSuccess = setTimeout(() => {
        handleChangeParentValue();
      }, 1000);
      return () => {
        clearTimeout(timerSuccess);
      };
    }
  }, [childrenValue]);

  const handleClick = () => {
    setChildrenValue((prev) => !prev);
  };
  return (
    <>
      <div>ChildrenComponent</div>
      <button onClick={handleClick}>CLick me</button>
    </>
  );
};

当我使用计时器时，每次 setTest 运行时父级都会渲染：

ParentComponent render true false false
ParentComponent render true true false
ParentComponent render true true true

为什么会这样？如果我想使用子组件上的计时器进行值延迟更新，但仍希望父组件渲染一次或一起而不是单独更新父值，我该怎么办？

Answer 1

更新（2021 年 7 月 15 日）

来自Automatic batching for fewer renders in React 18:

从带有 createRoot 的 React 18 开始，所有更新都将是 自动批处理，无论它们来自何处。

这意味着在超时、承诺、原生事件中更新 处理程序或任何其他事件将以与内部更新相同的方式进行批处理 反应事件。

---

您正在通过异步调用handleChangeParentValue 函数来防止将状态更新一起批处理。

当多个状态设置器函数被异步调用时，它们不会批处理在一起。这意味着每次调用 state setter 函数时父组件都会重新渲染。

您有 3 次调用 state setter 函数，因此每次调用父组件都会重新渲染，即 3 次。

调用handleChangeParentValue同步会导致多个状态更新批处理一起，导致父组件只重新渲染一次。

下面的演示展示了这种行为。

function App() {
  const [state1, setState1] = React.useState({});
  const [state2, setState2] = React.useState({});
  const [state3, setState3] = React.useState({});

  console.log("App component rendered");
  
  const asyncStateUpdate = () => {
    console.log("triggering state updates asynchronously not batched");
    
    setTimeout(() => {
      setState1({});
      setState2({});
      setState3({});
    }, 1000);
  };
  
  const syncStateUpdate = () => {
     console.log("triggering state updates synchronously - batched");
     setState1({});
     setState2({});
     setState3({});
  };
  
  return (
    <div>
      <button onClick={asyncStateUpdate}>Trigger State Update Asynchronously</button>
      <button onClick={syncStateUpdate}>Trigger State Update Synchronously</button>
    </div>
  );
}

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

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

注意：状态更新本身是异步的，但您必须同步触发状态更新才能将多个状态更新一起批处理。

解决方案

您可以将三个独立的状态组合成一个状态。因此，您只需调用一个状态设置器函数。这样父组件只会重新渲染一次，因为只有一个状态设置器函数调用。

更改以下内容

const [test1, setTest1] = useState(false);
const [test2, setTest2] = useState(false);
const [test3, setTest3] = useState(false);

到

const [state, setState] = useState({
  test1: false,
  test2: false,
  test3: false
});

并将handleChangeParentValue 函数中的三个状态设置器函数调用替换为一个状态设置器函数调用：

const handleChangeParentValue = () => {
   setState({
      test1: true,
      test2: true,
      test3: true
   });
};