Reactjs 当道具改变时反应渲染

我试图在道具更改时渲染我的组件，不幸的是，即使道具未更改，它也会继续渲染，我的代码如下：

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)

componentDidUpdate（prevProps，prevState）{
if（prevProps.data！==此.props.data）{
this.props.getData（userID）
}
}
render（）{
//console.log（'render'）无限呈现，即使this.props.data保持不变
返回(
)
}
常量mapStateToProps=（状态）=>({
数据：state.api.data，
})
导出默认连接（MapStateTrops、mapDispatchToProps）（组件1）

我相信使用PureComponent而不是组件将确保组件仅在接收到新信息时呈现。我会这样做：

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}/>
      )
  }
}

import React，{PureComponent}来自“React”；
从“/Mycomponent”导入Mycomponent；
导出默认类包装器组件扩展PureComponent{
componentDidUpdate（prevProps、prevState）{
if（prevProps.data！==此.props.data）{
this.props.getData（userID）
}
}
render（）{
返回(
)
}
}

从

getDerivedStateFromProps

在调用render方法之前被调用，无论是在初始装载时还是在后续更新时。它应该返回一个对象来更新状态，或者返回null来不更新任何内容

你一定要用这个方法,

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

---

您应该确保没有更新任何数据。渲染也不是问题，只要你做得好，因为React已经很好地优化了它。即便如此，如果您想改进它，只要它不比不这样做更昂贵，您可以尝试将它作为一个类来执行：-React.memo（）-将组件传输到PureComponent（），您使用的是哪个版本的React？React version 16.8.3此.props.data包含非常复杂的数据结构getData函数中发生了什么？如果您正在更新getData函数中的数据，那么您的组件将进入无限循环。不幸的是，它仍然是一样的。