Question

我对此感到非常沮丧。当父母陈述变化时，我不希望我的孩子重新渲染。我试图在子组件中使用shouldComponentUpdate，但由于某些原因甚至没有被调用。

我的问题是这个。我在网格上有几个图表，我想更新其中一个图表配置设置，我将其作为道具传递给组件。他们共享的父级会更新子级配置，但在此过程中，配置会更改，因此它们都会重新呈现。

为什么没有调用theComponentUpdate？它在父节点上被调用，所以我假设它在状态改变时被调用???

我的代码类似于：

Parent - 具有setState的selectDataType Child1 - 调用selectDataType，它作为prop传递下来，重新渲染 Child2 - 没有改变它的道具，但重新渲染，我需要停止

父：

selectDataType(e) {
    e.stopPropagation();

    var cellId = e.currentTarget.dataset.id;
    var cellValue = e.currentTarget.childNodes[0].value;

    var newCells = [];

    newCells = this.state.cells.map(function (cell, i) {
        var newObj = Object.assign({}, cell);

        if (cellId == cell.id) {
            newObj['dataType'] = cellValue;
        }

        return newObj;
    });

    this.setState({
        cells: newCells
    });

    return;
}

Child1：

export default class Pie extends React.Component {
    constructor(props) {
    super(props);

    this.create = this.create.bind(this);
}

shouldComponentUpdate() {
    return false;
}

create() {
    return {
        //some data
    }
}

render() {
    return (
        <div>
            <ReactECharts
                option={ this.create() }
                style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0, height: "100%" }}
                theme="chalk"
                notMerge={ true }
            />
        </div>
    )
}

}

Child2：与Child1完全相同

Answer 1

确保为您的孩子提供静态密钥支柱（与所有组件阵列一样）。如果给他们一个随机密钥，那么当父母重新呈现它时，它将给所有孩子一个新的随机密钥（与他们的旧密钥不同）。这将使React认为它是一个完全不同的组件，因此现有的组件将完全卸载并重新安装（使用新属性）。所以子组件没有更新，它正在重新安装。因此不会调用shouldComponentUpdate。

Answer 2

您可能会在这里找到关于类和钩子的答案： ReactJS: setState on parent inside child component

钩子的简短答案是：

在子道具中发送父状态和 setState。让我们称这些为 parentState 和 setParentState
在子组件中：
- 有一个 useEffect，它只在 parentState 更新时执行某些操作：

    useEffect(() => {
        props.parentStateSetter(childStateValueYouWantToTrack);
    }, [props.parentState, childStateValueYouWantToTrack]);

您应该查看链接以获取更多信息

根据父母的状态变化防止子组件重新渲染

2 个答案: