reactjs - 何时使用 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中收到的数据，这是新的New State。所以我不明白为什么我需要 componentWillReceiveProps 函数才能让渲染函数接收新数据。

我做错了什么吗？

Answer 1

如果您想使用新的 props 值更新状态值，则需要componentWillReceiveProps，每当 props 值发生任何更改时都会调用此方法。

<小时/>

In your case why you need this componentWillReceiveProps method?

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

this.state.KeyName

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

如果您不将 props 值存储在 state 中并直接使用，则不需要

componentWillReceiveProps:

this.props.keyName

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

根据 DOC :

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update.

建议:

不要将 props 值存储在 state 中，直接使用 this.props 并创建 ui 组件。