如何使用react hooks localStorage实现每天弹一次弹窗，每天0时重置

您可以使用`useEffect` hook和`localStorage`来实现每天弹一次弹窗，每天0时重置的功能。

首先，您可以在组件中定义一个`useState` hook来保存弹窗状态：

const [showPopup, setShowPopup] = useState(false);

然后，您可以使用`useEffect` hook来检查是否需要弹出弹窗，并更新状态：

useEffect(() => {
  const lastPopupDate = localStorage.getItem('lastPopupDate');
  const currentDate = new Date().toISOString().split('T')[0];

  if (lastPopupDate !== currentDate) {
    setShowPopup(true);
    localStorage.setItem('lastPopupDate', currentDate);
  }
}, []);

在这个例子中，我们通过检查`localStorage`中的`lastPopupDate`是否等于当前日期来决定是否弹出弹窗。如果它们不相等，我们将设置`showPopup`为`true`并将当前日期设置为`lastPopupDate`。

最后，您可以在组件中渲染弹窗：

{showPopup && (
  <div className="popup">
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
    <button onClick={() => setShowPopup(false)}>关闭</button>
  </div>
)}

这个例子中的弹窗是一个简单的`div`元素，您可以根据自己的需求进行替换。

完整代码示例：

import { useState, useEffect } from 'react';

function App() {
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    const lastPopupDate = localStorage.getItem('lastPopupDate');
    const currentDate = new Date().toISOString().split('T')[0];

    if (lastPopupDate !== currentDate) {
      setShowPopup(true);
      localStorage.setItem('lastPopupDate', currentDate);
    }
  }, []);

  return (
    <div>
      {showPopup && (
        <div className="popup">
          <h2>弹窗标题</h2>
          <p>弹窗内容</p>
          <button onClick={() => setShowPopup(false)}>关闭</button>
        </div>
      )}
    </div>
  );
}

export default App;