React functional component在设置状态后卸载/挂载父组件

基础概念

React Functional Component（函数式组件）是React中的一种组件类型，它是一个纯函数，接收props作为参数并返回JSX元素。函数式组件没有自己的状态（state）和生命周期方法，但可以通过React Hooks API来使用状态和其他React特性。

类型

函数式组件可以是简单的纯展示组件，也可以是复杂的具有状态和副作用的组件。通过Hooks API，函数式组件可以实现以下功能：

useState：用于在函数式组件中添加状态。
useEffect：用于处理副作用，如数据获取、订阅或手动更改DOM。
useContext：用于访问React Context。

应用场景

函数式组件适用于大多数React应用场景，特别是那些不需要复杂生命周期管理的场景。它们在以下情况下特别有用：

展示组件：只负责渲染数据的组件。
无状态逻辑：不需要维护自身状态的组件。
Hooks使用：需要使用Hooks API来实现复杂逻辑的组件。

遇到的问题及解决方法

问题：在设置状态后卸载/挂载父组件

当父组件卸载或重新挂载时，可能会导致函数式组件中的状态设置逻辑出现问题。例如，如果在一个副作用中设置了状态，而父组件在此时卸载，可能会导致内存泄漏或不必要的状态更新。

原因：

副作用未清理：在useEffect中设置的副作用（如定时器、订阅等）未正确清理。
状态更新：在组件卸载后尝试更新状态。

解决方法：

清理副作用：在useEffect中返回一个清理函数，用于在组件卸载时清理副作用。

useEffect(() => {
  const timerId = setTimeout(() => {
    // 设置状态
    setState(prevState => prevState + 1);
  }, 1000);

  // 清理函数
  return () => {
    clearTimeout(timerId);
  };
}, []);

使用isMounted标志：在设置状态前检查组件是否已卸载。

import { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  let isMounted = true;

  useEffect(() => {
    const timerId = setTimeout(() => {
      if (isMounted) {
        setCount(prevCount => prevCount + 1);
      }
    }, 1000);

    return () => {
      clearTimeout(timerId);
      isMounted = false;
    };
  }, []);

  return <div>{count}</div>;
}