【边做边学】React Hooks （二）——useEffect Hook

useEffect Hook 是 React 中用于处理副作用操作的重要工具。它在函数式组件中取代了类组件中的生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount）的功能，用于执行那些不直接与渲染相关的操作。

基本用法

useEffect(() => {
  // 副作用操作
  console.log('Component did mount or update');
 
  // 返回的函数用于清理操作（componentWillUnmount）
  return () => {
    console.log('Component will unmount');
  };
}, [dependencies]);

参数说明：

• 副作用操作： 在 useEffect 的第一个参数中放入需要执行的副作用操作，可以是数据获取、订阅事件、手动操作 DOM 等。
• 依赖数组： 作为 useEffect 的第二个参数，它是一个数组，包含影响副作用操作的变量。当这些变量发生变化时，useEffect 将重新执行。如果省略该参数，副作用操作将在每次渲染时都执行。

副作用操作的示例：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 处理获取的数据
  };
 
  fetchData();
}, []); // 空数组表示仅在组件挂载时执行

注意事项：

• 依赖数组： 如果省略依赖数组，useEffect 中的副作用操作将在每次组件渲染时都执行。如果提供了依赖数组，确保仔细考虑数组中的变量，以避免不必要的执行。
• 清理操作： 返回的清理函数用于处理在组件卸载时的清理操作。这对于取消订阅、清除定时器等很有用。

useEffect 是处理副作用操作的强大工具，它使得在函数式组件中进行数据获取、订阅事件等异步和非渲染操作更加简便和灵活。