道具更改后重新渲染React组件

Question

在React文档中，它说

默认情况下，当组件的状态或道具更改时，组件将重新渲染。

我了解状态更改，但是我不确定道具何时更改。据我所知，道具总是从父组件传递到子组件。并且当父组件重新渲染时（例如，由于状态更改），所有子组件也会重新渲染（忽略shouldComponentUpdate）。因此在我看来，如果父组件重新渲染，则无论我是否向其传递新道具，所有子组件都将重新渲染。如果我确实将新道具传递给子组件，则孩子重新渲染的事实仅仅是因为父项正在重新渲染，而不是因为我正在传递新道具。

是否存在父组件将新的props传递给子组件，导致子组件重新渲染的情况，但这不是仅由父组件重新渲染引起的吗？ < / p>

是否有可能看到一个示例，其中组件将因为其收到新的道具而不是由于父项正在重新渲染（或自身状态已更改）而重新渲染？

抱歉，如果这是一个基本问题，我是React的新手。

编辑：我看到Redux可以通过传递新的道具来导致组件重新渲染，我很好奇知道Redux在幕后为实现这一目标正在做什么。

Answer 1

要回答最后提出的问题：

• 如果孩子是PureComponent或包裹在React.memo中，则如果道具发生变化，它将仅重新渲染。如果父项重新渲染，则组件将比较接收到的道具，如果它们与先前传递的道具相同，则不会重新渲染。

• 如果子代不是PureComponent或被React.memo包裹，则它将在其父代重新渲染时重新渲染。

Answer 2

例如，当您将provider，HOC或Redux与mapStateToProps一起使用时，道具将从其他组件注入道具更改。

Answer 3

我并不陌生，也一直在问同样的事情。有一篇文章对我来说很清楚：https://thoughtbot.com/blog/react-rendering-misconception

如果需要DOM更新，则需要重新渲染以进行差异检查。如果您已经实现了shouldComponentUpdate或包装了备忘录（都返回false），那么将跳过rerender。

如果子组件使用Redux或上下文连接，则即使不重新渲染父组件也可能重新渲染。

Answer 4

1. redux的连接中间件类似于订阅，每个子组件都可以通过订阅直接连接到商店，并且只要商店发生变化，商店就会尝试重新同步其所有已连接的组件。到任何组件的新传入数据都是作为道具导致重新渲染的。
2. 任何从其状态外部更改的组件都只能通过props，所以它类似于父组件传递新数据/ redux存储将新数据推送到该组件。