React自定义Hook与useEffect调用顺序问题及Hook执行机制咨询

背景代码 #

可正常运行的Body组件片段 #

const [allrestro, setallrestro] = useState([]);
const [filteredrestaurant, setfilteredrestaurant] = useState([]);

const search = useState("");
[searchValue, setsearchValue] = search;

useEffect(() => {
  const getRestaurants = async () => {
    const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
    const json = await data.json();

    setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
    setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
    setTimeout(() => {}, 10000);
  }
  getRestaurants();
}, []);

const isOnline = useOnline();
if (!isOnline) {
  return <h1>You are offline</h1>
}

调整后无法运行的Body组件 #

const Body = () => {
  const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;

  const isOnline = useOnline();
  
  if (!isOnline) {
    return <h1>You are offline</h1>
  }

  useEffect(() => {
    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {}, 10000);
    }
    getRestaurants();
  }, []);
}

自定义useOnline Hook #

import { useState, useEffect } from "react";

const useOnline = () => {
  const [state, usestate] = useState(true);
  
  console.log("outside component component")
  useEffect(() => {
    console.log("outside component");
    window.addEventListener("online", () => { usestate(true) });
    window.addEventListener("offline", () => { usestate(false) });
    setTimeout(() => {
      console.log("useOnline useffect")
    }, 5000);
  }, [])
  
  return state;
}
export default useOnline;

问题解答 #

1. 将useOnline调用放在useEffect之前是否存在问题？ #

把useOnline放在useEffect之前本身不违反Hook规则，但你调整后的代码无法运行的核心原因是：useEffect被放在了条件return之后。

当isOnline为false时，组件提前返回，导致useEffect不会被调用；而当isOnline为true时，useEffect会正常执行。这就导致不同渲染周期中，Hook的调用数量和顺序不一致——React依赖Hook的固定调用顺序来追踪状态，这种条件性跳过Hook调用的行为直接违反了Hook规则，所以组件会报错无法运行。

正确的做法是：所有Hook（包括useEffect）都必须在组件的顶层调用，不能放在条件判断、return语句之后。

2. 当自定义Hook内部也使用useEffect时，useEffect的调用逻辑是怎样的？ #

自定义Hook内部的useEffect完全属于调用它的组件，执行逻辑和直接写在组件里的useEffect一致：

• 挂载阶段：组件内所有useEffect（包括自定义Hook中的）会在DOM更新后按调用顺序执行；
• 更新阶段：只有依赖项发生变化的useEffect会重新执行；
• 卸载阶段：对应的清理函数会被触发执行。

比如你的useOnline中的useEffect，会在Body组件挂载时，和组件内其他useEffect（如果有的话）按调用顺序依次执行。

3. 组件内存在多个Hook时，Hook的调用规则是什么？ #

必须严格遵守两条核心规则：

• 只能在组件顶层调用：不能在条件语句、循环、嵌套函数、return语句之后调用Hook，确保每次渲染时Hook的调用顺序完全一致；
• 只能在React函数组件或自定义Hook中调用：不能在普通JavaScript函数里使用Hook。

React靠Hook的调用顺序来关联状态和组件，一旦顺序被打破，就会出现状态追踪错误。

4. 自定义Hook的生命周期是独立的，还是绑定到调用它的组件？ #

自定义Hook没有独立的生命周期，完全绑定到调用它的组件：

• 组件挂载时，自定义Hook内部的useState、useEffect等Hook会被初始化；
• 组件更新时，自定义Hook会随组件一起重新执行，内部Hook也会按规则更新状态、执行Effect；
• 组件卸载时，自定义Hook内部的Effect清理函数会执行，内部状态也会被销毁。

自定义Hook本质是组件Hook逻辑的复用，它的生命周期完全依附于调用它的组件。

内容的提问来源于stack exchange，提问作者K.Chetan Kumar