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进行测试？

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

3 个答案: