让对话框组件脱离全局状态，提升代码健壮性与复用性

2023-11-13 13:03:21

前言

对话框组件是日常开发中常用的组件，为了能更爽地使用它，一般我们都会进行二次封装。今天我就来分享一下我是如何封装对话框组件的。

未封装的使用方式

在未封装之前，我们通常会通过全局状态来控制对话框的显示和隐藏。例如，在React应用中，我们可以使用Redux或Context API来管理对话框状态。

import { useDispatch } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();

  const showDialog = () => {
    dispatch({ type: 'SHOW_DIALOG' });
  };

  const hideDialog = () => {
    dispatch({ type: 'HIDE_DIALOG' });
  };

  return (
    <div>
      <button onClick={showDialog}>Show Dialog</button>
      <button onClick={hideDialog}>Hide Dialog</button>

      {showDialog && <Dialog />}
    </div>
  );
};

这种方式虽然简单易用，但存在一些问题：

代码难以维护和扩展。当对话框组件需要修改时，我们不仅需要修改组件本身的代码，还需要修改管理对话框状态的代码。这使得代码变得难以维护和扩展。
组件复用性差。由于对话框组件与全局状态紧密耦合，因此难以在其他项目或组件中复用。

封装后的使用方式

为了解决这些问题，我们可以对对话框组件进行封装，使其脱离全局状态。

import { useState } from 'react';

const Dialog = () => {
  const [showDialog, setShowDialog] = useState(false);

  const showDialog = () => {
    setShowDialog(true);
  };

  const hideDialog = () => {
    setShowDialog(false);
  };

  return (
    <div>
      <button onClick={showDialog}>Show Dialog</button>
      <button onClick={hideDialog}>Hide Dialog</button>

      {showDialog && <Dialog />}
    </div>
  );
};