写法

一、Class

---

1.1 语法

import React, {Component} from 'react';

interface HelloWordProps {}
interface HelloWordState {}

class HelloWord extends Component<HelloWordProps, HelloWordState> {
    constructor(props: HelloWordProps) {
        super(props);
        this.state = {};
    }
}

export default HelloWord;

1.2 React Element

{
    $$typeof: Symbol(react.element)
    key: null
    props: {}
    ref: null
    type: ƒ ClassComponent()
        length: 0
        name: "ClassComponent"
        prototype: Component
        constructor: ƒ ClassComponent()
        render: ƒ render()
        isMounted: undefined
        replaceState: undefined
        [[Prototype]]: Object
            forceUpdate: ƒ (callback)
            isReactComponent: {}
            setState: ƒ (partialState, callback)
            constructor: ƒ Component(props, context, updater)
            isMounted: (...)
            replaceState: (...)
            get isMounted: ƒ ()
            get replaceState: ƒ ()
            [[Prototype]]: Object
            arguments: (...)
            caller: (...)
    [[FunctionLocation]]: index.js:15
    [[Prototype]]: ƒ Component(props, context, updater)
    [[Scopes]]: Scopes[4]
    _owner: null
    _store: {validated: false}
    _self: null
    _source: null
}

二、Function

---

2.1 语法

声明式语法

import React from 'react';

interface HelloWordProps {}

function HelloWord(props: HelloWordProps): JSX.Element {
    return <div />;
}

export default HelloWord;

表达式语法

import React, {FunctionComponent} from 'react';

interface HelloWordProps {}

const HelloWord: FunctionComponent<HelloWordProps> = () => <div />;

export default HelloWord;

2.2 React Element

{
    $$typeof: Symbol(react.element)
    key: null
    props: {}
    ref: null
    type: ƒ FunctionComponent()
    _owner: null
    _store: {validated: false}
    _self: null
    _source: null
    [[Prototype]]: Object
}

三、Class Vs Function

---

它们都可以接收属性并且返回React元素, 它们的主要区别有以下几点:

1. 编写形式: 两者最明显的区别在于编写形式的不同，同一种功能的实现可以分别对应类组件和函数组件的编写形式

2. 底层原理: 在 beginWork 向下调和阶段, 遇到类组件, 获取类实例, 运行 render 方法; 遇到函数组件, 执行函数。

3. 状态管理: 从第二点可以看出, 类组件状态可以保存在类实例上, 函数组件状态保存到函数组件 fiber.memorizedState 上

4. 生命周期: 从第二点可以看出, 类组件继承自 React.Component, 所以继承了相应的生命周期钩子。函数组件实现了类似生命周期的 Hooks, 比如 useEffect, 多个 useEffect Hooks 保存在函数组件 fiber.memorizedState 上