在调用下一行之前，setState或调度（useReduer钩子）是否会重新渲染组件？

Question

在使用useState和useReducer钩子时，我意识到一个问题，即更新状态函数（setState，dispatch）之后的任何代码行都将在下一次重新呈现时被调用（更新之前的状态）。这意味着更新状态函数会导致立即重新渲染，而不是等待整个函数执行。

const [aaa, setAAA] = useState<boolean>(false);

const updateMyBiddingList = async (atDate?: string) => {
    try {
      console.log('step 0');
      const result = await getBiddingCartFromService(atDate ? atDate : myBiddingListState.myBiddingList[0].updatedAt);
      if (result.responseCode.toString().startsWith('2')) {
        setAAA(true);
        console.log('step 1');
      }
      console.log('step 2 ', aaa);
    }
    catch (err) {
      if (timeOut.current) clearTimeout(timeOut.current);
      timeOut.current = setTimeout(() => updateMyBiddingList(), TIMEOUT);
    }
  }

console.log('Component is re-rendering... ', aaa);

return ...

上述代码将按以下顺序记录：

• 步骤0
• 组件正在重新渲染... true
• 步骤1
• 步骤2真

有人给我解释更新状态挂钩的工作流程吗？先谢谢你。

Answer 1

这是由于javascript的异步逻辑造成的。我认为您在渲染阶段的某个地方调用了updateMyBiddingList函数，javascript启动了它的进程，并且因为它是异步的，所以react不会等待它完成。这将导致您的应用程序在发出异步请求时冻结。

Answer 2

这是因为React不依赖于那样的异步任务，有两种方法可以模拟您想要的结果。一个我称之为标准版，另一个是不稳定版。

第一种方法是将更新包装在unstable\u batchedUpdate回调中。顾名思义，此API将在一次对账过程中批量更新，从而减少组件渲染。

所以更新后的代码会是这样的：

import { unstable_batchedUpdates } from "react-dom";



const updateMyBiddingList = async (atDate?: string) => {
    try {
      console.log('step 0');
      const result = await getBiddingCartFromService(atDate ? atDate : myBiddingListState.myBiddingList[0].updatedAt);
      
      // Add unstable API where you cause re-render ⭐
      unstable_batchedUpdates(() => {
        if (result.responseCode.toString().startsWith('2')) {
          setAAA(true);
          console.log('step 1');
        }
        console.log('step 2 ', aaa);
      })
    }
    catch (err) {
      if (timeOut.current) clearTimeout(timeOut.current);
      timeOut.current = setTimeout(() => updateMyBiddingList(), TIMEOUT);
    }
  }

这会将日志的顺序更改为

Component is re-rendering...  false
step 0 
step 1 
step 2  false
Component is re-rendering...  true

您可以在下面的代码沙盒中看到使用JSON占位符中的假数据运行的代码。

这不是你想做什么就做什么的唯一模式，但对我来说似乎更像：）

• 您正在请求（异步操作）
• 您希望更改将导致重新渲染的组件的状态

此阶段还将更改下一次渲染的函数定义

• 你想重新获取失败

我坚持使用您的实现，并且不想将use效应部分拆分为微小的可重用部分，尽管这可能是您需要考虑的事情。

解决方案是将逻辑移动到它所属的位置，这意味着您将在dom树中调用该函数调用的位置。

// instead of aaa and setAAA :)
const [updated, setUpdated] = useState<boolean>(false)
const [hasError, setHasError] = useState<boolean>(false)
const timeOut = useRef<number>() 

useEffect(() => {
  const updateMyBiddingList = async (atDate?: string) => {
     try {
      console.log('step 0');
      const result = await getBiddingCartFromService(atDate ? atDate : myBiddingListState.myBiddingList[0].updatedAt);
      setHasError(false)
      if (result.responseCode.toString().startsWith('2')) {
        setUpdated(true);
        console.log('step 1');
      }
      console.log('step 2 ', updated);
    }
    catch (err) {
      setHasError(true)
      if (timeOut.current) clearTimeout(timeOut.current);
      timeOut.current = setTimeout(() => updateMyBiddingList(), TIMEOUT);
    }
  }
  if (!updated || hasError) updateMyBiddingList()

// timeOut.current can also be added here but it is not recommended
}, [updated, hasError])