其中大部分是 JavaScript ES6 及其特性和语法,还包括三元运算符、简化的语法、this 对象、JavaScript 内置函数(map、reduce、filter)或更一般的概念,如可组合性、可重用性、不变性或高阶函数。在刚开始接触 React 之前,你可能不需要掌握这些基础知识,但在学习或实践过程中肯定需要用到它们。
React 和 JavaScript 类
关于 React 类组件,需要用到有关 JavaScript 类的先验知识。JavaScript 类的概念相对较新。之前,只有 JavaScript 的原型链可用于实现继承。JavaScript 类以原型继承为基础,让继承体系变得更简单。
定义 React 组件的一种方法是使用 JavaScript 类。
class Developer { constructor(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } getName() { return this.firstname + ' ' + this.lastname; } } var me = new Developer('Robin', 'Wieruch'); console.log(me.getName());
一个类描述了一个实体,用于创建实体的实例。在使用 new 语句创建类的实例时,会调用这个类的构造函数。类的属性通常位于构造函数中。此外,类方法(例如 getName())用于读取(或写入)实例的数据。类的实例在类中使用 this 对象来表示,但在外部,仅指定给 JavaScript 变量。
在面向对象编程中,类通常用来实现继承。在 JavaScript 中也一样,extends 语句可用于让一个类继承另一个类。一个子类通过 extends 语句继承了一个父类的所有功能,还可以添加自己的功能。
class Developer { constructor(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } getName() { return this.firstname + ' ' + this.lastname; } } class ReactDeveloper extends Developer { getJob() { return 'React Developer'; } } var me = new ReactDeveloper('Robin', 'Wieruch'); console.log(me.getName()); console.log(me.getJob());