何时使用 componentWillReceiveProps 生命周期方法? [英] When to use componentWillReceiveProps lifecycle method?

问题描述

我是 React/Redux 的新手，对状态有疑问.

I am new to React/Redux and have a problem with state.

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 返回新状态时，组件将使用新数据重新渲染.

When a reducer returns a new state, the component will rerender with the new data.

但是:如果我删除 componentWillReceiveProps 函数，render() 函数将具有旧状态.

However: if I remove the componentWillReceiveProps function, the render() function has the old state.

我检查了 mapStateToProps 中收到的数据，这是新的 New State.所以我不明白为什么我需要 componentWillReceiveProps 函数才能让渲染函数接收新数据.

I checked the data received in mapStateToProps, and this is new New State. So I don't understand why I need the componentWillReceiveProps function in order for the render function to receive the new data.

我做错了什么吗?

推荐答案

componentWillReceiveProps 如果你想用新的 props 值更新状态值，这个方法会在发生任何变化时被调用道具值.

componentWillReceiveProps is required if you want to update the state values with new props values, this method will get called whenever any change happens to props values.

在你的情况下，你为什么需要这个 componentWillReceiveProps 方法?

In your case why you need this componentWillReceiveProps method?

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

Because you are storing the props values in state variable, and using it like this:

this.state.KeyName

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

That's why you need componentWillReceiveProps lifecycle method to update the state value with new props value, only props values of component will get updated but automatically state will not get updated. If you do not update the state then this.state will always have the initial data.

componentWillReceiveProps 如果不将 props 值存储在 state 中直接使用:

componentWillReceiveProps will be not required if you do not store the props values in state and directly use:

this.props.keyName

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

Now react will always use updated props values inside render method, and if any change happen to props, it will re-render the component with new props.

根据DOC:

As per DOC:

componentWillReceiveProps() 在安装组件之前被调用获得新道具.如果您需要更新状态以响应prop 更改(例如，重置它)，您可以比较 this.props和 nextProps 并使用 this.setState() 执行状态转换这种方法.

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 不使用初始道具调用 componentWillReceiveProps安装.仅当某些组件的 props 可能时才调用此方法更新.

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

建议:

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

Do not store the props values in state, directly use this.props and create the ui components.

这篇关于何时使用 componentWillReceiveProps 生命周期方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！