React构造函数 - 芒果文档

📌 相关文章

📜 React构造函数

📅 最后修改于: 2020-12-19 03:55:31 🧑 作者: Mango

什么是构造函数?

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

构造函数的概念在React中是相同的。在安装组件之前，会调用React组件中的构造函数。在为React组件实现构造函数时，需要在其他任何语句之前调用super(props)方法。如果不调用super(props)方法，则this.props将在构造函数中未定义，并可能导致错误。

句法

Constructor(props){
     super(props);
}

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

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

注意：如果您既没有为React组件初始化状态也没有绑定方法，则无需为React组件实现构造函数。

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

例

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

App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
         data: 'www.javatpoint.com'
      }
    this.handleEvent = this.handleEvent.bind(this);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      
    React Constructor Example
    
        
      
    );
  }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

输出量

执行上面的代码时，将得到以下输出。

与构造函数有关的最常见问题是：

1.每个组件中是否都必须有一个构造函数?

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

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

2.是否有必要在构造函数中调用super()?

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

class App extends Component {
    constructor(props){
        this.fName = "Jhon"; // 'this' is not allowed before super()
    }
    render () {
        return (
             Name: { this.props.name }
        );
    }
}

当您运行上述代码时，您会收到一条错误消息，指出在super()之前不允许'this' 。因此，如果需要访问构造函数内部的props，则需要调用super(props)。

箭头功能

箭头函数是ES6标准的新功能。如果需要使用箭头功能，则无需将任何事件绑定到“ this”。在这里，“ this”的范围是全局的，并且不限于任何调用函数。因此，如果您使用的是箭头功能，则无需在构造函数中绑定“ this”。

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
         data: 'www.javatpoint.com'
      }
  }
  handleEvent = () => {
    console.log(this.props);
  }
  render() {
    return (
      
    React Constructor Example
    
        
      
    );
  }
}
export default App;

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

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

class App extends Component {
  constructor(props){
        // here, it is setting initial value for 'inputTextValue'
        this.state = {
            inputTextValue: 'initial value',
        };
  }
}

2)在构造函数中使用“ this”

class App extends Component {
    constructor(props) {
        // when you use 'this' in constructor, super() needs to be called first
        super();
        // it means, when you want to use 'this.props' in constructor, call it as below
        super(props);
    }
}

3)初始化第三方库

class App extends Component {
    constructor(props) {

        this.myBook = new MyBookLibrary();

        //Here, you can access props without using 'this'
        this.Book2 = new MyBookLibrary(props.environment);
    }
}

4)当您需要在道具中将类方法传递给孩子时，绑定一些上下文(this)。

class App extends Component {
    constructor(props) {

        // when you need to 'bind' context to a function
        this.handleFunction = this.handleFunction.bind(this);
    }
}