React如何决定重新渲染一个组件

Question

我知道React有一个名为shouldComponentUpdate的生命周期方法，默认返回true，这是组件更新的决定。

但是这个生命周期方法是如何被调用的呢？当组件的状态或属性发生变化时会发生什么？当我们将一个组件连接到Redux的状态和mapStateToProps时，我们是否在组件内部检查值的变化？如果不是，那么我们应该在哪里寻找状态或属性的变化呢？

当属性或状态发生变化时，生命周期方法是如何被调用的？我们是否有一个监听器，在属性或状态发生变化时调用这些方法？

- Shan

Answer 1

is by comparing the old virtual DOM tree to the new one and only updating the parts that have changed, instead of creating a brand new tree every time.

So, in summary, when updating state use this.setState(), and when updating props understand how render() works and let React use its Diffing Algorithm to efficiently update only the necessary parts of the virtual DOM tree.

在DOM中，每个元素都可以使用“key”属性来标识。React 会检查DOM中每个节点上的“key”属性，而不是从头创建每个元素。如果您不设置每个元素的“key”属性，则会收到警告，React 使用这些键来大幅提高渲染速度。

React生命周期

Redux生命周期

- jank

---

我的问题是当 props 或 state 改变时，生命周期方法如何被调用？我们是否有一个监听器在 props 或 state 改变时调用这些方法？ - Shan

谢谢您的回答。我对这个答案有几个疑问。您已经解释了渲染的工作原理。但是，要调用渲染，它应该通过生命周期方法（如componentWillUpdate、shouldComponentUpdate）来进行，对吗？我的问题是这些方法是如何在内部调用的？当props发生变化时，它会调用componentWillReceiveProps，对吗？但是它是如何被调用的？React是如何知道调用这些生命周期方法的？ - Shan

Answer 2

如果您使用了redux库，可能会出现组件在props更改后不重新渲染的问题。请查看此问题以解决使用componentWillReceiveProps处理props更改的问题。

- Tolotra Raharison