如何重新渲染 React 组件？

Posted 2023-02-22

【中文标题】如何重新渲染 React 组件？

【英文标题】：How to re-render a React component?

【发布时间】：2020-09-29 18:05:00

【问题描述】：

我有一个反应组件“A”，它依赖于存储在提供程序组件“B”状态中的值“x”。当“x”更新时，我需要重新渲染组件“A”。我如何实现这一目标？将如何更新“x”的“A”？ “B”可以非常间接地访问“A”。

我使用的是旧版本的 React，所以我不能使用钩子。

【问题讨论】：

阅读更多关于反应钩子或反应生命周期的信息

如何在codesandbox/codepen 中创建一些示例并向我们展示您的尝试。

【参考方案1】：

通过更新组件“B”的状态，这将触发组件的重新渲染，该组件将传播到其子节点，包括节点 A。React 遵循下拉架构，这意味着更新父节点，这会将它传播给它的孩子。

这是一个非常通用的答案，但这是 React 渲染背后的主要思想。如果您想更具体，可以编辑您的答案以提供更多信息。

【参考方案2】：

我假设值“x”作为道具传递给组件“A”。在这种情况下，您可以在检查道具状态的地方进行 ComponentDidUpdate 检查。像这样：

    ComponentDidUpdate(prevProps) 
    //Code here 
    

查看这篇文章：Re-render React component when prop changes

【参考方案3】：

我发现的最简洁的方法是将值“x”作为道具传递给组件“A”，以便它可以自动重新渲染。