React useState 多次重新运行我的所有函数

Question

我正在学习 NextJs 和 React。 我发现了 React 的一个有趣的行为。

1. 每当我单击“单击我”按钮时，它就会改变状态，即

   test

   。
2. 然后再次执行完全不相关的代码

   someTest

   。

3. someTest

   有

   fetch

   ，每当

   test

   改变时，

   fetch

   就会被调用。 （我觉得这很奇怪。）
4. 我觉得这种行为可能会造成大量浪费。想象一下

   someTest

   有很多进程，例如多次获取和循环。我该如何预防？ （例如：当

   test

   更改时，

   someTest

   不应被执行）

// page.tsx
'use client';

import { someTest, } from "@/hooks/myHook";
import { useState } from "react";

export default function MyPage() {
  const notRelatedCode = someTest();
  const [test, setTest] = useState(false);

  console.log(1);
  
  return <>
    <div>
      <button onClick={() => {setTest(!test)}}>click me</button>
    </div>
  </>
}

// myHook.tsx
export const someTest = () => {
  fetch(...)
  console.log(0);
}

Answer 1

React 组件本质上是函数，鉴于您所说的只是预期的行为，该函数内部的内容，如变量（即：notRelatedCode），它会被重新评估。 state 不会发生这种情况，它在重新渲染之间保留。

我真的鼓励在深入研究 NextJS 之前完整阅读 https://react.dev/。

为了避免这种情况，你可以这样做：

export default function MyPage() {
  const [test, setTest] = useState(false);
    
  useEffect(() => {
    const fetchData = async () => {
      const notRelatedCode = await someTest();
    };

    fetchData();
  }, []);

  return (
    <div>
      <button onClick={(prevState) => { setTest(!prevState) }}>
        click me
      </button>
    </div>
  );
}

我们添加了一个效果，仅在第一次渲染时运行 someTest()，该行为由 useEffect 末尾的空依赖项数组给出。

一旦您了解了 React 的基础知识，您可能应该看看一个可以更轻松地处理查询的库，特别是在需要更复杂的行为时，例如处理加载状态、错误等。

即：

• Tanstack 查询（又名 React 查询）
• 驻波比