但如果是單純 render UI 建議使用 Functional Component 寫法,效能較佳且較簡潔
import React from ‘react’;
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
export default HelloWorld;
幾個重點
- 不需要 ES6 class
- 不需要
bind(this)
- 強制 best practices 無狀態組件更專注於 UI render 之類的行為,如果要做狀態管理或生命週器應該由更高階的組件(HOC)去實作
- 更容易理解
- 更方便測試
- 只需要 props 和 render