输入更改时，意外的React countdown组件重新呈现

基础概念

在React中，组件的重新呈现通常是由状态（state）或属性（props）的变化触发的。当输入更改时，如果组件的状态或属性依赖于这些输入，组件会重新渲染。

类型

受控组件：组件的状态由外部控制，通常通过父组件传递的属性来管理。
非受控组件：组件的状态由内部管理，通常使用本地状态（state）。

应用场景

表单处理：在表单中，输入框的值通常通过状态管理，以便实时响应用户输入。
实时数据展示：如倒计时组件，需要根据时间变化实时更新显示。

可能遇到的问题及原因

问题：输入更改时，倒计时组件意外重新呈现。

原因：

状态提升：如果倒计时组件的状态被提升到父组件，并且父组件的状态依赖于输入，那么每次输入变化都会导致父组件重新渲染，进而导致倒计时组件重新渲染。
不必要的依赖：倒计时组件可能在不必要的地方依赖于输入，导致即使输入变化，倒计时组件也会重新渲染。

解决方法

使用React.memo：对倒计时组件进行记忆化处理，避免不必要的重新渲染。

import React, { useState, useEffect, memo } from 'react';

const Countdown = memo(({ endTime }) => {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(endTime));

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft(endTime));
    }, 1000);

    return () => clearTimeout(timer);
  }, [endTime]);

  return <div>{timeLeft}</div>;
});

function calculateTimeLeft(endTime) {
  const difference = +new Date(endTime) - +new Date();
  let timeLeft = {};
  if (difference > 0) {
    timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
  }
  return timeLeft;
}

const App = () => {
  const [input, setInput] = useState('');
  const [endTime, setEndTime] = useState('');

  useEffect(() => {
    setEndTime(input);
  }, [input]);

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <Countdown endTime={endTime} />
    </div>
  );
};

export default App;

使用useCallback或useMemo：在父组件中使用这些钩子函数来记忆化传递给倒计时组件的函数或值，避免不必要的重新渲染。

import React, { useState, useEffect, useCallback } from 'react';

const Countdown = ({ endTime, onTimeUpdate }) => {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(endTime));

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft(endTime));
      onTimeUpdate(timeLeft);
    }, 1000);

    return () => clearTimeout(timer);
  }, [endTime, onTimeUpdate]);

  return <div>{timeLeft}</div>;
};

function calculateTimeLeft(endTime) {
  const difference = +new Date(endTime) - +new Date();
  let timeLeft = {};
  if (difference > 0) {
    timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
  }
  return timeLeft;
}

const App = () => {
  const [input, setInput] = useState('');
  const [endTime, setEndTime] = useState('');

  const handleTimeUpdate = useCallback((timeLeft) => {
    console.log(timeLeft);
  }, []);

  useEffect(() => {
    setEndTime(input);
  }, [input]);

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <Countdown endTime={endTime} onTimeUpdate={handleTimeUpdate} />
    </div>
  );
};

export default App;

通过这些方法，可以有效避免倒计时组件在输入更改时意外重新呈现的问题。