您的位置: 首页  >  文章  >  React中constructor(){}

React中constructor(){}

分类: 文章 • 2024-09-14 09:57:52

当你在React class中需要设置state的初始值或者绑定事件时

需要加上constructor(){}

[javascript] view plain copy
  1. constructor() {  
  2.         this.state = {searchStr: ''};  
  3.         this.handleChange = this.handleChange.bind(this);  
  4.     }  

但当你运行时，是会出现问题的。


React中constructor(){}

提示没有在this之前加上super()

其实就是少了super()，导致了this的 Reference Error

[objc] view plain copy
  1. class MyComponent extends React.Component {  
  2.   constructor() {  
  3.     console.log(this); // Reference Error  
  4.   }  
  5.   
  6.   render() {  
  7.     return <div>Hello {this.props.name}</div>;  
  8.   }  
  9. }  


个人理解super()是继承了整个类的一个引用(希望知道的帮忙解释下)

正确的姿势应该是这样

[javascript] view plain copy
  1. constructor() {  
  2.         super();  
  3.         this.state = {searchStr: ''};  
  4.         this.handleChange = this.handleChange.bind(this);  
  5.     }  

那么React的官方例子中都是加上了props作为参数

[javascript] view plain copy
  1. constructor(props) {  
  2.         super(props);  
  3.         this.state = {searchStr: ''};  
  4.         this.handleChange = this.handleChange.bind(this);  
  5.     }  


那它们的区别在哪儿呢

What's the difference between “super()” and “super(props)” in React when using es6 classes?

借用下stackoverflow上的解释

There is only one reason when one needs to pass props to super():

When you want to access this.props in constructor.

(Which is probably redundant since you already have a reference to it.)


意思是说
只有一个理由需要传递props作为super()的参数，那就是你需要在构造函数内使用this.props

那官方提供学习的例子中都是写成super(props)，所以说写成super(props)是完全没问题的，也建议就直接这样写

相关推荐