如何强制更新nextjs React组件？

Question

版本

• Next.js：14.0.3
• 反应：18.0.2

// TestClientComponent.tsx
"use client";
import { IResident } from "@interface/resident.types";
import { getResidents } from "@models/resident.service";
import { SolidButton } from "mds/desktop";
import React, { use, useEffect, useState } from "react";

const TestClientComponent = () => {
  const [, forceUpdate] = useState<number>(0);

  const limit = Math.floor(Math.random() * 20);
  const response = use(
    getResidents({
      offset: 0,
      limit: limit,
    })
  );

  return (
    <div>
      <h1>Test Client Component</h1>
      {response.data.map((resident: IResident) => {
        return <div key={resident.id}>{resident.name}</div>;
      })}
      <div>
        <SolidButton
          $inline
          $size="full"
          type="button"
          onClick={() => forceUpdate((n) => n + 1)}
        >
          업데이트
        </SolidButton>
      </div>
    </div>
  );
};

export default TestClientComponent;

// Main.tsx

// ...
            <Suspense
              fallback={Array.from({ length: 3 }, (_, index) => index).map(
                (_, index) => (
                  <Skeleton key={index} height="62px" spacing={4} />
                )
              )}
            >
              <TestClientComponent />
            </Suspense>
// ...

这是我当前正在使用的代码。当我单击 SolidButton 以利用 Suspense 时，我必须重新渲染组件。为此，我使用名为forceUpdate 的setState。当然它有效，但我不认为它有多棒。目前在这种环境下，有没有更好的方法可以强制重新渲染组件？

如果没有的话，我现在使用的方法对吗？

Answer 1

我很欣赏这个写得好的问题，我可以立即理解您遇到的问题。

为了回答你的问题，我必须澄清 React 的组件重新渲染只有 4 个可能的原因。

1. 状态变化。
2. 父级重新渲染（除非使用备忘录）阅读此处。
3. 上下文更改：当上下文中的任何状态发生更改时，React 将重新渲染订阅上下文的每个子级。
4. 挂钩发生变化。
5. 道具更改（呃，不是真的）：我们知道父组件负责更改当前组件的道具，为了实现这一点，父组件本身必须重新渲染，这让我们回到了无论当前组件的 props 如何，此列表中的第 2 号原因。

因此，使用这个原因列表，我认为您已经采取了最简单的方法来实现您的目标，即使它看起来“丑陋”，从优化的角度来看我看不到任何更好的选择（也许使用布尔值和反转每次都代替计数器）。

另请注意，重新渲染分为两种类型：浅层渲染和深层渲染，我建议阅读本文以获取更多信息和提示。