React Class & Functional Components

前幾篇有提到這兩種方式定義的組件，也有另外稱呼這兩者為Stateful & Stateless Components

在React16.8以前Functional Components沒有內部狀態(State)，所以是Stateless Components(沒有state元件的class也一樣)，這裡可以參考這篇的範例，可以明顯看出兩者方便性的差異。

渲染時機

對於class即使狀態沒有改變，只要使用setState Function就會觸發組件的渲染(render)，如果上面連結的範例改成：

export default class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Mark'
        }
        this.handleNameChange = this.handleNameChange.bind(this)
    }
 
    handleNameChange(e) {
        this.setState({
            name: 'Mark'
        })
    }
 

就算是值一樣，但有使用到setState()就會使組件重新渲染。

而Functional則是只有狀態值真正改變後，才會觸發render，所以有些情況可以擋掉一些不必要的渲染，另外還有一點是父子組件中，無論是class或functional，只要父組件重新渲染，子組件也會再渲染。