在 React.js 中处理闪存/显示消息状态的正确方法

Question

在我的ReactJS应用程序中，我正在使用应用程序状态来维护要向用户显示的闪存消息，例如state.msgText和state.msgType，使用了类似的东西：

this.setState({msgText:'Flash message', msgType: 'warning'});

由于以下困境，我不确定如何处理(设置/取消设置(消息状态：

1. 如果我在渲染后取消设置状态变量，ReactJS 可能会再次重新渲染(由于其他一些 prop/state 变量的更改(，这次消息将不会显示在 DOM 中。

2. 如果我不取消设置状态变量，它将在状态中徘徊，并将显示在下一个屏幕中(这绝对不是需要的(。

有人可以指导我处理这种模式的正确方法吗？我可以想到一些黑客解决方案(例如使用超时，继续倾听用户操作并采取相应的行动(，但它们对我来说似乎都很脆弱。

Answer 1

您可以使用 shouldComponentUpdate 生命周期钩子：

shouldComponentUpdate(nextProps, nextState) {
// check for condition matches
return true
// else
return false
}