一键构建你的Modal组件：React Hook带来两种API调用方式

2022-11-30 08:21:41

React Hook揭秘：Modal 组件 API 调用的两种方式

导言

Modal 组件是前端开发中的重要工具，用于弹出模态框以显示关键信息或收集用户输入。随着 React Hook 的出现，构建 Modal 组件有了新的方式，并提供了两种不同的 API 调用方式。本文将深入探讨这两种方式，并指导您使用它们在 Modal 组件中实现 API 调用。

方式一：useState()

useState() 介绍

useState() 是一个 React Hook，用于在函数组件中管理状态。它允许您创建状态变量，用于存储组件的状态信息。

在 Modal 组件中使用 useState()

要使用 useState() 实现 Modal 组件的 API 调用，首先创建一个状态变量来跟踪模态框是否打开：

const [isOpen, setIsOpen] = useState(false);

接下来，使用 API 调用来更新 isOpen 状态变量，从而显示或关闭模态框：

const openModal = () => {
  setIsOpen(true);
};

const closeModal = () => {
  setIsOpen(false);
};

方式二：useEffect()

useEffect() 介绍

useEffect() 是另一个 React Hook，用于在组件加载、更新或卸载时执行某些副作用。它使您能够在这些生命周期事件中执行异步操作或处理状态更新。

在 Modal 组件中使用 useEffect()

要使用 useEffect() 实现 Modal 组件的 API 调用，可以在组件加载时发起 API 调用，并在 API 调用成功后更新 Modal 组件的状态：

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

选择合适的 API 调用方式

这两种方式都可以在 React Hook 中实现 Modal 组件的 API 调用，但它们适用于不同的场景：

useState() 适合管理简单的状态，例如模态框的打开/关闭状态。
useEffect() 更适合管理复杂的副作用，例如在组件加载时发起 API 调用。

代码示例

使用 useState() 的 Modal 组件：

import React, { useState } from "react";

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      {isOpen && <div>Modal content</div>}
    </>
  );
};

export default Modal;

使用 useEffect() 的 Modal 组件：

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

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

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

  return (
    <>
      {isOpen && <div>Modal content</div>}
    </>
  );
};

export default Modal;