详解 React 常用的一些钩子函数（对比vue）

React提供了一些常用的钩子函数，它们用于在函数组件中处理不同的生命周期事件和状态管理。以下是一些常用的React钩子函数，并附带简要的解释和示例代码。

useState

(类似Vue里面的data)

用于在函数组件中添加状态。

返回一个包含当前状态值和更新状态值的数组。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect 

(类似Vue里面的mounted、destroyed)

用于在函数组件中执行副作用操作（如数据获取、订阅、手动DOM操作等）。

接收一个函数，该函数包含副作用逻辑，可以返回一个清理函数用于处理cleanup。

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // Cleanup 函数（可选）
    return () => {
      // 清理逻辑...
    };
  }, []); // 依赖项为空数组表示仅在组件挂载和卸载时运行
}

依赖项

useEffect的第二个参数是一个依赖项数组，用于指定哪些变量的变化会触发 useEffect 中的副作用函数的重新执行。这个依赖项数组的目的是帮助 Reac t优化性能，确保副作用函数仅在依赖项发生变化时执行，而不是在每次渲染时都执行。 

为什么需要依赖项数组？

• 避免重复执行： 如果没有依赖项数组，副作用函数会在每次组件重新渲染时都被调用，这可能导致不必要的性能开销。