05-react_class_component

今天我们这节课的目的就一个把之前的columnList 函数式组件改造成类组件，通过今天这节课你将学习到类组件的定义书写方式。

通过以下五步将 columnList 的函数组件转成 class 组件

  1. 创建一个同名的 ES6 class，并且继承于 React.Component。
  2. 添加一个空的 render() 方法。
  3. 将函数体移动到 render() 方法之中。
  4. 在 render() 方法中使用 this.props 替换 props。
  5. 删除剩余的空函数声明。
aTZ5TWtuclhaV080M1ROQ2VXTGorSWt0OUR3NE1iSDlPellpL2NrPQ==

React.Component的类型是react已经提前声明好的为 class React.Component<p={}, s={}, ss=any> （类函数）接收三个泛型变量 P 表示props， 指的是从父组件中传入的数据， s 指的是state 指的是组件自身定义的数据（下节课讲解他的概念），ss 表示自定义数据你可以在getSnapshot / BeforUpdata 生命周期的钩子函数中使用。我们可以通过这两个钩子函数在ui渲染之前就获取一些相应的DOM数据（关于生命周期的具体讲解我们会放在本章的最后几节）。

接下来你可以直接通过interface 定义这个组件的props ，state 数据类型。 目前我们所以在columnList中使用的数据都是父组件APP 传入的 所以先把state 留空。

Class 可以通过 extends关键字实现继承，让子类继承父类的属性和方法。

ES6 规定，子类必须在 constructor()方法中调用 super()，否则就会报错。这是因为子类自己的 this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用 super()方法，子类就得不到自己的 this对象。

为什么子类的构造函数，一定要调用 super()？原因就在于 ES6 的继承机制，与 ES5 完全不同。ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。这就是为什么 ES6 的继承必须先调用 super()方法，因为这一步会生成一个继承父类的 this对象，没有这一步就无法继承父类。