Nic Lin's Blog

喜歡在地上滾的工程師

React Stateless Functional Components

但如果是單純 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

參考

comments powered by Disqus