React的isMounted如何使用

isMounted 的使用方法

React 的 isMounted 方法用于检查组件是否仍挂载在 DOM 中，避免在组件卸载后执行状态更新操作。由于该方法已被标记为废弃，推荐使用替代方案。

废弃的 isMounted 用法

在旧版本的 React 中，可以通过 this.isMounted() 检查组件是否挂载：

componentDidMount() {
  this._isMounted = true;
  fetchData().then(data => {
    if (this._isMounted) {
      this.setState({ data });
    }
  });
}

componentWillUnmount() {
  this._isMounted = false;
}

替代方案

使用类组件的实例变量或函数组件的 ref 来跟踪挂载状态：

class MyComponent extends React.Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    fetchData().then(data => {
      if (this._isMounted) {
        this.setState({ data });
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
}

对于函数组件，可以使用 useEffect 的清理函数：

function MyComponent() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    fetchData().then(data => {
      if (isMounted.current) {
        setData(data);
      }
    });

    return () => {
      isMounted.current = false;
    };
  }, []);

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

注意事项

• 直接使用 isMounted 方法会触发 React 的废弃警告。
• 替代方案的核心逻辑是通过手动标记挂载状态来避免内存泄漏。
• 异步操作（如网络请求）完成后，必须检查组件是否仍挂载再更新状态。