如何使用 useEffect - Javascript

在 React Hooks 中 useEffect 是非常常用的一个 Hook，它可以让我们在函数组件中添加副作用。副作用可以包括数据获取、订阅或者手动修改 React 组件中的 DOM 都可以称作是副作用。

useEffect 接收两个参数：一个是副作用函数，另一个是依赖项数组（可选）。

useEffect(() => {
  // 执行副作用
}, [依赖项])

当组件挂载或者依赖项发生变化时，useEffect 会执行传入的副作用函数。

如果没有第二个参数，副作用函数会在每次组件渲染完成后执行，相当于 componentDidMount 和 componentDidUpdate 两个生命周期钩子函数。

如果依赖项数组为空，副作用函数只会在组件挂载和卸载时执行，相当于 componentDidMount 和 componentWillUnmount 两个生命周期钩子函数。

如果依赖项不为空，副作用函数会在依赖项变化时执行，相当于 componentDidUpdate 生命周期钩子函数。

示例

如下，就是一个简单的以 useEffect 副作用函数获取数据的例子:

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

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json());

      setData(result);
    };

    fetchData();
  }, []);

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

上面的代码中，我们使用了 useState 来初始化了一个空数组 data，然后通过 useEffect 副作用来获取数据并将结果存入 data 中。

由于我们只需要获取一次数据，所以第二个参数传入一个空数组，这样我们就实现了一个在组件挂载时获取数据的效果。

注意事项

1. useEffect 不会阻塞浏览器渲染。即使我们在副作用函数中发起一个请求，也不会影响页面渲染。
2. 如果在副作用函数中直接修改了组件中的状态，那么会导致组件不停的渲染，进入类似于死循环的状态。
3. 如果在副作用函数中包含了异步操作，需要注意异步操作返回的时机，确保异步操作在组件卸载前完成。
4. 如果副作用函数中是非常耗时的操作，那么我们可以看看能否通过取消副作用函数的执行来优化性能。

总结

useEffect 是 React Hooks 中非常重要的一个 Hook，可以让我们在函数组件中添加副作用操作。在使用 useEffect 的时候，我们需要注意一些问题，避免在使用时出现问题。