简介

在使用函数组件进行开发中，需要从远程服务器抓取数据，然后修改视图模型的状态。

类组件的操作很直接，只需要在componentDiDmout内请求数据并setState。函数组件应该如何操作呢？

useEffect 执行副作用函数

函数组件我们使用 useEffect 这个钩子，在useEffect内执行异步网络请求。官方文档的定义，所有有副作用的操作都要在useEffect内执行，像网络请求和修改网页标题这样的。

这里是最近单的一个示例，useEffect有两个参数，第一个参数传入一个箭头函数，里面是有副作用的代码。

第一步 useEffect

useEffect(() => {
异步网络请求是一个Promise对象，定义一个用于调用异步请求的箭头函数。
第二步 定义异步函数fetchHome
useEffect(() => {
  const fetchHome = async () => {
    const homeProps = await client.fetchHome();
  fetchHome();
第三步 更新状态
假设已经定义了一个Client.fetchHome的类方法，这个方法请求接口并返回Promise<HomeProps>对象，HomeProps是Home组件的属性对象。homeProps会被组件使用。
使用useState定义homeProps和setHomeProps，用于网络请求王成后更新组件状态。
调用client.fetchHome请求远程接口，请求完成后setHomeProps。
useEffect(() => {
  const [homeProps, setHomeProps] = useState<HomeProps>({} as HomeProps);
  const fetchHome = async () => {
    const homeProps = await client.fetchHome();
    setHomeProps(homeProps);
  fetchHome();
第四步 更新组件
最后完整的代码示例。
const HomeContainer: React.FC = () => {
  const [homeProps, setHomeProps] = useState<HomeProps>({} as HomeProps);
  useEffect(() => {
    const fetchHome = async () => {
      setHomeProps(props);
    fetchHome();