Question

我无法理解为什么在将新的props传递给子组件时为什么不更新在构造函数中初始化的变量。

将新的道具发送到组件时，此数据保持为旧道具的值。（请注意，这只是一个示例，没有任何状态更改可演示，我知道使用状态是一种替代方法）

constructor(props) {
    super(props)
    this.data = this.props.receivedData 
}

  render() {
    console.log(this.props.receivedData) -> prints new props data
    console.log(this.data) -> retains old props data
    return (
      <svg
        ....
      </svg>
    )
  }

Answer 1

当传递新的prop时，构造函数不再被调用。过去，您可能会陷入componentWillReceiveProps生命周期方法中。但是，这被认为是最近的坏枣，您应该使用getDerivedStateFromProps方法。

请参见official docs。

This article在解释方面做得不错。

Answer 2

仅在创建组件并分配值时才第一次调用构造函数。下次您将以ComponenantWillReceiveProps(nextProps)方法接收道具。尝试以下代码：

 constructor(props) {
   super(props)
   this.data = this.props.receivedData;
}
ComponenantWillReceiveProps(nextProps){
    if(this.props.receivedData !== nextProps.receivedData){
         this.data = nextProps.receivedData;//new data will be updated here
      }
}
render() {
    console.log(this.props.receivedData)
    console.log(this.data)
    return (
      <svg
      </svg>
    )
 }

您可以使用状态来更新值并在接收到新数据时呈现视图。

例如：-

constructor(props) {
   super(props)
   this.data = this.props.receivedData;
   this.state = {
       data : this.props.receivedData
   };

}
ComponenantWillReceiveProps(nextProps){
    if(this.props.receivedData !== nextProps.receivedData){
         this.setState({data:nextProps.receivedData});//new data will be updated here
      }
}
render() {
    console.log(this.props.receivedData)
    console.log(this.data)
    return (
        <div>{this.state.data}</div>
    )
 }

Answer 3

在其他答案上再扩大一点。根据您要尝试执行的操作，有不同的处理方法。在其他答案说明的情况下，构造函数将只在组件的构造上运行一次。

现在，如果您想获取传入的道具并将其存储为状态，然后由于新的道具而使状态得以更新，则可能需要getDerivedStateFromProps。但是，如果这是您想要的，那么首先要知道为什么要这样做是很重要的，因为您可能不需要这样做。导致人们选择这种模式的一个常见原因是记忆道具，但是可以并且应该使用记忆库来实现。您可以了解有关此here.

的更多信息

之所以会选择此选项，另一个原因是，由于道具变更而导致组件的更新。现在，您已在问题中暗示了这一点，但是为了清楚起见，您需要做的就是使用传入的道具，并且当它们更改时，组件也会随之更新。换句话说，为了简单地渲染道具，没有理由将它们存储在状态或实例变量中。

反应：当新的props传递给组件

3 个答案: