如果你只想触发它一次,你可以这样做。
componentDidUpdate(pProps){
if(!pProps.map && this.props.map){
this.props.callSomeFunc();
}
}
或者您可以使用before render函数。
componentWillRecieveProps(nProps){
if(!this.props.map && nProps.map){
this.props.callSomeFunc();
}
}
如果你想知道何时调用函数(表示已经创建但已更改为其他内容)请使用以下方法:
if( (!pProps.map && this.props.map) || (this.props.map !== pProps.map){
(如果它是一个对象,您可能需要将第二个比较更改为深层比较)
这两个函数都涉及组件更新前后的上一个或下一个状态的概念。
componentDidUpdate
表示渲染已完成并且组件已更新。它有两个参数可以包含在函数中 (prevProps, prevState)
,它是组件更新之前的先前 props 和 state。
另外,componentWillReceiveProps
有相反的一面 (nextProps, nextState)
使用这两个函数,我们可以比较组件的前一个属性或下一个属性,并查看是否在设置地图时进行了转换(即一个未定义,另一个不是)
编辑:
为了可视化正在发生的事情,以便您知道下一个 props 是什么(nProps),请查看此内容。
count = 1;
<SomeComponent count={count} />
现在在 SomeComponent 内部
class SomeComponent extends React.Component {
componentWillReceiveProps(nProps){
console.log(this.props.count);
console.log(nProps.count);
}
}
SomeComponent.defaultProps = {count: 0};
现在假设我们将5添加到计数中。
componentWillReceiveProps(nProps){
console.log(this.props.count);
console.log(nProps.count);
}
它基本上是在您实际使用新属性进行呈现之前执行的。this.props.count 是组件中的当前值。而 nextProps.count(nProps.count)是要传入的下一个值。希望这有助于解释其工作原理! :)