React JS中实现每秒更新计时器及主函数运行机制疑问求助

嘿，我来帮你理清这两个问题——为什么你的计时器只有输入时才更新，以及怎么让它每秒自动跑起来，顺便给你讲清楚React组件的运行逻辑～

为什么当前计时器只在输入时更新？ #

React组件的重新渲染触发条件只有两个：

• 组件自身的state（状态）发生变化
• 组件接收的props发生变化

你现在的代码里，日期是直接在渲染时写new Date().toLocaleString()，这个值只有在组件重新执行（重新渲染）的时候才会重新计算。而你操作输入框时，会调用setQuery改变query状态，触发组件重新渲染，这时候才会生成新的日期字符串，所以只有输入时日期才会变。

怎么实现计时器每秒自动更新？ #

咱们需要把时间和React的状态绑定，再用定时器每秒更新这个状态，触发组件重新渲染。具体步骤如下：

1. 引入必要的钩子并声明时间状态 #

首先要导入useState和useEffect，然后声明一个状态来存储当前时间：

import { useState, useEffect } from 'react';

function App() {
  // 保留你原来的状态
  const [query, setQuery] = useState('');
  const [weather, setWeather] = useState({ temp: '' });
  // 新增时间状态
  const [currentTime, setCurrentTime] = useState(new Date());

2. 用useEffect设置定时器并清理 #

用useEffect在组件挂载时启动定时器，每秒更新currentTime状态，同时要记得在组件卸载时清理定时器（避免内存泄漏）：

useEffect(() => {
    // 每秒更新一次时间状态
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    // 组件卸载时清除定时器
    return () => clearInterval(timer);
  }, []); // 空依赖数组：只在组件第一次挂载时执行一次

3. 在渲染中使用时间状态 #

把原来的new Date().toLocaleString()换成我们的状态值：

// 保留你原来的search函数逻辑
  const search = (e) => {
    if (e.key === 'Enter') {
      // 这里写你的搜索/获取天气逻辑
    }
  };

  return ( 
    <div className="app"> 
      <main> 
        <div className="search-box"> 
          <input 
            type="text" 
            className="search-bar" 
            placeholder="Search..." 
            onChange={e => setQuery(e.target.value)} 
            value={query} 
            onKeyPress={search} 
          /> 
        </div> 
        <div className="location"> 
          {weather.temp} 
        </div> 
        <div className="location"> 
          {currentTime.toLocaleString()} 
        </div> 
      </main> 
    </div> 
  );
}

export default App;

再聊聊React组件（主函数）的运行机制 #

React组件本质就是一个普通的JavaScript函数：

1. 当组件第一次挂载到页面时，这个函数会被调用一次，生成初始的JSX结构，React把它渲染成真实DOM。
2. 当组件的state或props发生变化时，这个函数会被重新调用，生成新的JSX。
3. React会对比新旧JSX的差异，只更新DOM中变化的部分（而不是整个页面刷新），这就是React高效的原因。

你之前的问题核心就是：没有把时间和状态绑定，所以只有其他状态（比如query）变化时，组件才会重新执行，日期才会更新；而把时间放进状态后，每秒更新状态就会主动触发组件重新渲染，日期也就跟着每秒更新了。

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