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

Question

Let's say we've got a redux store that looks like this:

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

Now let's look at the component that renders the title:

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

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

export default connect(mapStateToProps)(Title)

In the above block, getCurrentPage() is a memoized function (via reselect) that derives the current page data from the state based on some condition (in this case, it's react-router's location.pathname).

Will this component re-render when the data returned by getCurrentPage() is different, even though the specific value of {title} stays the same?

If yes, will memoizing the derived title prop change the answer to no?

Answer 1

Ok, I took the time to test out my own question because the first answer I received said it would re-render. I inserted console.log('render') into the Title component and then navigated between two separate pages that each shared the same exact title. And the result... (drum roll)

NO . The component did not re-render.

Answer 2

The component will re-render if the props changed, or the local state changed due to a call to setState() , or you explicitly call the foceUpdate() function. In your case, the title is a string, and the old string and new string have the same value, so, there is no change in the props, therefore no re-render.

One thing to be careful is passing an object to a props. react won't do a deep comparison, so the result may be different from your expectation. In that case, you need to compare the old and new objects by yourself in the getDerivedStateFromProps or componentWillRecieveProps in old versions, and then decide whether you need to call forceUpdate() to force the component to re-render.

Answer 3

in my tests not with redux and object it does and i had add a check comand to my compoments for only updating when real change.

Btw why not test with a simple console.log?