javascript - 在 react 中，如果我将 shouldComponentUpdate 设置为 false，我发送给子级的任何状态都会更新吗？

Question

我有以下情况:

1) 有一个父组件“ModuleListContainer”。

2) 当将鼠标悬停在列表中的模块项上时，模块(在模块列表中，也是子组件，但在本上下文中并不有趣)会被选中。

3)当鼠标悬停在模块上时，模块的 Angular 落应显示一个菜单。

4) 选择模块时不应更新整个父组件，因为它可能是一个很长的模块列表，这就是为什么我在更新哪个模块时设置 shouldComponentUpdate = false被选中。

5) 菜单会在父组件加载时加载，并且只有将鼠标悬停在模块上时才会更新其位置。

这是父组件(简化)...

class ModuleListContainer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectingModule: false,
            currentlySelectedModule: nextProps.currentModule
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.selectingModule === true) {
            this.setState({
                selectingModule: false,
                currentlySelectedModule: null
            })
            return false;
        }
        return true;
    }

    mouseEnterModule = (e, moduleItem) => {
        const menu = document.getElementById('StickyMenu');
        const menuPosition = calculateModuleMenuPosition(e.currentTarget);

        if (moduleItem.ModuleId !== this.props.currentModuleId) {
            this.props.actions.selectModule(moduleItem);
            this.setState({
               selectingModule: true
            });
        }

        menu.style.top = menuPosition.topPos + 'px';
        menu.style.left = menuPosition.leftPos + 'px';
    }

    render() {
        return (
            <div>
                <section id="module-listing">
                    {/* ... list of mapped modules with mouseEnterModule event */}
                </section>

                <ModuleMenu {... this.props} currentlySelectedModule={this.state.currentlySelectedModule} />
            </div>
        );
    }
}

这是菜单组件(简化)...

class ModuleMenu extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentModule: this.props.currentlySelectedModule
        };
    }

    clickMenuButton = () => {
        console.log('CURRENT MODULE', this.state.currentModule);
    }

    render() {
        return (
            <div id="StickyMenu">
                <button type="button" onClick={this.clickMenuButton}>
                    <span className="fa fa-pencil"></span>
                </button>
            </div>
        );
    }
}

当我在菜单组件中尝试从状态中console.log当前模块时，我不断收到null。

我的问题是这是否是因为......

1. 我已将 shouldComponentUpdate 设置为 false，但菜单的状态未更新？

2. 或者可能是因为我没有重新渲染整个组件？

3. 还是因为我把菜单和父组件一起加载了 当选择模块时它不会重新渲染？

4. 或者可能是上述某些内容的组合？

React 文档 ( https://reactjs.org/docs/react-component.html ) 说:

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

因此，我希望不是上述任何一种情况，因为我真的不想在选择模块时重新渲染整个组件。

Answer 1

在这种情况下，您的子级状态不会改变，您只是更改了父级的状态。您可能应该做的是将组件的渲染方法分成两个组件:

render() {
    return (
        <div>
            <NoUpdateComponent someProps={this.props.someProps}/>

            <ModuleMenu {... this.props} currentlySelectedModule={this.state.currentlySelectedModule} />
        </div>
    );
}

然后在您的第一个昂贵的组件中，使用 shouldComponentUpdate 方法来防止它重新渲染