在反应功能组件中强制重新渲染答案

【问题标题】：Force re-render in react functional component在反应功能组件中强制重新渲染
【发布时间】：2021-10-23 20:00:18
【问题描述】：

我正在尝试在调用函数时更新 ReactDom，

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

在消息组件中，

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

  useEffect(() => {
    setIsOpen(true);
  }, [message]);

当消息更改时，我正在使用 useEffect 将 setIsOpen 更改为 true。我希望组件在每次调用 showMessage(message, config) 函数时调用这个 useEffect。现在，仅当消息文本发生更改时，组件才会重新呈现。 message 是一个类似于 "Example string" 的字符串。如果我多次使用 showMessage("Example string", config) 调用该函数，它不会调用 useEffect。仅当我更改字符串 showMessage("Example stringssss", config) 时，它才会重新渲染。每次调用 showMessage 函数时如何强制重新渲染？

【问题讨论】：

将消息包装在一个对象中：{ message: message }。当对象使用它们的引用进行比较时，新对象将始终触发useEffect。
您可以添加一个计数 const [rerenderCount, setRerenderCount] = useState(0)，然后将 rerenderCount 添加到 useEffect 依赖项。现在，每次您想要重新渲染时，只需致电 setRerenderCount( (val) => (val > 100? 0 : val+1))。
@Yousaf，在依赖项中？那不是每次重新渲染都会创建一个新对象吗？
message={message.body} ---> message={ { message: message.body} }

标签： reactjs react-hooks react-dom

【解决方案1】：

你只需添加一个道具trigger 是一个对象。所以组件总是会重新渲染

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

function Message({ message, trigger })

  useEffect(() => {
    setIsOpen(true);
  }, [message, trigger]);

【讨论】：