何时使用componentWillReceiveProps生命周期方法？

Question

我是React / Redux的新手，状态有问题。

TrajectContainer.jsx

class TrajectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            trajects: props.trajects,
            onClick: props.onClick
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps);
        this.setState(nextProps);
    }

    render() {
        // When the componentWillReceiveProps is not present, the this.state will hold the old state
        console.log('rerender', this.state);
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>
            {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
        </div>)
    }
}

const mapStateToProps = function (store) {
    console.log('mapToStateProps', store);
    return {
        trajects: store.trajects
    };
};

const mapDispatchToProps = function (dispatch, ownProps) {
    return {
        onClick: function () {
            dispatch(addTraject());
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TrajectContainer);

当reducer返回新状态时，组件将使用新数据重新呈现。

但是：如果删除componentWillReceiveProps函数，则render（）函数将具有旧状态。

我检查了mapStateToProps中收到的数据，这是新的新状态。所以我不明白为什么我需要componentWillReceiveProps函数才能使render函数接收新数据。

难道我做错了什么？

Answer 1

componentWillReceiveProps 如果要使用新的props值更新状态值是必需的，则只要props值发生任何更改，都将调用此方法。

在您的情况下，为什么需要此componentWillReceiveProps方法？

因为您将props值存储在状态变量中，并像这样使用它：

this.state.KeyName

这就是为什么您需要componentWillReceiveProps生命周期方法来用新的props值更新状态值，仅组件的props值会更新，而
state不会自动更新 。如果不更新状态，this.state则将始终具有初始数据。

componentWillReceiveProps 如果您未在状态中存储props值并直接使用，则不需要

this.props.keyName

现在react将始终在render方法中使用更新的props值，如果props发生任何更改，它将使用新的props重新渲染组件。

根据 DOC ：

在已安装的组件接收新道具之前，将调用componentWillReceiveProps（）。如果您需要更新状态以响应道具更改（例如，将其重置），则可以比较this.props和nextProps并在此方法中使用this.setState（）执行状态转换。

在安装过程中，React不会使用初始道具调用componentWillReceiveProps。仅当某些组件的道具可能会更新时才调用此方法。

建议：

不要将props值存储在状态中，请直接使用this.props和创建ui组件。