重新渲染子组件 React

Posted 2023-02-22

【中文标题】重新渲染子组件 React

【英文标题】：Re-render Child Compondents React

【发布时间】：2020-05-01 17:22:03

【问题描述】：

如果其中一个组件更新，是否可以重新渲染组件的一个或两个子组件？我有一个看起来像这样的组件：

const ContributeBody = () => (
  <StyledContributeBody>
    <LastThreePages />
    <ContributeForm />
  </StyledContributeBody>
);

ContributeForm 组件收集数据并调用将数据添加到我的 Fauna DB 集合的 API 函数。

LastThreePages 组件调用一个 API 函数，该函数从 Fauna DB 集合中获取最后三页。

目前需要硬重新加载页面才能更新LastThreePages。

我正在寻找一种在ContributeForm 提交数据后重新加载LastThreePages 的方法 数据到 Fauna DB 集合。

目前，我没有使用 Redux 或 GraphQL。我正在使用 FQL。

这里的答案是通量模式吗？

【参考方案1】：

我的建议是StyledContributeBody（或更高级别）管理数据读取和提交，然后通过 React Context（推荐）或 Redux 或将数据作为 props 传递，将数据传递给子组件。

当数据被读取并发生变化时，您可以触发其他数据的刷新，这将向下渗透到子组件。

【参考方案2】：

据我所知，当组件的状态或属性发生变化时，它会重新渲染组件。我想传递一些虚拟属性会起作用（我没有测试过）：

const ContributeBody = () => (
  const [rev, setRev] = useState((new Date()).valueOf());

  <StyledContributeBody>
    <LastThreePages rev=rev />
    <ContributeForm onSuccess=() => setRev((new Date()).valueOf()); />
  </StyledContributeBody>
);

需要重新渲染时调用onSuccess

【讨论】：

伟大的想法，但没有骰子。 :(

我还尝试将“LastThreePages”和“ContributeForm”中的函数放在父级中并将数据向下传递。还有……没有骰子。

@Tithos 你的useEffect 有一个空数组作为第二个参数。这意味着它仅在第一次渲染时触发。您需要在此处添加 rev 属性（表示“在 rev 更改时运行”）或完全删除该空数组（表示“在每次重新渲染时运行”