UseEffect 是 React 中用于处理副作用的钩子函数，在渲染周期中会进行多次执行，但是有些时候我们不需要每次渲染都进行副作用处理。这就需要我们使用 UseEffect 的第二个参数来控制，只有当某些特定的状态值发生变化时，才会重新执行 UseEffect 中的副作用函数。

以下是一个简单的使用 UseEffect 实现数据请求的示例代码：

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error(error);
      }
    }
    fetchData();
  }, []);

  return (
    

      
Posts
      

        {data.map((post) => (
          
{post.title}
        ))}
      
    
  );
}

export default App;

在上面的代码中，我们使用了 UseState 来存储从 API 中获取到的数据，并在 UseEffect 中进行了数据请求。注意，我们传递了一个空数组作为 UseEffect 的第二个参数，这意味着这个 UseEffect 中添加的副作用函数只会在组件挂载时执行一次，而不是在每次渲染时都执行。这样可以避免不必要的数据请求，提高应用程序的性能。