React教程

React 构造函数

构造函数是一种用于初始化类中对象状态的方法。在类中创建对象时会自动调用它。
构造函数的概念在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.lidihuo.com'
      }
    this.handleEvent = this.handleEvent.bind(this);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
    <h2>React Constructor Example</h2>
    <input type ="text" value={this.state.data} />
        <button onClick={this.handleEvent}>Please Click</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'));
输出
执行上述代码时,您将获得以下输出。
React构造函数
与构造函数有关的最常见问题是:
1、
否,没有必要在每个组件中都有一个构造函数。如果组件不复杂,则仅返回一个节点。
class App extends Component {
    render () {
        return (
            <p> Name: { this.props.name }</p>
        );
    }
}
2、是的,有必要在构造函数内调用super()吗?
是的。如果需要设置属性或在组件的构造函数内部访问" this",则需要调用super()。
class App extends Component {
    constructor(props){
        this.fName = "Jhon"; // 'this' is not allowed before super()
    }
    render () {
        return (
            <p> Name: { this.props.name }</p>
        );
    }
}
运行上面的代码时,您收到一条错误消息,提示在super()之前不允许'this'。因此,如果需要访问构造函数内部的props,则需要调用super(props)。

箭头函数

Arrow函数是的新功能ES6标准。如果需要使用箭头功能,则无需将任何事件绑定到" this"。在这里," this"的范围是全局的,不限于任何调用函数。因此,如果您使用的是Arrow Function,则无需在构造函数中绑定" this"。
import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
         data: 'www.lidihuo.com'
      }
  }
  handleEvent = () => {
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
    <h2>React Constructor Example</h2>
    <input type ="text" value={this.state.data} />
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}
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)当您需要将prop中的类方法传递给孩子时,请绑定某些上下文(此)。
class App extends Component {
    constructor(props) {
        // when you need to 'bind' context to a function
        this.handleFunction = this.handleFunction.bind(this);
    }
}

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4