如何全局声明currDate以在useState中使用并优化React时钟组件代码？

Hey there! Let's break down how to refine your Clock component to meet your goals—cutting down on redundant code (which I suspect is what you're aiming for with a "global" currDate) and making the code cleaner and more efficient.

Why a Global currDate Isn't Ideal in React #

First, let's talk about the global variable idea. In React, using global variables for component-specific values can lead to unexpected behavior, especially if you ever render multiple Clock components (they'd share the same global value). Instead, we can extract the date formatting logic into a reusable helper function that both the initial state and click handler can use. This keeps logic encapsulated, avoids duplication, and aligns with React best practices.

Refactored Code #

Here's a cleaned-up version of your component with these improvements:

import React, { useState } from "react";

// Reusable helper function to get formatted time string
const getFormattedTime = () => new Date().toLocaleTimeString();

const Clock = () => {
  // Initialize state directly using our helper function
  const [currTime, updateTime] = useState(getFormattedTime());

  // Simplified handler—no need to repeat date logic
  const timeHandler = () => updateTime(getFormattedTime());

  return (
    <>
      <h1>{currTime}</h1>
      <button type="button" onClick={timeHandler}>Update Time</button>
    </>
  );
};

export default Clock;

Key Improvements #

• Eliminated Code Duplication: The getFormattedTime function handles date formatting in one place, so we don't repeat new Date().toLocaleTimeString() twice.
• Simplified State Setup: We pass the helper function directly to useState—it only runs once on initial render, which is exactly what we need for the starting time.
• Streamlined Handler: The timeHandler is now a concise one-liner that just calls updateTime with the latest formatted time.
• Removed Redundant Variables: We got rid of the extra currDate declarations since our helper function takes care of that work.

Bonus: Automatic Time Update (Optional) #

If you want the clock to tick automatically without needing a button click, you can add a useEffect hook to set up an interval. Here's how that looks:

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

const getFormattedTime = () => new Date().toLocaleTimeString();

const Clock = () => {
  const [currTime, updateTime] = useState(getFormattedTime());

  useEffect(() => {
    // Update time every second
    const intervalId = setInterval(() => updateTime(getFormattedTime()), 1000);
    
    // Clean up interval when component unmounts to prevent memory leaks
    return () => clearInterval(intervalId);
  }, []);

  return <h1>{currTime}</h1>;
};

export default Clock;

This keeps the code efficient and follows React's patterns for managing side effects.

内容的提问来源于stack exchange，提问作者Abhishek