我们可以使用哪种组件方法来根据prop值的变化设置状态?我知道我们可以使用componentWillRecieveProps,但是它将不推荐使用,因此我们可以将其用作componentWillRecieveProps的替代方法。还请发布一个简单的代码示例
答案 0 :(得分:3)
您现在可以在类组件中使用static getDerivedStateFromProps(props, state)
来自docs的示例:
static getDerivedStateFromProps(props, state) {
// Any time the current user changes,
// Reset any parts of state that are tied to that user.
// In this simple example, that's just the email.
if (props.userID !== state.prevPropsUserID) {
return {
prevPropsUserID: props.userID,
email: props.defaultEmail
};
}
return null;
}
答案 1 :(得分:0)
您可以使用componentDidUpdate
方法
componentDidUpdate(prevProps, prevState) {
if (prevProps.data !== this.props.data) {
//do something
}
}
答案 2 :(得分:0)
border
答案 3 :(得分:0)
getDerivedStateFromProps
它是在React 16.3中引入的以替换:
componentWillReceiveProps
在反应17中将弃用,现在变成
UNSAFE_componentWillReceiveProps
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.someValue!==prevState.someValue){
return { someState: nextProps.someValue};
} else return null;
}
此生命周期方法将前一个道具和下一个道具作为输入,并返回派生状态。
此方法是静态的,因此您不能在内部使用this
。
有关更多信息,请阅读Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’