<video id="xrz79"><output id="xrz79"><delect id="xrz79"></delect></output></video>
<video id="xrz79"><dl id="xrz79"></dl></video>
<dl id="xrz79"><delect id="xrz79"><meter id="xrz79"></meter></delect></dl>
<dl id="xrz79"></dl>
<dl id="xrz79"><output id="xrz79"><font id="xrz79"></font></output></dl>
<dl id="xrz79"><output id="xrz79"><font id="xrz79"></font></output></dl>
<video id="xrz79"><output id="xrz79"></output></video>
<video id="xrz79"></video>
<video id="xrz79"></video>
<video id="xrz79"></video>
<video id="xrz79"><output id="xrz79"><delect id="xrz79"></delect></output></video>
<dl id="xrz79"><output id="xrz79"></output></dl>
React Hooks

React Hooks

什么是React Hooks,為什么我需要它們?

技術開發 編程 技術框架 技術發展

React Hooks

什么是React Hooks,為什么我需要它們?

快速的變化和過夜的構造變化不會打擾前端開發人員。他們知道抵制是徒勞的,并且每年都努力學習一個新的CSS框架,每周學習一個新的JavaScript框架(因為這看起來像雨后春筍般迅速),并完全重寫了個人和與工作相關的網絡每兩年應用一次。

然而,沒有人為Facebook的React團隊隨Hooks帶來的巨大變化做好準備。突然,React開發人員被告知,用類構建應用程序的舊方法從來都不是最好的主意。并且他們現在應該采用這種閃亮的,新的,功能強大的東西,稱為“掛鉤”。

關于每個人是否應該將其React應用程序的類重寫為Hooks的話題,React核心團隊勸說他們,認為這太費力了。但是,他們確實堅信基于類的組件將進入維護模式,而Hooks是每個人都想要的光明的新未來。

這讓每個人都撓頭。鉤子的表面積很小,思維模型上下顛倒,學習曲線(有很多“驚奇!”的時刻)陡峭。在撰寫本文時,在發布18個月后,Hooks或多或少已成為React應用程序的標準。知道它們是新開發人員的必備條件(不幸的是,要知道基于類的組件,因為它們在許多新近/舊項目中都在使用)。

但是總體情況仍然一片朦朧。那些了解鉤子的人已經宣布自己為“專家”,而其他人則在黑暗中摸索。在高級開發人員中,幾乎所有人都認為Hooks是更好的解決方案,而少數人則表示Hooks只是他們的另一項武器。

問題的關鍵在于,風向著掛鉤的方向吹來,無論您是否喜歡它們,通過了解它們,您的事業都會得到極大的幫助。讓我們繼續了解有關Hook的兩個基本知識:1)它們是什么;2)為什么需要它們。

但是,我覺得我必須強調本文的流程。

通常,解決新問題的“內容”是有意義的,然后才繼續講“為什么”。但是,由于這是一篇針對困惑的React開發人員(或一般來說只是前端開發人員)的文章,所以我認為通過解釋Hooks解決什么類型的問題來解決這個問題更為重要。完成此操作后,我們內心的緊張感將消失,我們將了解胡克斯背后的哲學和實用主義。然后,對這個想法深信不疑(或者,如果您希望成為/保持一個React開發人員的話,那無濟于事),我們可以對Hooks進行概述。

為什么要創建React Hooks?

并不是因為Facebook的一些杰出工程師變得不安而創建了鉤子。您會看到,React是Facebook使用的東西(也是非常重要的東西),因此從第一天起,他們就致力于向最能滿足其需求的方向發展React(可組合的高性能前端工作)。在編寫并維護了成千上萬個組件之后,React團隊決定基于類的組件無法正常工作。

讓我們看看導致開發人員不喜歡基于類的組件的各種原因(在Facebook和其他人的關注下)。

JavaScript類是一個謊言。

這是我個人對核心語言的發展方向的抱怨。JavaScript可能看起來像是C風格的花括號語言,但這就是相似之處的所在。但隨后,該語言的ES5 / ES6版本加入了“類”。突然,“現代” JavaScript代碼使其他語言的開發人員感到賓至如歸:

class ShoppingCart extends BasicShoppingCart {

constructor(items) {

    super(items);

        this.items = items;

    }

    

    getTotalPrice() {

    let price = 0;

        for (let item of this.items) {

        price += item.price;

        }

        return price;

    }

    

    // and so on

}

類,子類,繼承層次結構,構造函數,getter,setter,靜態成員(大致來說),extends和new關鍵字-這些東西使飽受戰斗之苦的OOP建筑師感到精神上的性高潮(充分考慮到他們的經驗和能力)。就像在語言名稱中貼上“ Java”一樣(在早期,它被稱為LiveScript)曾是一個出色的營銷手段,關鍵字“ class”也許應該進一步鞏固其地位并融入各種語言中,彼此非常相似(PHP,Perl,Python,Ruby,Java-您幾乎可以從一個無縫過渡到另一個)。

但是類是JavaScript中的“該死”類型的謊言。當JavaScript引擎運行代碼時,它沒有類的概念。因此,需要像Babel這樣的工具來將“現代”,“漂亮”的類轉換為簡單的函數。如果涉及繼承,則它將轉換為JavaScript中唯一可能的繼承類型-原型繼承。

因此,當我們閉上眼睛并編寫基于類的代碼時,我們在對自己說謊,并且在我們膚淺的知識將我們刺痛的最后一天使我們的立場變得虛弱。

盡管有勇敢地嘗試this在JavaScript中隱藏基本關鍵字,但這個問題經常在React類(通常也是JavaScript類)中出現。在一些用例中,組件函數會引發錯誤,因為它們在執行的那一刻沒有綁定到正確的上下文。為了解決這個問題,您必須及早(明確bind()閱讀此內容)到React上下文,或者使用箭頭函數進行回調。當然,這不是一個破壞交易的事情,但是它確實增加了隨時都需要注意的另一件事,從而增加了認知負擔。當然,這是每個新的React開發人員都陷入的陷阱。

代碼重用是軟件開發中的共同目標。類可能會促進其他上下文(和語言)中的代碼重用,但是在React中,它們在代碼共享中引入了問題。這是React世界早期的一個主要辯論/關注點,社區最終開發了諸如高階組件和渲染道具之類的解決方案來對其進行處理?;舅枷胧菍⒔M件傳遞給其他組件,從而“包裝”它們周圍的某些功能。使用這些“解決方案”接觸過代碼的任何人都知道痛苦,并且不想再做一次(包括我自己)。

閱讀本指南以了解React渲染行為。

您只需要通讀高階組件的官方文檔,即可親自了解整個想法有多笨拙。在實際項目中,經常需要共享多個代碼段,這很容易導致多層組件包裝層次結構。幾周后,即使是它的作者也無法理解這種代碼!是的,盡管在使用React類時代碼重用并非并非不可能,但它卻笨拙而混亂。

支撐鉆

道具鉆探是您在組件層次結構中較高的道具時所面臨的問題(至少在Vanilla React中),需要將其提供給組件向下的組件。這是一個示例:考慮典型Web應用程序中的用戶配置文件,該文件通常顯示在標題中?,F在,我們假設頁腳組件中也需要用戶的詳細信息,也許要說“您到目前為止已經完成了34筆交易| 在這里獲取更多有趣的統計信息”。如果您使用課程,如何在頁腳中向下顯示個人資料信息?好吧,我認識的一些React開發人員會說“擰緊!” 并在頁腳中進行額外的API調用,但這是一種糟糕的做法。

想到的唯一方法也恰好是唯一的選擇:不斷將概要文件prop從組件向下傳遞到其子組件,直到到達頁腳組件。是的,這是一個繁瑣的過程,是的,這使代碼難以閱讀(因為在中間的組件中,您需要在精神上一直忽略該道具,因為它只是徒勞而已,沒有用)。道具的這種自上而下的鏈式處理稱為道具鉆孔,在React世界中是一種可怕的現象。

使用類時,React開發人員可以使用Redux之類的方法來解決它,但是如果您不打算將Redux用于所有事情,那將是一筆過多的前期投資。通過Hooks,React發布了一個名為Context的功能,該功能是針對該用例量身定制的?,F在,Context也可以與類一起使用,但是很難忽略它的笨拙。同樣,對于Hooks,使用多個上下文很容易。

更少的東西要學習

這聽起來很矛盾,React團隊也承認了這一論點。正在引入一種全新的React應用程序編寫方式;有人告訴我們,我們不應該重寫或丟棄現有的基于類的代碼,但是React團隊告訴我們,需要學習的東西更少!

反應令人困惑的學習曲線

“有人開槍打我!”

實際上,從短期來看,問題是React生態系統的整體復雜性和混亂程度將激增(而且隨著學習React的新人們需要學習Class,HoC,Hooks,Context,Redux和許多其他庫的影響,它的發展將會如此之快)以及他們的極端案例)。但是更大的一點是,如果Hooks最終成為一個成功的概念,那么從長遠來看,可以丟棄大量的概念,從而使我們只剩下一個很小的Hooks核心,功能組件,而沒有其他東西。這不會很快發生(僅僅是因為基于類的現有代碼量很大),但這是我們最終要到的地方。

明智的組成部分“升級”

React的一個普遍難題是必須決定是將新組件編寫為類還是函數。為了最小化復雜性,通常的做法是從無狀態功能組件開始。然后,如果到了某個時候您認為所涉及的組件需要管理某種狀態或需要訪問更多功能(例如,生命周期方法),則可以將其轉換為基于類的組件。除了只需要刪除所有組件代碼,重新考慮該方法,然后編寫基于類的版本外,其他都不需要。不好玩,是的。

使用Hooks,這樣的組件“升級”變得更加輕松和順暢:即使在承擔許多職責之后,功能組件仍然是功能組件;盡管可以使用一些類似的功能,但是Hooks中沒有生命周期方法。最后,任何常用功能都可以提取到單獨的掛鉤中,并由其他組件重用。在這種情況下,您發現美了嗎?—一切都是函數或Hook(這也是一個函數,但為了發展起見,我們可以加以區分),并且在將方釘安裝到圓孔中時不涉及任何事情。??

因此,我們有它。鉤子不針對任何事物,而是主要的范式轉換。是的,這很不方便,但是最終的開發人員體驗要好得多(與帶有類的React相比)。

反應掛鉤是更好的選擇

現在,我們已經解決了“為什么”的問題,讓我們將注意力轉移到Hooks的真正含義上。

React中的鉤子是什么?

鉤子很堅硬,并且非常容易同時定義。簡單的版本是您在官方文檔的開頭看到的內容:鉤子是一種編寫沒有類的React組件的方法;它們還為您提供了“掛鉤” React核心功能的方法,例如功能組件中的狀態,控制重渲染等。

反應掛鉤不容易理解

那沒有太大幫助,對吧?

因為這對第一次沒有幫助,所以我遇到了胡克斯。要了解Hook的真正含義,您必須對它們的來龍去脈進行長期而耐心的研究(而且不乏它們?。?,使用它們來構建應用程序(甚至可以重建過去的應用程序),被特殊情況所困擾,等等。

但是,只是為了給您“感覺”,這就是Hooks的代碼。記住,所有組件都是功能性的,并且與組件相關的代碼是在組件內部定義的。

import React, { useState } from 'react';


export function Counter() {

  const [count, setCount] = useState(0);


  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>

        Click me

      </button>

    </div>

  );

}

是的,這是我們在使用類時多次編寫的相同Counter組件!但是,您可以看到它們之間的巨大差異:構造函數消失了,訪問和更改狀態變得更加簡單和模塊化(您可以useState()根據需要管理任意數量的調用來管理不同的狀態),并且代碼也更短。在某些情況下,生成的代碼比基于類的組件短得多,這僅僅是因為Hooks簡潔地捕獲并提供了相同的功能。

掛鉤有幾種類型,useState()只是其中之一。如果您對有多少及其用途感到好奇,請查看官方文檔。

結論

掛鉤給React生態系統帶來了巨大的變化,并且將繼續存在。它們簡化了組件的結構,體系結構,層次結構,代碼重用等等。盡管有一些非常直言不諱的批評家,但總體上人們的熱情很高,未來看起來充滿希望。

技術開發 編程 技術框架 技術發展

老师成人痴汉在线播放