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 的废弃警告。 - 替代方案的核心逻辑是通过手动标记挂载状态来避免内存泄漏。
- 异步操作（如网络请求）完成后，必须检查组件是否仍挂载再更新状态。
