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



在React文档中,它显示

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

我理解状态的变化,但我不确定道具何时变化。据我所知,道具总是从父组件传递到子组件。当父组件重新渲染时(例如,由于状态更改(,所有子组件也会重新渲染(忽略shouldComponentUpdate(。因此,在我看来,如果父组件重新渲染,所有子组件都将重新渲染,无论我是否向它们传递新道具。如果我确实将新道具传递给子组件,那么子组件重新渲染的事实只是因为父组件正在重新渲染,而不是因为我正在传递新道具。

是否存在父组件将新道具传递给子组件,导致子组件重新渲染,但这不仅仅是由父组件重新渲染引起的情况

有没有可能看到一个例子,组件将因为接收到新道具而重新渲染,而不是因为父级正在重新渲染(或其自身状态已更改(?

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

编辑:我看到Redux可以通过传递新道具来重新渲染组件,我很想知道Redux在幕后做了什么来实现这一点。

要回答最后提出的问题:

  • 如果子级是PureComponent或封装在React.memo中,则只有在道具发生更改时才会重新渲染。如果父级重新渲染,则组件将比较它接收到的道具,如果它们与之前传递的道具相同,则不会重新渲染。

  • 如果子级是而不是PureComponent或封装在React.memo中,则它将在任何时候重新渲染其父级。

我不是新手,也问过同样的问题。有一篇文章让我明白了:https://thoughtbot.com/blog/react-rendering-misconception

如果需要DOM更新,则需要重新渲染以进行差异检查。如果您已经实现了shouldComponentUpdate或用memo包装(两者都返回false(,那么将跳过reender。

如果子组件是使用redux或上下文连接的,那么即使没有重新渲染父组件,它也可能重新渲染。

例如,当您将provider、HOC或Redux与mapStateToProps一起使用时,props会从其他组件注入props中更改。

redux的Connect中间件类似于订阅,每个子组件都可以通过订阅直接连接到商店,每当商店发生变化时,商店都会尝试重新同步其所有连接的组件。任何组件的新传入数据都会作为道具出现,从而导致重新渲染
  • 任何从状态之外更改的组件都只能通过props,因此它类似于父组件传递新数据/redux存储,将新数据推送到组件
  • 相关内容

    • 没有找到相关文章

    最新更新