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

时间:2018-10-08 04:05:31

标签: reactjs

在我的ReactJS应用程序中,我正在使用应用程序状态来维护要显示给用户的Flash消息,例如state.msgTextstate.msgType使用了类似的内容:

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

由于以下两难原因,我不确定如何处理(设置/取消设置)消息状态:

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

    < / li>
  2. 如果不设置状态变量,它将在状态中徘徊,并在下一个屏幕中显示(这绝对是不希望的)。

有人可以引导我通过正确的方式来处理这种模式吗?我可以想到一些骇人听闻的解决方案(例如使用超时,继续听用户操作并采取相应措施),但是它们对我来说似乎都很脆弱。

1 个答案:

答案 0 :(得分:0)

您可以使用shouldComponentUpdate生命周期挂钩:

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