React 的组件可以定义为 函数（React.FC<>）或class（继承 React.Component） 的形式。
 
 
一、React.FC<>
 
1.React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：
 
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);
 
2.React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。
 
3.React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。
 
4.我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。
 
例子（这里使用阿里的Ant Desgin Pro框架来演示）：
 
const SampleModel: React.FC<{}> = () =>{   //React.FC<>为typescript使用的泛型
  	const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
  	return{
  	{/** 触发模态框**/}
  	<Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >样例</Button>
  	{/** 模态框组件**/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }
 
二、class xx extends React.Component
 
如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（aka React.Component<PropType, StateType>），因此要为其提供（可选）prop和state类型参数：
 
例子（这里使用阿里的Ant Desgin Pro框架来演示）：：
 
class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  {/** 触发模态框**/}
  	<Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
  	{/** 模态框组件**/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }
 
ps：简单来说，不知道用什么组件类型时，就用 React.FC。

1.npm install -g create-react-app
 // 如果很久之前安装过，建议卸载重新安装 npm uninstall -g create-react-app
 2.npx create-react-app my-app --template typescript
 // 这样创建出来的项目就是基于TS的
 3. cd my-app
 4. yarn start
 
npm install -g create-react-app
npx create-react-app my-app --template typescript
cd my-app
yarn start

经测试，echarts for react不支持echarts最新版本5.0.0因此引入4.9.0
 
npm install echarts@4.9.0
 
npm install echarts-for-react@2.0.16
 
依赖安装好即可使用：
 
import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import ReactEcharts from 'echarts-for-react';

const DemoColumn: React.FC<any> = () => {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }]
  };
  const click1 = (value:any) => {
    console.log(value)
  }
  const events = {
    'click':click1
  }
  return (
    <div>
      <Card title="折线图表之一">
        <ReactEcharts
          option={option}
          onEvents={events} />
      </Card>
    </div>
  )
};
export default DemoColumn;
 
运行效果：
 

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。
 
而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。
 
首先来看一下它传统的用法：
 
import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
    console.log(couterRef.current);
  }, [count]);
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}
 
代码中用useRef创建了couterRef对象，并将其赋给了button的ref属性。这样，通过访问couterRef.current就可以访问到button对应的DOM对象。
 
然后再来看看它保存数据的用法。
 
在一个组件中有什么东西可以跨渲染周期，也就是在组件被多次渲染之后依旧不变的属性？第一个想到的应该是state。没错，一个组件的state可以在多次渲染之后依旧不变。但是，state的问题在于一旦修改了它就会造成组件的重新渲染。
 
那么这个时候就可以使用useRef来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染。
 
import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const timerID = useRef();
  
  useEffect(() => {
    timerID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  useEffect(()=>{
      if(count > 10){
          clearInterval(timerID.current);
      }
  });
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}
 
在上面的例子中，我用ref对象的current属性来存储定时器的ID，这样便可以在多次渲染之后依旧保存定时器ID，从而能正常清除定时器。