如何在React中淡入不断变化的值？

import React, { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(0);

  // 其他组件代码...

  return (
    <div>{value}</div>
  );
}

<style>
  .fade-in {
    transition: opacity 1s;
    opacity: 1;
  }
</style>

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

function MyComponent() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    // 模拟值的变化
    const interval = setInterval(() => {
      setValue(prevValue => prevValue + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="fade-in">{value}</div>
  );
}