道具更改時反應渲染

Question

我試圖在僅更改props時渲染我的組件，不幸的是，即使props不變，它也保持渲染，我的代碼如下：

componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
   //console.log('render') infinite rendering even when this.props.data is unchanged 
       return(
          <Mycomponent data={this.props.data}/>
      )
  }

const mapStateToProps = (state) => ({
    data: state.api.data,

})

export default connect(mapStateToProps, mapDispatchToProps)(Component1)

Answer 1

我相信使用PureComponent而不是Component可以確保該組件僅在收到新信息時才呈現。 這就是我要做的：

import React, { PureComponent } from "react";
import Mycomponent from "./Mycomponent";

export default class WrapperComponent extends PureComponent {
  componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
       return(
          <Mycomponent data={this.props.data}/>
      )
  }
}

Answer 2

從文檔中 ，

在初始安裝和后續更新上，都在調用render方法之前立即調用getDerivedStateFromProps 。 它應該返回一個對象以更新狀態，或者返回null則不更新任何內容。

您必須使用此方法，

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     //do something
  }
  else return null;
}