React.js，事件监听器onChange for Specific Prop？

Question

我想在React组件上设置this.props.map时触发一个函数 - 使用ES6类语法定义：

export default class MapForm extends React.Component {...

目前，我正在使用componentDidUpdate()因为它是在设置props时触发的 - 但它也是由其他不相关的事件触发的，这是不理想的。

另一方面， componentWillReceiveProps()发生在组件的生命周期的早期（ this.props.map返回undefined ）

所以我想只在设置this.props.map时触发一个函数。

我错过了一个钩子吗？ 或者某种模式？

Answer 1

如果你只想触发一次 。 你可以这样做

componentDidUpdate(pProps){
    if(!pProps.map && this.props.map){
        this.props.callSomeFunc();
    }
}

或者您可以使用之前的渲染功能

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) ，它是更新之前的组件的先前道具和状态。

或者componentWillReceiveProps有相反的一面(nextProps, nextState)

使用这两个我们可以比较之前的道具或组件的下一个道具，并查看是否设置了地图（也就是一个未定义，另一个不是）

---

编辑：

想象一下发生了什么，这样你就知道下一个道具（nProps）看到了什么。

count = 1;
<SomeComponent count={count} />

现在在SomeComponent中

class SomeComponent extends React.Component {

    componentWillReceiveProps(nProps){
        console.log(this.props.count); // logs 0
        console.log(nProps.count);  // logs 1
    }
}
SomeComponent.defaultProps = {count: 0};

现在我们假设我们加5来计算。

componentWillReceiveProps(nProps){
    console.log(this.props.count); // logs 1
    console.log(nProps.count);  // logs 6
}

基本上它在你用新道具实际渲染之前执行。 this.props.count是组件中的当前值。 和nextProps.count（nProps.count）是下一个值。希望这有助于解释它是如何工作的！ :)