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

Question

我正忙着做这件事。我不希望我的 child 在 parent 状态改变时重新渲染。我尝试在子组件中使用 shouldComponentUpdate，但由于某种原因甚至没有被调用。

我的问题是这样的。我在网格上有几个图表，我想更新其中一个图表配置设置，我将其作为 Prop 传递给组件。他们共享的父级更新了子级的配置，但在此过程中，配置发生了变化，因此他们都重新渲染。

为什么不调用 shouldComponentUpdate？它在父级上被调用，所以我假设它是在状态改变的地方被调用的？？？

我的代码看起来像这样:

Parent - 有 selectDataType 和 setStateChild1 - 调用作为 Prop 传递的 selectDataType，它重新呈现Child2 - 没有改变它的 Prop ，但重新渲染，我需要停止

家长:

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;
}

child 1:

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>
    )
}

child 2:和 child 1 完全一样

Answer 1

确保为您的 child 提供静态键 Prop (对于所有组件数组)。如果给他们一个随 secret 钥，那么当 parent 重新渲染时，它会给所有 child 一个新的随 secret 钥(不同于他们的旧 key )。这将使 React 认为它是一个完全不同的组件，因此现有组件将完全卸载并重新安装(具有新属性)。所以子组件不是在更新，而是在重新挂载。因此 shouldComponentUpdate 不会被调用。