导致React组件的属性和状态没有变化的原因是什么？

Question

我有一个组件，它的道具由父组件设置。 父组件定期更改，但孩子的道具不更改。

但是由于某种原因，孩子继续渲染，但我不知道为什么。 为了验证道具和状态没有改变，我添加了以下功能：

shouldComponentUpdate(nextProps, nextState) {
    console.info(JSON.stringify(nextProps)+JSON.stringify(nextState));

    console.info('NEXT PROPS ====================');
    for (var n in nextProps) {
        if (!nextProps.hasOwnProperty(n)) continue;
        console.info(n + ' = ' + (nextProps[n] === this.props[n]));
    }

    console.info('NEXT STATE ====================');
    for (var n in nextState) {
        if (!nextState.hasOwnProperty(n)) continue;
        console.info(n + ' = ' + (nextState[n] === this.state[n]));
    }

    return true;
}

这将在控制台中打印以下内容：

{"autocomplete":null,"value":"","theme":1,"style":{"width":1426,"height":783},"label":"","description":null,"visible":false,"buttons":null,"inputType":null}{"visible":false,"answer":""}
NEXT PROPS ====================
autocomplete = true
value = true
theme = true
style = true
onClose = true
label = true
description = true
visible = true
buttons = true
inputType = true
NEXT STATE ====================
visible = true
answer = true

{"autocomplete":null,"value":"","theme":1,"style":{"width":1426,"height":783},"label":"","description":null,"visible":false,"buttons":null,"inputType":null}{"visible":false,"answer":""}
NEXT PROPS ====================
autocomplete = true
value = true
theme = true
style = true
onClose = true
label = true
description = true
visible = true
buttons = true
inputType = true
NEXT STATE ====================
visible = true
answer = true

因此，从一个调用到下一个调用，状态和prop严格相等，但是该组件的render（）函数仍被调用。 请注意，此shouldComponentUpdate（）仅用于测试-如果我删除它，则render（）也会在相同条件下继续被调用。

知道是什么原因造成的吗？

Answer 1

我有一个组件，它的道具由父组件设置。 父组件定期更改，但孩子的道具不更改。 但是由于某种原因，孩子继续渲染，但我不知道为什么。

子代会继续进行重新渲染，因为它位于父代的render方法内部-正如您所提到的，它不断变化。

为了更好地了解为什么调用该子级的原因 ，请记住JSX转换回了常规JS，因此类似于：

render() {
  return (
    ...
    <ChildComponent someProp={"hello"} />
    ...
  );
}

变为：

render() {
  return React.createElement(
    ...,
    React.createElement(ChildComponent, { someProp: "hello" }),
    ...
  );
}

如果您不希望孩子被重新渲染，则应该检查孩子的道具是否没有变化，并在shouldComponentUpdate内返回false或从React.PureComponent扩展而来，后者会自动为您处理- 看看区别 。

还要注意，重新渲染！==重新绘制，只会导致React的差异算法运行，并且仅当差异算法发现虚拟DOM的当前版本与虚拟DOM的先前版本相比有所不同时， UI的特定“已更改”部分将重新绘制在屏幕上。