React 组件和自定义 hook 之间有什么区别？

React 组件 vs. 自定义 Hooks

React 组件 和 自定义 Hooks 是 React 中两种非常重要的概念，它们在功能上有所不同，但都旨在帮助开发者更高效地构建用户界面和逻辑。

React 组件

React 组件是构建 React 应用的基本单元，它定义了应用的结构和表现形式。组件的核心是它的render方法，该方法描述了组件的 UI 布局。通过组合多个组件，你可以构建出复杂的用户界面。React 组件可以是类组件或函数组件，其中函数组件在 React 16.8 引入 Hooks 后变得更加强大和流行。

例子：

jsx
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

这个简单的函数组件接受一个props对象，并返回一个表示欢迎信息的 JSX 元素。

自定义 Hooks

自定义 Hooks 是一种在多个组件之间共享逻辑的机制，而不复制代码。你可以将组件逻辑提取到可重用的函数中。自定义 Hooks 通常是一个函数，其名称以use开头，这样可以明确地表明它们遵循 React Hooks 的规则。

例子：

jsx
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  return width;
}

这个自定义 Hook useWindowWidth 允许任何组件轻松地获取和响应窗口宽度的变化。

主要区别

1. 目的和应用：

   • 组件 主要负责 UI 的结构和展示。
   • 自定义 Hooks 主要用于抽象和重用状态逻辑，它们不渲染任何 UI，而是提供数据和行为给组件。

2. 返回值：

   • 组件 返回 React 元素，构成页面的一部分。
   • 自定义 Hooks 返回数据或函数，供一个或多个组件使用。

3. 使用场景：

   • 使用组件时，当你需要创建可视化的 UI 元素时。
   • 使用自定义 Hooks时，当你需要在多个组件中共享逻辑或状态时，例如数据获取、订阅或与 DOM 交互的行为。

通过这些差异和例子，我们可以看到 React 组件和自定义 Hooks 各自的用途和强大之处。在实际开发中，合理地利用这两者，可以极大地提高应用的可维护性和复用性。