reactjs - 如果 2 个不同的 Prop 更改具有相同的值，则不会调用 componentWillReceiveProps

Question

我有一个 React 组件需要对其 WillReceiveProps 状态进行一些计算。这是组件的样子:

import React from 'react'
import {connect} from 'react-redux'
import Message from './Message.react'

class MessageContainer extends React.Component {

  constructor() {
    super();

    this.state = {show: false, message: null}
  }

  componentWillReceiveProps(nextProps, nextState) {
    if (nextProps.message) {
      this.setState({show: true});
      setTimeout(
        () => {
          this.setState({show: false})
        },
        5000);
    }
  }

  render() {
    let message = this.props.message;

    return (message ? <Message message={message} show={this.state.show}/> : null)
  }
}

const mapStateToProps = (state,ownProps) => {
  return {
    message: state.message
  }
};

export default connect(mapStateToProps, {})(MessageContainer);

想法是，如果名为“message”的 String prop 发生变化，那么我们应该显示该组件，并在 5 秒后隐藏它。

它正常工作，除了如果由于某种原因，新消息与上一条消息的值相同(例如“项目成功添加”)componentWillReceiveProps 没有被调用，这意味着组件是未显示。

我该如何处理这种情况？我愿意清除 Prop ，但我不确定在哪里做。

Answer 1

由于您使用 connect() 将您的组件连接到 redux，因此您导出的组件实际上是一个高阶组件，它通过 react-redux 绑定(bind)在内部为您实现 shouldComponentUpdate (SCU)。 (类似于 React.PureComponent)。

你的connected component只需要传单状态prop state.message(没有dispatchProps和ownProps)，只要保持不变，SCU返回false，你的连接的组件将不会重新呈现，因此您的 componentWillReceiveProps 不会被调用。

您可以通过将配置对象传递给第四个参数来关闭默认优化，如下所示，您的 componentWillReceiveProps 应该会按预期调用。

connect(
    mapStateToProps, 
    null, 
    null,
   { pure: false }
)