javascript - 为什么 componentDidMount 在 componentWillUnmount 之后运行？

Question

我试图捕获 componentDidMount 和 componentWillUnmount 之间的区别并尝试了以下代码:

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    console.log("Inside componentDidMount");
  }

  componentWillUnmount() {
    console.log("Inside ComponentWillUnMount");
  }

  render() {
    return (
      <div className="App">
        {console.log("I am in render")}
        <header className="App-header">
          <input
            type="text"
            value={this.state.name}
            onChange={(e) => this.setState({ name: e.target.value })}
            placeholder="enter your name"
          />
          <p>Edit and save to reload.</p>
        </header>
      </div>
    );
  }
}

目前我的理解是

1. componentDidMount 会在组件挂载后调用，只调用一次 即使经过多次重新渲染(如果我在这里错了，请纠正我)
2. componentWillUnmount 将在组件卸载时调用一次。

但我在控制台中观察到 componentDidMount 在渲染之后被调用，这是预期的，而且在 componentWillUnMount 之后。

我的问题是:

1. 为什么 componentWillUnMount 被调用，因为我只有 App 组件，没有其他组件要渲染，而且我仍在第一个屏幕上？为什么要卸载 App 组件，因为我仍在那个屏幕上，在那里我可以看到 App 组件包含的内容(这是输入)

2. 为什么 componentDidMount 在 componentWillUnMount 之后运行？

为什么我们需要在构造函数中使用 props 调用 super()？

Result with Class component

我什至用 useEffect 的功能组件尝试了上面的代码，结果是一样的。

const AppSample = () => {
    useEffect(() => {
        console.log('I am in useEffect');
        return () => {
            console.log("Inside clean up function")
        }
    }, []);

    const [name , setName ] = useState('')

    return  (
        <div>
        {
            console.log(" I am inside render")
        }
            <input value={ name } onChange={(e) => setName(e.target.value)} />
        </div>
    )
}

console.log('I am in running') 打印两次，一次在渲染之后，另一次在执行清理函数之后

Result With functional component

Answer 1

你必须有 <StrictMode>在您的 index.js 中启用文件.

替换 <StrictMode>与 <>

然后你会发现render()和 componentDidMount在你的 App 组件中只触发一次并且 componentWillUnmount除非卸载 App 组件，否则不会触发

严格模式引用:https://github.com/facebook/react/issues/12856#issuecomment-613145789