在React中元件的創建
分為透過Class的Component (可使用state跟props)

import React, {Component} from 'react';

export default class SomeComponent extends Component {
    
    constructor(props){
        super(props);
        this.state = {name: 'Alice'};
    }
    
    render(){
        return <div>Hello {this.state.name}</div>
    }
    
}

和Function的Component (不能用state只能用props)

export default function SomeComponent(props){
    return <div>Hello {props.name}</div>
}

最大的區別是Function Component沒有任何自己的狀態，而是依賴於通過props參數傳遞給它的資訊。
因此當我們在外部父元件中調用時候可透過定義name來傳進function component

<SomeComponent name='Samuel'/>

React.js 在之後(React 16.8)引入了一種叫做 Hooks 的機制，改變了關於類和函數組件的“規則”，
即使在函數組件內部也可以與狀態交互。