Hooks

• useState

import React, { useEffect } from 'react';

const [loading, setLoading] = useState(false)

.....

setLoading(true)

说明：

1. 通过useState来定义数据，以及修改方式（即：set方式）
2. 如上：loading即为定义的变量，setLoading就是set方法，修改loading直接调用setLoading(true)即可完成修改。
3. useState后第一个参数，就是变量loading的初始值。

• useEffect

写在前面：

​ 之前使用生命周期来规定我们的数据绑定时机，现在可以通过useEffect，不必再去关心具体的每个生命周期，而是关注数据本身的变化来进行数据绑定（例如：获取列表数据）。

版本一（待优化）

// 如下是某个列表获取的方法
const [data, setData] = useState({ hits: [] });

useEffect(async () => {
    const result = await axios(
        'http://localhost/api/v1/search?query=redux',
    );

    setData(result.data);
}, []);

说明：

1. 在mount阶段会执行该方法。

2. 一定要加上第二个参数，即空数组[]。原因：useEffect会在两个时机执行，一是Mount阶段，二是组件更新阶段，当我们通过setData来更新数据时，便会引起视图更新，那么useEffect又会执行，如此便形成了死循环。当我们给第二个参数空数组时，它就只会在mount阶段执行。

3. 上面的这个版本还会存在一个问题，控制台会出现警告

   Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect

   原因： async函数会默认返回一个隐形promise，但是useState是不应该返回任何东西的。

版本二 （完成版）

const [data, setData] = useState({ hits: [] });

useEffect(() => {
    const fetchData = async () => {
        const result = await axios(
            'http://localhost/api/v1/search?query=redux',
        );

        setData(result.data);
    };

    fetchData();
}, []);

版本三 （根据指定数据进行更新）

写在前面

​ 很多时候，我们并不是简单的在Mount阶段来进行数据处理，而是针对某个数据状态来进行更新（举个例子：查询列表详情，我们需要根据某条列表的主键id来查询详情，此时就需要根据id来进行数据更新）

  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://localhost/api/v1/search?query=${query}`,
      );

      setData(result.data);
    };

    fetchData();
  }, [query]);

说明：上述即根据query的改变来请求数据