Question

在功能组件中，我们在组件内部声明函数。它在每个渲染中创建新功能。但是在类组件中，它被添加到组件原型中并重用该功能。它会导致任何与内存相关的问题吗？

function Text({name,value}){
   function onChange(e){
         onChange(name,e.target.value);
   }
   return <input name={name} type="text" onChange={onChange}/>
}

class Text extend React.Component{
  constructor(props){
     super(props);
     this.onChange=this.onChange.bind(this)
  }
   onChange(e){
     this.props.onChange(this.props.name,e.target.value)
   }
  render(){
    return <input type={text} onChange={this.onChange} value={this.props.value}/>
  }
}

以上方法还可以，还是必须遵循其他最佳做法？

谢谢

Answer 1

与您的功能组件更接近的React类组件：

function Text({name, value, onChange}){
   function onChange(e){
         onChange(name,e.target.value);
   }
   return <input name={name} type="text" onChange={onChange}/>
}

不是问题的组成部分，但这是

class Text extend React.Component{
  constructor(props){
     super(props);
  }
  render(){
    function onChange(e){
         this.props.onChange(this.props.name,e.target.value);
    }
    return <input type={text} onChange={onChange} value={this.props.value}/>
  }
}

在render中声明一些新内容是正常的；我经常看到人们在渲染之前创建变量以对道具或状态进行过滤，而性能上的差异并不明显。就您而言，如果功能组件中的onChange函数很简单，那么这没什么大不了的。

替代解决方案将使用PureComponent代替功能组件：

class Text extend React.PureComponent{
  constructor(props){
     super(props);
     this.onChange=this.onChange.bind(this)
  }
   onChange(e){
     this.props.onChange(this.props.name,e.target.value)
   }
  render(){
    return <input type={text} onChange={this.onChange} value={this.props.value}/>
  }
}

功能组件是否引起内存问题？

1 个答案: