React Hooks：为什么我有这个 output？

Question

我正在研究 React 钩子，但我无法理解为什么我在控制台中得到了这个 output。 有心人可以详细解释一下“运行执行”哦，这些钩子？

import { useState, useEffect } from "react";
function Homepage() {
  const [state, setState] = useState();
  useEffect(() => {
    console.log("useEffect");
    console.log("useEffect not executed");
    setState("hello")
  }, []);
  if (!state) {
    console.log("state not defined");
    return <div>State undefined</div>;
  }
  return <div>ciao</div>;
}
export default Homepage;

控制台 output：state 未定义 state 未定义 useEffect useEffect 未执行 useEffect useEffect 未执行

Answer 1

基本上，它是React.StrictMode双重调用 function 主体的组合，以帮助您检测意外的副作用

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。 这是通过有意双重调用以下函数来完成的：

• Class 组件constructor 、 render和shouldComponentUpdate方法
• Class 组件 static getDerivedStateFromProps方法
• Function 组件体<--这个
• State 更新函数（ setState的第一个参数）
• 传递给useState 、 useMemo或useReducer的函数

重新安装组件以确保可重复使用 state

为了帮助解决这些问题，React 18 为严格模式引入了一个新的仅限开发的检查。 每当第一次安装组件时，此新检查将自动卸载并重新安装每个组件，在第二次安装时恢复以前的 state。

并在渲染周期结束时调用useEffect挂钩。

function Homepage() {
  const [state, setState] = useState();

  useEffect(() => {
    console.log("useEffect"); // logs second as expected side-effect
    console.log("useEffect not executed");
    setState("hello");
  }, []);

  if (!state) {
    console.log("state not defined"); // logs first as unintentional side-effect
    return <div>State undefined</div>;
  }

  return <div>ciao</div>;
}

...

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import Homepage from "./Homepage";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Homepage />
  </StrictMode>
);

解释日志

控制台 output：

state not defined      // <-- initial render
state not defined      // <-- double invocation of function body
useEffect              // <-- effect at end of initial render
useEffect not executed // <-- effect at end of initial render

...卸载/安装

useEffect              // <-- effect at end of render
useEffect not executed // <-- effect at end of render

Answer 2

useEffect在页面呈现时运行，并且其他函数在useEffect之前执行，因此您的代码首先运行if (!state)然后运行useEffect并且 state 设置为“hello”； 这是一个完全理解 useEffect 钩子的链接： useEffect ; 祝你好运;

Answer 3

你的 if 语句在 useEffect 之前运行，即使它在它之后，你需要将两个 div 都放在 return 中并删除 if

   return (
     {!state ? <div>State undefined</div> : <div>ciao</div>}
   )

Answer 4

1. state not defined组件主页的首次渲染
2. state not defined第二次渲染
3. useEffect useEffect not executed你的组件被挂载，所以 useEffect 钩子被触发。
4. useEffect useEffect not executed您的组件使用 state 重新渲染hello ，useEffect 钩子再次触发

实际上，useEffect 挂钩至少会在您的依赖项数组之后运行。 在这里设置[]以便在组件挂载时运行 useEffect 挂钩，但有时仍可以触发它。