类组件和函数组件

类组件

可以使用ES6 的Class语法 来定义组件

Component类组件

import React,{Component,PureComponent} from 'react';

interface Props{};
interface State{};

export default class App extends Component<Props,State>{
    render(){
        renturn(<div>我是类组件App</div>)
    }
} 

PureComponent类组件

PureComponent会自动比较新旧 state/props ，如果相同则不进行render渲染

import React,{Component,PureComponent} from 'react';

interface Props{};
interface State{};

export default class App extends PureComponent<Props,State>{
    render(){
        renturn(<div>我是类组件App</div>)
    }
} 

函数组件

推荐写法

  import React, { FC } from 'react';

  interface IAppProps {}

  const App: FC<Partial<IAppProps>> = () => {
    return <div></div>
  }

  export default App 

为什么react要选择函数组件来代替类组件呢？

• 优点

  • 1. 原生js特点： 函数式编程
  • 2. 函数组件理解度，入门门槛较低，带来更多的开发者参与到react的开发中
  • 3. 函数组件的出现不会影响类组件的使用
    • 老项目更新可以直接使用函数组件
  • 4. 函数组件结构简单

• 缺点

  • 类组件的特性功能函数组件无法使用
    • state的定义和修改【setState】
    • 生命周期无法使用
    • ref不能用
    • 跨组件通信不能使用
  • 两种使用方式 - 对于函数组件
    • 早期 — react 16.8版本前
      • 渲染界面 - 简单
    • 现在 — react 16.8版本后
      • 函数组件 + react Hook react特性可以在函数组件使用了