React hook 问题：为什么这段代码正好渲染了 3 次？

问题描述

// why is this rendering 3 times and not 2 or 4?

import React,{ useState,useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function useVariantActive(variant) {
  const [isActive,setIsActive] = useState(false);
  useEffect(() => {
    setIsActive(true);
    setTimeout(() => {
      setIsActive(true);
    },1000);
  },[variant]);

  return isActive;
}

function ExampleComponent() {
  const varians = ["variant1"];
  const var1 = useVariantActive(varians);
  console.log("render",var1);
  return <div>wakka</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ExampleComponent />,rootElement);

我想这会渲染两次，但实际上渲染了 3 次，如果我像这样在 setIsActiveTrue 周围添加一个保护..

if (isActive !=== true) {
   setIsActive(true)
}

它渲染两次，随后的 setActive true 不会触发另一个渲染。什么给？

https://codesandbox.io/s/react-hooks-usestate-forked-crtxl

解决方法

因为您在 setState 中使用了 useEffect，这会导致额外的渲染。

见：useMemo vs. useEffect + useState