Question

我有一个需要对其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);

这个想法是，如果一个字符串道具叫做＆＃39; message＆＃39;更改，然后我们应该显示组件，5秒后我们应该隐藏它。

它正常工作，除非由于某种原因，新消息的值与最后一个（例如＆＃34;项目成功添加＆＃34;） componentWillReceiveProps 的值不同，这意味着组件未显示。

我该如何处理这种情况？我打开清除道具，但我不知道该怎么做。

Answer 1

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

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

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

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

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

1 个答案: