React构造函数constructor用法详解 – ReactJS实战教程

上一章ReactJS实战教程请查看：React状态state和属性props之间的区别

构造函数是什么？

构造函数是用于在类中初始化对象状态的方法，它在类中对象创建期间自动调用。

构造函数的概念在React中是相同的，React组件中的构造函数在组件挂载之前被调用。实现React组件的构造函数时，需要在任何其他语句之前调用super(props)方法。如果不调用super(props)方法，则执行此操作。在构造函数中未定义props，可能会导致bug。

语法

Constructor(props){  
     super(props);  
}  

在React中，构造函数主要用于两个目的：

• 它用于通过向this.state分配对象来初始化组件的本地状态。
• 它用于绑定组件中出现的事件处理程序方法。

注意：如果你的React组件既不初始化状态，也不绑定方法，那么就不需要实现React组件的构造函数。

不能在构造函数()中直接调用setState()方法。如果组件需要使用本地状态，则需要直接使用’this.state ‘，在构造函数中分配初始状态。构造函数只使用这个来分配初始状态，所有其他方法都需要使用set.state()方法。

例子

构造函数的概念可以从下面的示例中理解。

App.js

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.srcmini02.com'  
      }  
    this.handleEvent = this.handleEvent.bind(this);  
  }  
  handleEvent(){  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React构造函数例子</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>点击</button>  
      </div>  
    );  
  }  
}  
export default App;  

main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App />, document.getElementById('app'));  

与构造函数相关的最常见的问题是:

1. 有必要在每个组件中都有一个构造函数吗？

不，没有必要在每个组件中都有一个构造函数。如果组件不复杂，它只返回一个节点。

class App extends Component {  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}  

2. 有必要在构造函数中调用super()吗？

是的，有必要在构造函数中调用super()。如果需要在组件的构造函数中设置属性或访问’this’，则需要调用super()。

class App extends Component {  
    constructor(props){  
        this.fName = "Jhon"; // this'在super()之前是不允许的  
    }  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}  

当你运行上面的代码时，会得到一个错误，在super()之前不允许使用’this’。因此，如果需要访问构造函数中的道具，需要调用super(props)。

箭头函数

箭头函数是ES6标准的新特性。如果需要使用箭头函数，则没有必要将任何事件绑定到’this ‘。在这里，“this”的范围是全局的，不局限于任何调用函数。因此，如果你使用的是箭头函数，就不需要在构造函数中绑定’this’。

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.srcmini02.com'  
      }  
  }  
  handleEvent = () => {  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React构造函数例子</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>点击</button>  
      </div>  
    );  
  }  
}  
export default App;  

我们可以通过以下方式使用构造函数:

1、构造函数用于初始化状态。

class App extends Component {  
  constructor(props){  
        // 这里，它为inputTextValue设置了初始值
        this.state = {  
            inputTextValue: 'initial value',  
        };  
  }  
}  

2、在构造函数内部使用“this”

class App extends Component {  
    constructor(props) {  
        // 在构造函数中使用'this'时，需要首先调用super()  
        super();  
        // 它的意思是，当你想用“this”的时候。在构造函数中，调用如下 
        super(props);  
    }  
}  

3、初始化第三方库

class App extends Component {  
    constructor(props) {  
  
        this.myBook = new MyBookLibrary();  
  
        //在这里，你可以不使用“this”来访问props
        this.Book2 = new MyBookLibrary(props.environment);  
    }  
}  

4、绑定一些上下文(this)，当你需要一个类方法在props中传递给孩子。

class App extends Component {  
    constructor(props) {  
  
        // 需要将上下文绑定bind到函数时  
        this.handleFunction = this.handleFunction.bind(this);  
    }  
}