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

上一章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.srcmini.com' } this.handleEvent = this.handleEvent.bind(this); } handleEvent(){ console.log(this.props); } render() { return ( < div className="App"> < h2>React构造函数例子< /h2> < input type ="text" value=http://www.srcmini.com/{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> ); } }

【React构造函数constructor用法详解 – ReactJS实战教程】当你运行上面的代码时，会得到一个错误，在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.srcmini.com' } } handleEvent = () => { console.log(this.props); } render() { return ( < div className="App"> < h2>React构造函数例子< /h2> < input type ="text" value=http://www.srcmini.com/{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中传递给孩子。