关于shouldComponentUpdate下TodoItem子组件的问题

Question

老师您好, 我想问一下, 为什么当子组件shouldComponentUpdate的返回为false的时候, 在父组件点击提交子组件为什么依旧可以重新渲染呢? 就是TodoItem这个组件 在React开发者工具中不会被hightlight，但是每次点击提交之后 todo的item确实一个接着一个被加进去展示出来了。

这种情况下， TodoItem子组件到底有没有被重新渲染呢？ 如果没有被重新渲染，此时prop的content已经出现改变了，并且展示在了页面上，这种情况似乎有点相互矛盾。还烦请老师解答，谢谢!

Answer 1

Dell 2019-07-24 22:44:35

其实，当伏组件setState的时候，就会让所有子组件重新渲染，等子组件重新渲染后，父组件再重新渲染。当你shouldComponentUpdate为false的时候，子组件不重新渲染，忽略了这个过程，但是父组件没写shouldComponentUpdate，所以父组件最后还是会重新渲染的

• 提问者 Keeeeeeeith #1

  非常感谢！

Answer 2

塔莉_tully 2019-07-30 10:40:00

我也有这个疑问，就去官网看了一下文档，发现shouldComponentUpdate里有这么一句：

Note that returning false does not prevent child components from re-rendering when their state changes.

对照代码，可以发现TodoItem子组件中所用到的并不是state中的inputValue值，而是this.state.list。所以修改inputValue值的时候，this.state.inputValue值得改变并不能导致TodoItem子组件state的改变，我试着改了一下代码，让TodoItem子组件接收的变为this.state.inputValue值，那么虽然shouldComponentUpdate还是return false，但每次在input中输入值都会引起子组件重新渲染。

Answer 3

慕圣2430575 2020-01-15 17:48:00

一开始我也困惑了很久, 只要把每一个Item当成一个子组件, 每一次提交都是创建新的子组件所有都会初始渲染一次那个新的Item, 所以会被高亮一次, 而shouldComponentUpdate函数只是阻止更新并没阻止Item第一次的渲染, 所以你按提交会高亮, 而触发change并不会高亮 因为他被shouldComponentUpdate return false了