为什么我的 React 组件总是挂载、卸载和重新挂载？

Question

我正在研究 React hooks，我注意到一个奇怪的行为，有人可以向我解释为什么吗？

组件已挂载，将状态设置为初始值，然后卸载，再次挂载和更新！！！

我知道每次更新组件都会重新渲染，但为什么要调用 componentWillUnmounted 方法（在本例中是 useEffect 的 return）？

我在研究class组件和生命周期时也有同样的奇怪行为...

根组件

    function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div className='App'>
            {visible && <UseEffect />}
            <button onClick={() => setVisible((visible) => !visible)}>
                Show/Hide
            </button>
        </div>
    );
}

子组件

const UseEffect = (props) => {
    const [counter, setCounter] = useState(0);

    //didMounted
    useEffect(() => {
        console.log('Cp Mounted');

        //didUnmounted
        return () => {
            console.log('Cp UnMounted');
        };
    }, []);

    //didUpdate
    useEffect(() => {
        console.log('Cp Updated');
    });

    //with state
    useEffect(() => {
        console.log('Change 'counter');
    }, [counter]);

    return (
        <div>
            <h1>{counter}</h1>
            <button onClick={() => setCounter(counter + 1)}>+</button>
        </div>
    );
};

输出浏览器控制台

这让我发疯！！！请知道的人解释为什么会这样？

感谢

Answer 1

在index.js文件中禁用<StrictMode></StrictMode>你不会卸载组件并再次安装，strict mode确保在两次渲染组件时没有错误，这就是你的原因查看安装行为

Check out sand box

为什么我的 React 组件总是挂载、卸载和重新挂载？

Why is my React component always mounted, unmounted and mounted again?

reactjs

react-lifecycle

react-hooks