如果React组件的属性更新但不改变其价值，它会重新渲染吗？

Question

假设我们有一个redux商店，看起来像这样：

{
  "page1": {
    "title": "Demo",
    "content": "Testing"
  },
  "page2": {
    "title": "Demo",
    "content": "Yes, I'm aware the titles match."
  }
}

现在让我们看一下呈现标题的组件：

const Title = ({title}) => <h1>{title}</h1>

const mapStateToProps = state => ({
  title: getCurrentPage().title
})

export default connect(mapStateToProps)(Title)

在上面的块中，getCurrentPage（）是一个记忆化的函数（通过重新选择），该函数根据某种条件（在这种情况下，它是react-router的location.pathname）从状态中导出当前页面数据。

即使{title}的特定值保持不变，当getCurrentPage（）返回的数据不同时，此组件是否也会重新渲染？

如果是，则记住派生的标题道具会否定答案？

Answer 1

好的，我花时间测试我自己的问题，因为我收到的第一个答案说它将重新呈现。 我将console.log（'render'）插入到Title组件中，然后在两个共享相同确切标题的单独页面之间导航。 结果……（鼓声）

不行 组件未重新渲染。

Answer 2

如果通过调用setState()更改道具或更改本地状态，或者您显式调用foceUpdate()函数，则组件将重新渲染。 在您的情况下，标题是一个字符串，并且旧字符串和新字符串具有相同的值，因此，道具没有任何变化，因此没有重新渲染。

要注意的一件事是将一个物体传递给道具。 react不会做深入的比较，因此结果可能与您的预期有所不同。 在这种情况下，您需要在旧版本的getDerivedStateFromProps或componentWillRecieveProps中自己比较旧对象和新对象，然后确定是否需要调用forceUpdate()来强制重新渲染组件。

Answer 3

在我的测试中，它没有使用redux和object，并且我在自己的组件中添加了一个检查命令，仅在真正更改时才进行更新。

顺便说一句，为什么不使用简单的console.log进行测试？