javascript - 为什么在 componentDidUpdate 中比较数组不会导致无限循环？

Question

我的纯组件中有这段代码:

  componentDidUpdate(prevProps) {
    const { scheduleSheet } = this.props;
    const { scheduleSheet: prevScheduleSheet } = prevProps;

    if (scheduleSheet !== prevScheduleSheet) {
      this.setState({ board: scheduleSheet });
    }
  }

由于数组是 JS 中的对象，scheduleSheet !== prevScheduleSheet 将始终为 true。那么为什么组件不会陷入无限更新循环呢？我的意思是，每次“componentDidUpdate”运行时，它都会看到 prevProps 不等于新的，所以它会更新状态，这将运行 componentDidUpdate ......所以为什么不发生这种情况？

---

还有this.props.scheduleSheet的例子(引用父组件的状态):

[
  null,
  null,
  [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    true
  ],
  [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    true
  ],
  [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    true
  ],
  [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    true
  ]
]

Answer 1

如何传递 props？

const DEFAULT_SHEET = [];

export default class App extends React.Component {
  render() {
    return <Component scheduleSheet={DEFAULT_SHEET} />
  }
}

class Component extends React.Component {
  componentDidUpdate(prevProps) {
    const { scheduleSheet } = this.props;
    const { scheduleSheet: prevScheduleSheet } = prevProps;

    // Always false because the reference (props) never change.
    if (scheduleSheet !== prevScheduleSheet) {
      this.setState({ board: scheduleSheet });
    }
  }
}

在上面的例子中，引用没有改变，因此 scheduleSheet !== prevScheduleSheet 表达式始终为 false 并且不会由于“逻辑”而导致无限循环"原因。

---

此外，您使用 React.PureComponent 因此在这种情况下您不会得到无限循环:

                     // v NOT PURE COMPONENT, causes infinite loop and crash
class Component extends React.Component {
  componentDidUpdate(prevProps) {
    const { scheduleSheet } = this.props;
    const { scheduleSheet: prevScheduleSheet } = prevProps;

    console.log('scheduleSheet', scheduleSheet);
    console.log('prevScheduleSheet', prevScheduleSheet);
    this.setState({ board: prevScheduleSheet });
  }

  onChange = e => this.setState({ board: e.target.value });

  render() {
    return (
      <FlexBox>
        <Input value={this.state.board} onChange={this.onChange} />
      </FlexBox>
    );
  }
}

那是因为 PureComponent使用浅层属性和状态比较实现 shouldComponentUpdate，从而防止“不必要的渲染”。