用hooks巧妙实现组件传递

2023-10-20 08:39:48

React hooks无疑是前端开发的宝藏，尤其自定义hook更蕴含着无限可能和复用性。然而，今天我发现了一个有些“奇怪”的自定义hook，它的神奇之处在于，居然返回了一个组件。

乍一看，你可能觉得这有点多此一举。我想要一个弹出层，为什么还要定义一个visible状态，然后在组件中反复使用呢？直接把visible作为参数传递不就行了？

不过，且慢。这个看似多余的步骤，实际上隐藏着自定义hook的精妙之处。它将组件的逻辑和状态完全封装在hook中，极大地提高了代码的复用性和可维护性。

首先，我们来看看这个“奇怪”的自定义hook是如何实现的：

import { useState } from 'react';

const useModal = () => {
  const [visible, setVisible] = useState(false);

  const toggle = () => {
    setVisible(!visible);
  };

  const ModalComponent = () => {
    return (
      <div className="modal">
        <div className="modal-content">
          <h1>Modal Title</h1>
          <p>Modal Content</p>
          <button onClick={toggle}>Close</button>
        </div>
      </div>
    );
  };

  return [visible, toggle, ModalComponent];
};

这个hook定义了一个状态变量visible来控制弹出层的显示和隐藏，以及一个toggle函数来切换这个状态。最有趣的是，它还定义了一个叫做ModalComponent的组件，里面包含了弹出层的具体内容。

然后，我们可以在组件中使用这个hook：

const MyComponent = () => {
  const [visible, toggle, ModalComponent] = useModal();

  return (
    <div>
      <button onClick={toggle}>Open Modal</button>
      {visible && <ModalComponent />}
    </div>
  );
};