React shouldComponentUpdate() = false 不停止重新渲染

Question

Basically, I've got this pretty simple react component. What it does is, is wrap around 'react-intercom' and only render it if there is a change in the state. To simplify the question, I've hardwired the shouldCompoenentUpdate() method to always return false.

 import React from 'react'; import Intercom from 'react-intercom'; class IntercomWrapper extends React.Component { shouldComponentUpdate(nextProps, nextState) { // console.log(!!nextProps.user && nextProps.user.userId !== this.props.user.userId); // return !!nextProps.user && nextProps.user.userId !== this.props.user.userId; return false; } render() { console.log('rendering'); return <Intercom {...this.props} />; } }; export default IntercomWrapper;

What happens is that it always rerenders, which should not happen.

Anyone has any idea why would that happen?

Answer 1

我最终想通了：问题是包装组件正在接收状态更改，并且正在无条件地重新渲染所有子项（这是正常行为。这是重新排列组件的问题（从我的<Layout>组件中取出这个 Intercom 包装器） .谢谢大家的帮助！干杯！

Answer 2

According to the docs , simply returning false does not stop rerendering. Reading this will show you how to do it properly.

More Information

Answer 3

This wont prevent rendering of child components:
From the DOCS :

Returning false does not prevent child components from re-rendering when their state changes. ...

Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

Answer 4

If Intercom component renders when IntercomWrapper does not (because of shouldComponentUpdate being set to false), that means that Intercom component listens to data changes independently from {...this.props} passed from its parent (for example, it can be subscribed to a store).

I had the same problem, Child component was rendering when its Parent was not because of shouldComponentUpdate set to false. The reason was - Child was subscribed to store and listened to data changes independently from a parent.