Question

基本上，我有这个非常简单的反应组件。它的作用是环绕'react-intercom'，只有在状态发生变化时才会渲染它。为简化问题，我将shouldCompoenentUpdate()方法硬连线，以便始终返回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;

发生的事情是，它总是会重新渲染，这不应该发生。

任何人都知道为什么会发生这种情况？

Answer 1

根据docs，简单地返回false并不会停止重新渲染。阅读this将告诉您如何正确地完成这项工作。

More Information

Answer 2

这不会阻止渲染子组件：
来自DOCS：

返回false不会阻止子组件重新呈现   当他们的状态发生变化    ...

请注意，将来React可能会将shouldComponentUpdate（）视为一个   提示而不是严格的指令，并且仍然可以返回false   导致重新呈现组件。

Answer 3

我最终弄清楚了：问题在于包装组件正在接收状态变化，并且无条件地重新渲染所有孩子（这是正常行为。这是重新安排组件的问题（从我的{{获取此Intercom包装器） 1}}组件）。感谢大家的帮助！干杯！

Answer 4

如果Intercom组件在不提供IntercomWrapper时呈现（因为shouldComponentUpdate设置为false），则意味着Intercom组件独立于其父级传递的{... this.props}侦听数据更改（例如，它可以订阅商店）。

我遇到了同样的问题，Child组件在其Parent不在时渲染，因为shouldComponentUpdate设置为false。原因是-子级订阅了存储，并且独立于父级监听数据更改。

React shouldComponentUpdate（）= false不停止重新渲染

4 个答案: