使用useEffect和axios在React中进行数据获取

当我们在React中需要进行数据获取时，可以使用第三方库axios。而在类组件中，我们通常会使用componentDidMount来进行数据获取，但在函数式组件中，我们应该使用React Hooks中的useEffect来实现相同的功能。

什么是useEffect

useEffect是React Hooks中的一个函数，用于处理函数式组件中的副作用。副作用指的是不受控制的操作，如：异步请求、定时器、数据绑定等。我们可以使用它来在组件渲染后执行一些操作。

使用useEffect与axios进行数据获取

首先，我们需要安装axios：

npm install axios --save

接着，在函数式组件中使用useEffect：

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

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default App;

在上面的代码中，我们导入了React、useState、useEffect和axios。然后在App组件中声明了一个状态data，它的初始值为空数组[]。接着，我们使用useEffect函数来获取数据，并将数据设置为data状态。由于useEffect第二个参数为空数组，它只会在组件渲染时执行一次，避免重复执行。

最后，我们将data数组渲染为一个无序列表。

总结

使用useEffect与axios可以很方便地在函数式组件中进行数据获取。我们可以在useEffect函数中调用axios来获取数据，并将数据设置为组件状态来渲染页面。