Reactjs 我正在学习react，我的代码运行良好，但如何一次性声明currDate以在useState中全局使用它

如何全局声明currDate以在useState中使用它。下面的代码工作得很好，但希望提高效率

有没有更好的方法来缩短代码

import React, { useState } from "react";
        
const Clock = () => {
  const date = new Date();
  const currDate = date.toLocaleTimeString();
  const [currTime, updateTime] = useState(currDate);
  console.log(currDate);

   
  const timeHandler = () => {
    console.log(1);
    const date = new Date();
    const currDate = date.toLocaleTimeString();
    updateTime(currDate);
  };

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

export default Clock;

import React，{useState}来自“React”；
常数时钟=（）=>{
const date=新日期（）；
const currDate=date.toLocaleTimeString（）；
const[currTime，updateTime]=useState（currDate）；
console.log（当前日期）；
常量时间处理程序=（）=>{
控制台日志（1）；
const date=新日期（）；
const currDate=date.toLocaleTimeString（）；
更新时间（当前日期）；
};
返回(
{currTime}
更新时间
);
};
输出默认时钟；

如果您希望使其简短，而不是重复从

到LocaleTimeString

获取的

currDate

行。您可以创建一个这样做的函数，并在任何需要的地方使用它

示例-1

---

如果您希望使其简短，而不是重复从

toLocaleTimeString

获取

currDate

的行。您可以创建一个这样做的函数，并在任何需要的地方使用它

示例-1

---

像这样的东西对你有用吗

  1 import React, { useState } from 'react';
  2 
  3 const getTime = () => {
  4   const date = new Date();
  5   const currDate = date.toLocaleTimeString();
  6 
  7   return currDate;
  8 };
  9 
 10 function Clock() {
 11   const [currTime, updateTime] = useState(getTime());
 12 
 13   const timeHandler = () => {
 14     updateTime(getTime());
 15   };
 16 
 17   return (
 18     <>
 19       <h1> {currTime}</h1>
 20       <button type="button" onClick={timeHandler}>
 21         Updatetime
 22       </button>
 23     </>
 24   );
 25 }
 26 
 27 export default Clock;

1导入React，{useState}来自'React'；
2.
3常量getTime=（）=>{
4 const date=新日期（）；
5 const currDate=date.toLocaleTimeString（）；
6.
7返回日期；
8 };
9
10功能时钟（）{
11 const[currTime，updateTime]=useState（getTime（））；
12
13常量时间处理程序=（）=>{
14 updateTime（getTime（））；
15   };
16
17返回(
18
19{currTime}
20
21更新时间
22
23
24   );
25 }
26
27输出默认时钟；

像这样的东西对你有用吗

  1 import React, { useState } from 'react';
  2 
  3 const getTime = () => {
  4   const date = new Date();
  5   const currDate = date.toLocaleTimeString();
  6 
  7   return currDate;
  8 };
  9 
 10 function Clock() {
 11   const [currTime, updateTime] = useState(getTime());
 12 
 13   const timeHandler = () => {
 14     updateTime(getTime());
 15   };
 16 
 17   return (
 18     <>
 19       <h1> {currTime}</h1>
 20       <button type="button" onClick={timeHandler}>
 21         Updatetime
 22       </button>
 23     </>
 24   );
 25 }
 26 
 27 export default Clock;

1导入React，{useState}来自'React'；
2.
3常量getTime=（）=>{
4 const date=新日期（）；
5 const currDate=date.toLocaleTimeString（）；
6.
7返回日期；
8 };
9
10功能时钟（）{
11 const[currTime，updateTime]=useState（getTime（））；
12
13常量时间处理程序=（）=>{
14 updateTime（getTime（））；
15   };
16
17返回(
18
19{currTime}
20
21更新时间
22
23
24   );
25 }
26
27输出默认时钟；

  1 import React, { useState } from 'react';
  2 
  3 const getTime = () => {
  4   const date = new Date();
  5   const currDate = date.toLocaleTimeString();
  6 
  7   return currDate;
  8 };
  9 
 10 function Clock() {
 11   const [currTime, updateTime] = useState(getTime());
 12 
 13   const timeHandler = () => {
 14     updateTime(getTime());
 15   };
 16 
 17   return (
 18     <>
 19       <h1> {currTime}</h1>
 20       <button type="button" onClick={timeHandler}>
 21         Updatetime
 22       </button>
 23     </>
 24   );
 25 }
 26 
 27 export default Clock;