如果2个不同的prop更改具有相同的值,则不会调用componentWillReceiveProps

Question

我有一个需要在其WillReceiveProps状态下进行计算的react组件.这就是组件的样子:

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秒后我们应该隐藏它.

它正常工作,除非由于某种原因,新消息与最后一个(例如"Item successfully added")componentWillReceiveProps没有被调用的值相同,这意味着组件未显示.

我该如何处理这种情况？我愿意清除道具,但我不知道该怎么做.

Answer 1

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

您连接的组件只需传递单个状态prop state.message(没有dispatchProps和ownProps),只要它保持不变,SCU返回false,您的连接组件将不会重新渲染,因此您的componentWillReceiveProps不会被调用.

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

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