React实现新旧state不等时显示‘Edited’文本的方法

要实现消息修改后显示“Edited”的效果，核心是判断当前消息是否与初始状态（默认的“123”）不一致，这里分两种场景处理：

场景1：初始消息是固定值 #

如果初始消息是固定的“123”，不需要额外存储旧状态，直接用常量保存默认值，每次渲染时比较当前消息与默认值即可：

import { useState } from "react";
import "./styles.css";

export default function App() {
  // 把默认消息抽成常量，方便统一维护和比较
  const DEFAULT_MESSAGE = "123";
  const [message, setMessage] = useState(DEFAULT_MESSAGE);

  return (
    <div className="App">
      <input
        value={message}
        type="text"
        onChange={(e) => setMessage(e.target.value)}
      />
      {/* 当当前消息和默认值不同时，显示Edited标记 */}
      {message !== DEFAULT_MESSAGE && (
        <span style={{ color: "#6b7280", marginLeft: "8px", fontSize: "0.875rem" }}>
          Edited
        </span>
      )}
      <p>当消息更新时显示"edited"</p>
    </div>
  );
}

场景2：初始消息是动态值（比如从Props传入） #

如果初始消息不是固定值，而是从父组件通过props传递的动态值，需要用useRef来保存初始状态——因为useRef的current属性不会随组件重新渲染而改变，能稳定存储初始值：

import { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App({ initialMessage = "123" }) {
  const [message, setMessage] = useState(initialMessage);
  // 用ref存储初始消息
  const initialMessageRef = useRef(initialMessage);

  // 监听初始消息的变化，如果props更新了初始值，同步更新ref
  useEffect(() => {
    initialMessageRef.current = initialMessage;
  }, [initialMessage]);

  return (
    <div className="App">
      <input
        value={message}
        type="text"
        onChange={(e) => setMessage(e.target.value)}
      />
      {/* 比较当前消息和初始消息 */}
      {message !== initialMessageRef.current && (
        <span style={{ color: "#6b7280", marginLeft: "8px", fontSize: "0.875rem" }}>
          Edited
        </span>
      )}
      <p>当消息更新时显示"edited"</p>
    </div>
  );
}

关键逻辑说明 #

• 两种方案的核心都是当前状态与初始状态的比较：固定初始值直接用常量对比，动态初始值用useRef保存初始状态后对比。
• 额外添加了简单的样式，让“Edited”标记更贴近Slack的视觉效果（灰色小字体、左间距），你可以根据需求调整。

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