反應鈎子幾次調用和 setState 其他值

Question

我對這種現象很好奇。 我使用 useEffect serveral time 和 setState 其他值。 但它只在控制台上拍攝了兩次。 useEffect 多次調用，但在控制台上只有兩次。 誰知道為什么，請幫忙。。

import { useEffect, useState } from 'react';

function Test() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(prev => prev + 1)
  }, [])

  useEffect(() => {
    setValue(prev => prev -1)
  }, [])

  useEffect(() => {
    setValue(prev => 0)
  }, [])

  useEffect(() => {
    setValue(prev => prev + 1)
  }, [])

  console.log('render', value)
  return(
    <div>promise</div>
  )
}
export default Test;

Answer 1

當setState同步觸發時（如您的示例中所示），React 批處理 state 更新並減少組件重新渲染的數量。

您的組件最初使用value=0渲染，然后使用value=1渲染，因為上述所有設置 state 都被批處理到一個更新中。

我挑戰你用setTimeout(..., 0)包裝每個setValue並看看會發生什么。

Answer 2

嘗試以下修改后的代碼並查看控制台....

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

let r = 0;
export default function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    console.log("incrementing");
    setValue((prev) => prev + 1);
  }, []);

  useEffect(() => {
    console.log("decrementing");
    setValue((prev) => prev - 1);
  }, []);

  useEffect(() => {
    console.log("initailze");
    setValue((prev) => 0);
  }, []);

  useEffect(() => {
    console.log("again incrementing");
    setValue((prev) => prev + 1);
  }, []);

  console.log("render", value);

  return <div>promise</div>;
}

你可能會看到...

render 0

incrementing 

decrementing 

initailze

again incrementing

render 1

現在讓我解釋一下這里發生了什么。 當您的應用第一次渲染時，它會記錄效果

渲染 0

現在所有四個 useEffects 都一個接一個地運行

遞增

遞減

初始化

再次遞增

並記住事件處理程序中的 setState(in your case setValue) function 和 useEffect 掛鈎異步運行，因此將所有更新批處理為一個以提高性能。 這就是為什么在記錄您的最終 state 值時，您不會獲得四個連續的渲染，而是只獲得一個渲染

渲染 1