useeffect 实际案例

useEffect 实际案例

在React中，useEffect 是一个用来处理副作用操作的 Hook。它在组件渲染完成后执行，可以用来处理数据的获取、订阅、手动更改DOM 等操作。在实际开发中，useEffect 的应用非常广泛，本文将通过几个实际案例，来介绍 useEffect 的用法及其在项目中的应用。

1. 数据请求

在前端开发中，经常需要从后端获取数据并显示在页面上。而useEffect 就是一个非常好的选择来处理这样的副作用操作。下面是一个简单的例子：

```

import React, { useState, useEffect } from 'react';

function App() {

const [data, setData] = useState([]);

useEffect(() => {

fetchData();

}, []);

const fetchData = async () => {

const response = await fetch('

const result = await response.json();

setData(result);

}

return (

{data.map(item => (

{}

))}

);

}

export default App;

```

在这个例子中，我们通过 useEffect 来触发 fetchData 方法，从后端获取数据并更新页面。由于 useEffect 的第二个参数是一个空数组，所以 fetchData 只会在组件挂载完成后执行一次。

2. 订阅事件

在一些场景下，我们需要在组件挂载或卸载时添加或移除一些事件监听。这也是 useEffect 的一个很好的应用场景。例如：

```

import React, { useState, useEffect } from 'react';

function App() {

const [isOnline, setIsOnline] = useState(false);

const handleOnline = () => {

setIsOnline(true);

}

const handleOffline = () => {

setIsOnline(false);

}

useEffect(() => {

window.addEventListener('online', handleOnline);

window.addEventListener('offline', handleOffline);

return () => {

window.removeEventListener('online', handleOnline);

window.removeEventListener('offline', handleOffline);

}

}, []);

return (

当前状态：{isOnline ? '在线' : '离线'}

);

}

export default App;

```

在这个例子中，我们通过 useEffect 在组件挂载和卸载时添加或移除了 online 和 offline 事件监听。这样可以在网络状态发生改变时及时更新页面的显示。

3. 手动操作DOM

一些特殊的场景下，我们需要手动去操作DOM。而 useEffect 也是一个很好的选择。例如：

```

import React, { useRef, useEffect } from 'react';

function App() {

const inputRef = useRef();

useEffect(() => {

inputRef.current.focus();

}, []);

return (

);

}

export default App;

```

在这个例子中，我们通过 useEffect 来在组件挂载时手动将输入框聚焦。这样在页面加载时用户就可以直接输入而无需手动点击输入框。

通过以上几个实际案例的介绍，我们可以看到useEffect 在数据请求、事件订阅和手动操作DOM等场景下的灵活应用。需要注意的是，由

于 useEffect 是在组件渲染完成后执行的，所以在使用时需要注意副

作用操作的性能问题，避免不必要的重新渲染。希望本文能够帮助大

家更好地理解和应用 useEffect。