日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

函數(shù)組件和函數(shù)式編程有關系么?

來源: 責編: 時間:2023-11-21 09:38:59 260觀看
導讀大家好,我卡頌。長期使用React的同學應該知道,React中存在兩種組件:Class Component,類組件Function Component,函數(shù)組件既然提到「類」和「函數(shù)」,那么很自然的,我們會進一步思考:類組件和OOP(面向對象編程)有關系么?函數(shù)組件和

k1t28資訊網(wǎng)——每日最新資訊28at.com

大家好,我卡頌。k1t28資訊網(wǎng)——每日最新資訊28at.com

長期使用React的同學應該知道,React中存在兩種組件:k1t28資訊網(wǎng)——每日最新資訊28at.com

  • Class Component,類組件
  • Function Component,函數(shù)組件

既然提到「類」和「函數(shù)」,那么很自然的,我們會進一步思考:k1t28資訊網(wǎng)——每日最新資訊28at.com

  • 類組件和OOP(面向對象編程)有關系么?
  • 函數(shù)組件和FP(函數(shù)式編程)有關系么?

畢竟,如果類組件和OOP有關,那么OOP中的思想(繼承、封裝、多態(tài)...)也能指導類組件的業(yè)務開發(fā)(函數(shù)組件與FP的關系同理)。換言之,我們可以直接用這些編程范式的最佳實踐指導React項目開發(fā)。k1t28資訊網(wǎng)——每日最新資訊28at.com

那么,「函數(shù)組件」和「函數(shù)式編程」究竟是什么關系呢?本文會圍繞這個話題展開講解。k1t28資訊網(wǎng)——每日最新資訊28at.com

編程范式與DSL

首先,我們應該明確,「框架語法」本質(zhì)是一種DSL(領域相關語言),他是為了「某個特定領域的開發(fā)」量身定制的。k1t28資訊網(wǎng)——每日最新資訊28at.com

比如,React作為一款針對「view開發(fā)」的DSL,雖然不同的view使用的框架不同,比如:k1t28資訊網(wǎng)——每日最新資訊28at.com

  • 對于web,框架為ReactDOM。
  • 對于小程序,框架為Taro。
  • 對于原生開發(fā),字節(jié)內(nèi)部有個叫React Lynx的框架。

但這些框架都大體遵循同一套DSL(React語法),這套DSL并不屬于某一種編程范式,而應該被視為「不同編程范式中,更符合view開發(fā)的語言特性的集合」。k1t28資訊網(wǎng)——每日最新資訊28at.com

所以,作為React DSL的一部分,函數(shù)組件可以體現(xiàn)OOP的思想,類組件也能體現(xiàn)FP的思想。只要這些思想有利于「view開發(fā)」,就可以納入DSL的語法中。k1t28資訊網(wǎng)——每日最新資訊28at.com

比如,下面的函數(shù)組件Header,是由WelcomeMessage與LogoutButton組件組合而成,這是OOP中的「組合優(yōu)于繼承」思想:k1t28資訊網(wǎng)——每日最新資訊28at.com

function Header(props) {  return (    <div>      <WelcomeMessage name={props.name} />      <LogoutButton onClick={props.onLogout} />    </div>  );}

再比如,下面的類組件Cpn中,要改變狀態(tài)count,并不是通過突變(類似this.state.count++),而是調(diào)用this.setState,傳入不可變數(shù)據(jù):k1t28資訊網(wǎng)——每日最新資訊28at.com

class Cpn extends React.Component {  // ...  onClick() {    const count = this.state.count;    this.setState({count: count + 1});  }  render() {    // ...  }}

「使用不可變數(shù)據(jù)」屬于FP中的思想。k1t28資訊網(wǎng)——每日最新資訊28at.com

所以,當我們要深入了解某個React特性時,應該以如下順序遞進的思考:k1t28資訊網(wǎng)——每日最新資訊28at.com

  • React的開發(fā)理念是什么?
  • 為了實現(xiàn)這套理念,吸收了哪些編程范式中的思想。
  • 這些思想如何在React中落地。

如果我們用上述思考過程研究「函數(shù)組件與函數(shù)式編程的關系」,會發(fā)現(xiàn):k1t28資訊網(wǎng)——每日最新資訊28at.com

  • 函數(shù)組件屬于落地的產(chǎn)物(上述思考的第三步)。
  • 函數(shù)式編程屬于編程范式(上述思考的第二步)。

這就是兩者的關系 —— 函數(shù)組件屬于多種編程范式(主要是OOP與FP)在React中最終的落地產(chǎn)物,其中借鑒了一部分FP的思想。k1t28資訊網(wǎng)——每日最新資訊28at.com

我們不應該將函數(shù)組件單純視為FP在React中的具象體現(xiàn)。k1t28資訊網(wǎng)——每日最新資訊28at.com

那么,函數(shù)組件究竟是如何演進而來的呢?k1t28資訊網(wǎng)——每日最新資訊28at.com

函數(shù)組件的演進

讓我們按照上述三步演進順序思考。首先,React的開發(fā)理念踐行了如下公式(即:UI是數(shù)據(jù)快照經(jīng)過函數(shù)映射而來):k1t28資訊網(wǎng)——每日最新資訊28at.com

UI = fn(snapshot)

要落地這個理念,有兩個要素需要實現(xiàn):k1t28資訊網(wǎng)——每日最新資訊28at.com

  • 數(shù)據(jù)快照
  • 函數(shù)映射

在這里,F(xiàn)P中「不可變數(shù)據(jù)」更適合作為「數(shù)據(jù)快照」的載體,所以React中狀態(tài)是不可變的,因為狀態(tài)的本質(zhì)是快照。k1t28資訊網(wǎng)——每日最新資訊28at.com

而「函數(shù)映射」的載體則沒有特殊要求。在React中,每次觸發(fā)更新,所有組件都會重新render,render的過程就是「函數(shù)映射」的過程,輸入是props與state,輸出是JSX。k1t28資訊網(wǎng)——每日最新資訊28at.com

與React相對的,Vue中組件則更符合OOP的理念,考慮如下App組件:k1t28資訊網(wǎng)——每日最新資訊28at.com

const App = {  setup(initialProps) {    const count = reactive({count: 0})    const add = () => { count.value++ }    return {count, add}  }  template: "...省略"}

組件的setup方法只會在初始化時執(zhí)行一次,后續(xù)觸發(fā)更新時操作的都是同一個閉包中的數(shù)據(jù)。這里面的閉包就是OOP思想中的實例。k1t28資訊網(wǎng)——每日最新資訊28at.com

既然React對「函數(shù)映射」的載體沒有特殊要求,那么類組件、函數(shù)組件都是可以的。k1t28資訊網(wǎng)——每日最新資訊28at.com

那為什么函數(shù)組件最終替代了類組件成為React開發(fā)的主流呢?很多同學認為「函數(shù)組件的Hooks可以更好的復用邏輯」這一點,是函數(shù)組件優(yōu)于類組件的主要原因。k1t28資訊網(wǎng)——每日最新資訊28at.com

但實際上,基于裝飾器的類開發(fā)模式早已被驗證是優(yōu)秀的邏輯復用模式,類組件配合TS裝飾器的模式是行得通的。k1t28資訊網(wǎng)——每日最新資訊28at.com

主要原因還是 —— 函數(shù)組件能夠更好的落地UI = fn(snapshot)這一理念。k1t28資訊網(wǎng)——每日最新資訊28at.com

剛才說過,公式中的snapshot是「快照」的含義。在React中,快照主要包括三類數(shù)據(jù):k1t28資訊網(wǎng)——每日最新資訊28at.com

  • state
  • props
  • context

對于同一個組件,根據(jù)公式UI = fn(snapshot),相同的快照輸入應該獲得相同輸出(JSX)。k1t28資訊網(wǎng)——每日最新資訊28at.com

但狀態(tài)更新也可能觸發(fā)「副作用」,比如請求數(shù)據(jù)、操作DOM...k1t28資訊網(wǎng)——每日最新資訊28at.com

在類組件中,這些「副作用」邏輯被分散在各個生命周期鉤子函數(shù)中,React無法掌控。k1t28資訊網(wǎng)——每日最新資訊28at.com

而在函數(shù)組件中:k1t28資訊網(wǎng)——每日最新資訊28at.com

  • 副作用受限在useEffect中。每次render,React都會保證上次的副作用效果已經(jīng)被清除(通過useEffect回調(diào)的返回值函數(shù))
  • ref的傳播也需要借由forwardRef,這進一步限制了ref可能的影響范圍。
  • 數(shù)據(jù)請求的副作用被交給Suspense處理,考慮下面組件:
function UserList({id}) {  // 異步請求數(shù)據(jù)  const data = use(fetchUser(id));    // ...}

使用時:k1t28資訊網(wǎng)——每日最新資訊28at.com

<Suspense fallback={<div>加載中...</div>}>  <UserList id={1}/></Suspense>

總而言之,使用函數(shù)組件時,所有副作用都處于一種「受到管控」的狀態(tài),可以盡可能保證每次更新時「相同的快照輸入,獲得相同的JSX輸出」,所以函數(shù)組件在React中才會發(fā)揚光大。k1t28資訊網(wǎng)——每日最新資訊28at.com

同時,這也契合了FP中的純函數(shù)思想。k1t28資訊網(wǎng)——每日最新資訊28at.com

總結

「函數(shù)組件」并不是「函數(shù)式編程」在React中的具體實現(xiàn),而是React的設計理念UI = fn(snapshot)落地的最好載體。k1t28資訊網(wǎng)——每日最新資訊28at.com

在React中,還吸收了其他編程范式中的優(yōu)秀思想。FP只是其中影響React最深的一種。畢竟,一切落地都是為了踐行最初的設計理念。k1t28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-32010-0.html函數(shù)組件和函數(shù)式編程有關系么?

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Go 內(nèi)存分配:結構體中的優(yōu)化技巧

下一篇: 揭秘系列:Goroutine調(diào)度器

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 岱山县| 温泉县| 沙雅县| 瓦房店市| 安丘市| 胶州市| 长治市| 札达县| 和田县| 远安县| 新干县| 高邑县| 和静县| 南充市| 石台县| 南漳县| 朝阳县| 洞头县| 绵竹市| 贵定县| 邛崃市| 祁连县| 铜山县| 五指山市| 波密县| 镇安县| 鄱阳县| 五指山市| 尼木县| 甘泉县| 乐昌市| 苏州市| 米林县| 绍兴县| 响水县| 鄂托克旗| 蓬莱市| 申扎县| 兴仁县| 临桂县| 任丘市|