React Hooks 初探：轻松响应式设计及数据获取

2024-02-06 01:17:08

现代前端开发中，React Hooks 是一个不可或缺的工具。它使开发者能够轻松地编写出简洁、优雅的代码，从而提高开发效率和代码的可维护性。

在本文中，我们将重点介绍 React Hooks 中最常用的两个 Hooks：useState 和 useEffect。useState Hook 用于管理组件的状态，useEffect Hook 用于在组件生命周期中执行副作用。

轻松实现响应式设计

React Hooks 可以帮助我们轻松地实现响应式设计。例如，我们可以使用 useState Hook 来存储当前的窗口宽度，然后在组件中根据窗口宽度来动态调整组件的布局。

import { useState, useEffect } from "react";

const ResponsiveComponent = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowWidth(window.innerWidth);
    });

    return () => {
      window.removeEventListener("resize", () => {
        setWindowWidth(window.innerWidth);
      });
    };
  }, []);

  return (
    <div>
      <h1>窗口宽度：{windowWidth}px</h1>
      {windowWidth < 768 ? (
        <p>这是移动端布局</p>
      ) : (
        <p>这是PC端布局</p>
      )}
    </div>
  );
};

export default ResponsiveComponent;

在这个示例中，我们使用了 useState Hook 来存储当前的窗口宽度，然后在 useEffect Hook 中添加了一个监听器来监听窗口大小的变化。当窗口大小发生变化时，useEffect Hook 会调用 setWindowWidth 函数来更新窗口宽度的值。

方便进行数据获取

React Hooks 还可以在数据获取方面发挥作用。我们可以使用 useEffect Hook 来在组件挂载时或组件更新时获取数据。

import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch("https://example.com/api/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>数据：{data ? data.name : "Loading..."}</h1>
    </div>
  );
};

export default DataFetchingComponent;