React函数组件如何在每次调用showMessage时强制触发重新渲染

问题根因 #

你当前的实现只监听了message内容变化，当传入相同字符串时，prop没有发生变化，React会跳过组件更新，对应的useEffect自然不会执行。

方案1：使用key属性强制组件重新挂载（推荐，改动最小） #

React会根据组件的key属性判断是否需要销毁旧实例、创建新实例。只要每次调用时传入唯一的key，就会触发组件完全重新初始化，无需修改Message内部代码：

function showMessage(message, config) {
  // 用时间戳作为唯一key，每次调用key都不同
  ReactDOM.render(
    <Message key={Date.now()} message={message.body} />,
    document.getElementById(config.targetElementId)
  );
}

该方案下，Message组件内部监听message的useEffect可以直接删除，因为新实例的open状态初始值就是true。
小提示：如果存在同一毫秒内多次调用的场景，可以改用全局自增计数器作为key，保证唯一性。

方案2：新增触发标识prop，复用组件实例 #

如果不想每次都销毁重建组件，可以新增一个唯一的触发参数，作为useEffect的依赖项：

1. 修改showMessage函数，传入唯一触发标识：

function showMessage(message, config) {
  ReactDOM.render(
    <Message 
      message={message.body} 
      updateTrigger={Date.now()}
    />,
    document.getElementById(config.targetElementId)
  );
}

2. 修改Message组件，将触发标识加入useEffect依赖：

export default function Message({ message, updateTrigger }) {
  const [open, setIsOpen] = useState(true);

  useEffect(() => {
    setIsOpen(true);
  }, [updateTrigger]);
  // 剩余原有逻辑...
}

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