使用React来编写Class组件

Js编写的React Class组件

import React from 'react';
class MyComponent extends React.Component {
  state = {
    // 初始化值
    count: 0,
  };
  click = () => {
    this.setState(preState => ({
      count: preState.count + 1,
    }));
  };
  render() {
    return <div onClick={this.click}>{this.state.count}</div>;
  }
}
export default MyComponent;

Ts编写的React Class组件

import React from 'react';
//定义props的了类型
type MyProps = {
  message: string;
};
//定义state的类型
type MyState = {
  count: number;
};
class MyComponent extends React.Component<MyProps, MyState> {
  state: MyState = {
    //初始化值
    count: 0,
  };
  click() {
    this.setState(preState => ({
      count: preState.count + 1,
    }));
  }
  render() {
    const { count } = this.state;
    return <div onClick={this.click}>{count}</div>;
  }
}
export default MyComponent;

讲解

在Js中我们编写class组件会写一个类去继承React.Component，在Ts中React.Component是一个范型类型，

React.Component,你可以传入自己写的约束，当然，这是可选的，要是不传，默认就是any类型。当我们传入了范型后,第一个范型的作用就是当使用这个组件的时候，会对props进行检查和提示，第二个范型的作用是在我们使用this.setState()的时候,会进行类型检查。

一些注意点

• 我们的一些类型我们是可以在一些文件中导出和在使用的地方就行导入，达到复用的效果。
• 在Ts编写的class组件中，主要类方法的调用时候，一定要注意参数，有参数的方法一定要传入参数。

  总结

  在使用Ts开发Class组件的时候，其实很简单，就是注意React.Component是个范型类型，然后需要注意的就是编写类的方法的时候，有参数的就需要参数的类型，和调用有参数的方法的时候，一定要注意。