React 中被忽略的函數組件（Functional Components）

wuyumin 發布于2019-08-20 18:16 / 2184人閱讀

摘要：函數組件中沒有。目前還是會把函數組件在內部轉換成類組件，所以使用函數組件和使用類組件在性能上并無大的差異。函數組件迫使你思考最佳實踐。組件的主要職責是渲染，理想情況下，所有的組件都是展示性組件，每個頁面都是由這些展示性組件組合而成。

React中有兩種組件：函數組件（Functional Components) 和類組件（Class Components）。據我觀察，大部分同學都習慣于用類組件，而很少會主動寫函數組件，包括我自己也是這樣。但實際上，在使用場景和功能實現上，這兩類組件是有很大區別的。

來看一個函數組件的例子：

function Welcome = (props) => {
  const sayHi = () => {
    alert(`Hi ${props.name}`);
  }

  return (
      
        Hello, {props.name}
        
      
  )
}

把上面的函數組件改寫成類組件：

import React from "react"

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }
  
  sayHi() {
    alert(`Hi ${this.props.name}`);
  }
  
  render() {
    return (
      
        Hello, {this.props.name}
        
      
    )
  } 
}

下面讓我們來分析一下兩種實現的區別：

第一眼直觀的區別是，函數組件的代碼量比類組件要少一些，所以函數組件比類組件更加簡潔。千萬不要小看這一點，對于我們追求極致的程序員來說，這依然是不可忽視的。

函數組件看似只是一個返回值是DOM結構的函數，其實它的背后是無狀態組件（Stateless Components）的思想。函數組件中，你無法使用State，也無法使用組件的生命周期方法，這就決定了函數組件都是展示性組件（Presentational Components），接收Props，渲染DOM，而不關注其他邏輯。

函數組件中沒有this。所以你再也不需要考慮this帶來的煩惱。而在類組件中，你依然要記得綁定this這個瑣碎的事情。如示例中的sayHi。

函數組件更容易理解。當你看到一個函數組件時，你就知道它的功能只是接收屬性，渲染頁面，它不執行與UI無關的邏輯處理，它只是一個純函數。而不用在意它返回的DOM結構有多復雜。

性能。目前React還是會把函數組件在內部轉換成類組件，所以使用函數組件和使用類組件在性能上并無大的差異。但是，React官方已承諾，未來將會優化函數組件的性能，因為函數組件不需要考慮組件狀態和組件生命周期方法中的各種比較校驗，所以有很大的性能提升空間。

函數組件迫使你思考最佳實踐。這是最重要的一點。組件的主要職責是UI渲染，理想情況下，所有的組件都是展示性組件，每個頁面都是由這些展示性組件組合而成。如果一個組件是函數組件，那么它當然滿足這個要求。所以牢記函數組件的概念，可以讓你在寫組件時，先思考這個組件應不應該是展示性組件。更多的展示性組件意味著更多的組件有更簡潔的結構，更多的組件能被更好的復用。

所以，當你下次在動手寫組件時，一定不要忽略了函數組件，應該盡可能多地使用函數組件。

歡迎關注我的公眾號：老干部的大前端，領取21本大前端精選書籍！

云服務器 GPU云服務器函數式組件 php忽略警告的設置 Functional Components

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84263.html

[譯] React組件是采用Functional 還是 Class編寫 ?

摘要：在里面有兩種組件類組件和函數式組件兩者有明顯的區別比如是屬于的類是一個函數它返回一個組件什么是先看一段代碼這是一個函數式組件它和類組件最關鍵的區別就是函數式組件沒有和一系列的鉤子函數這也是函數式組件經常被用作無狀態組件的原因在React里面有兩種組件, Class components(類組件) 和 Functional components(函數式組件).兩者有明顯的區別,比如 ...

Integ 2019-08-23 17:07 評論0 收藏0
2017-07-25 前端日報

摘要：前端日報精選三思而后行想提高團隊技術，來試試這個套路如何開發一個插件學習筆記塊級作用域綁定譯文詳解帶來的個重大變化中文周二放送畫圖知乎專欄第期新特性譯配置譯高性能視差滾動行代碼構建區塊鏈知乎專欄渲染器修仙之路之拷貝對象已 2017-07-25 前端日報精選 SSR 三思而后行想提高團隊技術，來試試這個套路！如何開發一個 Atom 插件ES6學習筆記：塊級作用域綁定【譯文】詳解VUE2...

bluesky 2019-08-20 18:17 評論0 收藏0
2017-07-16 前端日報

摘要：前端日報點贊通道精選聽說你沒來騰訊前端求職直播課筆試篇淘寶漏洞修補記一次踩坑記錄中的對象精讀發布中文深入理解筆記塊級作用域綁定架構經驗分享深入理解筆記字符串和正則表達式架構經驗分享深入理解筆記導讀架構經驗分享第期種使用提升應 2017-07-16 前端日報 GitHub點贊通道精選聽說你沒來 JSConf 2017騰訊前端求職直播課——筆試篇淘寶 flexible.js 漏洞修補：...

yeyan1996 2019-08-20 18:03 評論0 收藏0
(翻譯)Presentational and Container Components

摘要：對于很多中間組件來說，他們并不需要這些，但是他們還必須傳遞給下一級組件。更傾向于，而更傾向于，當然這并不是絕對的。這是篇文章翻譯自的這是篇文章翻譯自medium的：Presentational and Container Components 譯者語：這篇文章是緊接著對我上一篇翻譯的擴充，對Container Component模式描述的更加細，解決了我很多開發中的困惑。 Prese...

mushang 2019-08-22 11:02 評論0 收藏0
【譯】組件與Props

摘要：調用組件，并且把作為傳遞進去。警告組件的名字最好都是大寫字母開頭的。舉個例子，表示一個標簽，但表示一個組件并且要求是一個閉合標簽。組件能引用他們的組件作為他們的輸出。警告組件必須返回一個根組件。讓我們把這個組件切割成更小的組件。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Components ...

Juven 2019-08-20 14:34 評論0 收藏0