react中利用构造函数与利用class关键字创建组件的区别，以及使用的选择

77 阅读 0 评论 51 点赞

我是靠谱客的博主甜蜜花生，最近开发中收集的这篇文章主要介绍react中利用构造函数与利用class关键字创建组件的区别，以及使用的选择，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在react中，我们通常在创建组件时有以下两种形式：

// class关键字创建组件
import React from 'react';
export default class AppDemo extends React.Component {
  render () {
    return (
      <div>demo</div>
    )
  }
}
// 构造函数形式创建组件
import React from 'react';
export default function AppDemo (props) {
  return (
    <div>demo</div>
  )
}

它们两者在创建时候的区别有哪些呢？
1）使用构造函数创建的组件时，只有props，没有自己的私有数据（this.state）和生命周期函数
2）使用class创建的组件，可以接收向组件传递的props外，也有自己的私有数据（this.state）和生命周期函数
注：用构造函数创建的组件是无状态组件，用class创建的组件是有状态组件。有无状态的组件本质的区别是有无state和有无生命周期函数。
props是外界传递的，是只读的；而state/data数据是组件私有的，可读可写。

// class关键字创建组件
import React from 'react';
export default class AppDemo extends React.Component {
  constructor (props) {
    // 由于创建组件时继承了React.Component父类，所以需要调用super.调用super之后才能使用this
    super();
    this.state = {
      name: '测试组件'
    } // this.state = {}; 这句话就相当于vue中data () { return {}}
  }
  render () {
    // 组件中的this 指向的是创建的组件对象
    return (
      <div>demo {this.state.name}</div>
    )
  }
}

组件使用的选择
如果一个组件，需要使用自己的私有数据，则推荐使用有状态组件；如果一个组件不需要使用自己的私有数据，则推荐使用无状态组件。
React官网说：由于无状态组件无state和生命周期，在运行时效率比有状态组件高。

但指不定哪天需要用状态，所以推荐直接使用class创建组件。

另super的用法
1) 为什么要调用super
2) super是什么
3) 调用super时为什么会出现undefined

答：
1) 因为子类使用了extend关键字继承父类，按照语法规则，必须在constructor中优先调用super
2) super是一个函数，它是父类的构造器。子类的super函数，其实就是父类constructor函数的引用
3) 子类super需要传递对应的参数给父类的constructor函数

完结。