javascript - 为什么删除一个组件会影响另一个组件的生命周期？

Question

以下代码示例包含 2 个组件:Component1日志prevState与 componentDidUpdate方法，Component2删除按钮单击以显示 componentWillUnmount 的使用.

const { useState } = React;

class Component1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John',
    };
  }
  componentDidUpdate(prevProps, prevState) {
    console.log(prevState);
  }
  render() {
    return (
      <div>
        <div>The name is {this.state.name}</div>
        <label htmlFor="prevstate">Type here to see prevState in console: </label>
        <input
          id="prevstate"
          onChange={(e) => {
            this.setState({ name: e.target.value });
          }}
        />
      </div>
    );
  }
}

class Component2 extends React.Component {
  componentDidMount() {
    console.log('Mount');
  }
  componentWillUnmount() {
    console.log('Unmount');
  }
  render() {
    return (
      <div>
        <div>Click the button to remove the element</div>
      </div>
    );
  }
}

const App = () => {
  const [showComponent, setShowComponent] = useState(true);
  return (
    <div>
      <Component1 />
      {showComponent ? <Component2 /> : null}
      <button
        onClick={() => {
          setShowComponent(false);
        }}
      >
        Remove
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

现在我发现这两个组件相互干扰:单击按钮还会记录 prevState在第一个组件中。我认为会发生的是 componentDidUpdate方法只会监视 Component1 的更新，但它似乎监视了两个组件之外的按钮，为什么会发生这种情况？

Answer 1

当 App 被渲染时，它的 child 也会被渲染。您可以尝试将 Component1 设为 React.PureComponent或定义 shouldComponentUpdate如果你想减少重新渲染。