考虑以下React Component片段,我需要根据新的props和当前状态设置新的组件状态。在定义基于旧状态的新状态时,最好使用“更新程序”功能,现在我的困惑是我有nextProps
生命周期方法的componentWillReceiveProps
参数,但更新程序功能另外,获取props
参数。 我应该使用哪一个?
现在我想这应该是针对React 16.2的;我猜测在React 16.3中引入新的getDerivedStateFromProps(nextProps, prevState)
静态方法应该消除这种混淆(对吗?)
class MyComponent extends Component {
constructor(props, ...args) {
super(props, ...args);
this.state = {
value: props.value,
};
}
componentWillReceiveProps(nextProps) {
this.setState((prevState, props) => {
return {
value: (/* `nextProps or props` */).value,
}
});
}
render() {
// ...
}
}
答案 0 :(得分:0)
确实存在相同的事情。如果您想访问以前的道具,this.props
仍然在componentWillReceiveProps
方法中未触动。
我的直觉是setState
不会立即在componentWillReceiveProps
方面发射。
让我们考虑下面的例子
首次点击后,curProps
将 0 ,props
,nextProps
都会返回 1 。
class Test extends Component {
state = {
value: 0
};
componentWillReceiveProps(nextProps) {
const curProps = this.props;
this.setState((prevState, props) => {
console.log('[curProps]', curProps.num);
console.log('[props]', props.num);
console.log('[nextProps]', nextProps.num);
const value = prevState.value + nextProps.num;
return {
value
};
});
}
render() {
return <h4>{this.state.value}</h4>;
}
}
class App extends Component {
state = {
value: 0
};
render() {
return (
<div>
<Test num={this.state.value} />
<button onClick={this.onClick}>Add</button>
</div>
);
}
onClick = () => {
this.setState(prevState => ({ value: prevState.value + 1 }));
};
}
&#13;
有codeandbox demo https://codesandbox.io/s/zxpovzkywx