在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中更改。