[react] class Component and function Component

我對react的用法理解還一直停留在多年以前,說明這段時間我沒有更新react的知識。我大腦中記得還是使用Class Component + this.setState,可是今天看了看react的文檔,發現怎么不一樣了,用的都是function + useState的方式了。你知道這種感覺嗎?有點類似于閉關幾年,出來以后發現怎么人人都用不帶實體鍵盤的智能手機了,之前人們不都是在用帶著按鍵的手機嗎?
這個是幸運呢?還是不幸呢?幸運的是,說明在變化,在進步,不幸的是你要接受這種改變,現在的我還能夠接受改變,不知道十年,二十年,三十年之后的我能夠跟得上變化。

不過要注意的是class Component + this.setState這種方式還是支持的,只不過更推薦用 Function Component + Hooks這種寫法了。

假如說有一個程序員,是死記硬背型程序員A,A記住了react的使用方式就是class Component + this.setSate類型的,那么放到今天,如果A不更新知識結構,那么A已經過時了。
假如說有一個程序員B,B能夠理解邏輯,能夠更新知識結構,首先B會及時跟進官方和社區動態,其次B能夠理解邏輯,很容易在class Component和Fucntion Compoent之前進行遷移。

useEffect Hook (替代生命周期方法)

How To Convert React Class Components to Functional Components with React Hooks

import { useState, useEffect } from “react”;

useState和useEffect怎么用?

我感覺useState比useEffect好理解。State這個單詞我們知道,是狀態的意思,但是Effect這個單詞我不理解是啥意思。

useState (聲明式 - Declarative):它的思維模式是 “我想要什么”。
你直接聲明:“這個組件需要一個狀態 count,它的初始值是 0”。

你通過 setCount(1) 聲明:“我希望狀態下次變成 1”。

React 負責如何去更新 DOM 以匹配你這個“愿望”。你不需要關心過程,只關心結果。這非常符合 React 本身的聲明式哲學。

useEffect (命令式 - Imperative):它的思維模式是 “在某個時候,我要去做某件事”。


基礎不牢,地動山搖,基礎的css頁面布局排版你還不熟練,即使切換到react也是不熟練的啊。雖然可以利用AI,可以利用成熟的組件庫,但是總會涉及到需要你自己調整的地方。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/94399.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/94399.shtml
英文地址,請注明出處:http://en.pswp.cn/web/94399.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

以太坊智能合約地址派生方式:EOA、CREATE 和 CREATE2

1. 引言 在以太坊上,智能合約可以通過以下三種方式之一進行部署: 1)由外部賬戶(Externally Owned Account, EOA)發起交易,其中 to 字段設為 null,而 data 字段包含合約的初始化代碼。2&#x…

基于RISC-V架構的國產MCU在eVTOL領域的應用研究與挑戰分析

摘要電動垂直起降飛行器(eVTOL)作為未來城市空中交通的重要組成部分,對嵌入式控制系統的性能、可靠性和安全性提出了極高的要求。RISC-V作為一種新興的開源指令集架構,為國產微控制器(MCU)的研發和應用帶來…

深度學習中的“集體智慧”:Dropout技術詳解——不僅是防止過擬合,更是模型集成的革命

引言:從“過擬合”的噩夢說起 在訓練深度學習模型時,我們最常遇到也最頭疼的問題就是過擬合(Overfitting)。 想象一下,你是一位正在備考的學生: 欠擬合:你根本沒學進去,所有題都做錯…

在JavaScript中,比較兩個數組是否有相同元素(交集)的常用方法

方法1:使用 some() includes()(適合小數組)function haveCommonElements(arr1, arr2) {return arr1.some(item > arr2.includes(item)); }// 使用示例 const arrA [1, 2, 3]; const arrB [3, 4, 5]; console.log(haveCommonElements(ar…

心路歷程-Linux的系統破解詳細解說

CentOS7系統密碼破解 密碼破解是分兩種情況的;一種是在系統的界面內,一種就是不在系統的頁面; 今天我們就來聊聊這個系統破解的話題; 1.為什么需要破解密碼?–>那當然是忘記了密碼;需從新設置密碼 2.但是…

IDE和AHCI硬盤模式有什么區別

IDE(Integrated Drive Electronics)和 AHCI(Advanced Host Controller Interface)是硬盤控制器的工作模式,主要區別在于性能、功能兼容性以及對現代存儲設備的支持程度。以下是詳細對比和分析:一、本質區別…

【密碼學實戰】密碼實現安全測試基礎篇 . KAT(已知答案測試)技術解析與實踐

KAT 測試技術解析 在密碼算法的安全性驗證體系中,Known Answer Test(KAT,已知答案測試)是一項基礎且關鍵的技術。它通過 “已知輸入 - 預期輸出” 的確定性驗證邏輯,為密碼算法實現的正確性、合規性提供核心保障&…

如何用Redis作為消息隊列

說明:以前背八股文,早就知道 Redis 可以作為消息隊列,本文介紹如何實現用 Redis 作為消息隊列。 介紹 這里直接介紹 yudao 框架中的實現。yudao 是一套現成的開源系統框架,里面集成了許多基礎功能,我們可以在這基礎上…

解決 uniapp 修改index.html文件不生效的問題

業務場景:需要在H5網站設置追蹤用戶行為(即埋點)的script代碼。 問題:無論如何修改根目錄下的index.html文件都不會生效 問題原因:在 manifest.json 文件中有個【web配置】—>【index.html模版路徑】,…

C語言第十一章內存在數據中的存儲

一.整數在內存中的存儲在計算機內存中,所有的數字都是以二進制來存儲的。整數也不例外,在計算機內存中,整數往往以補碼的形式來存儲數據。這是為什么呢?在早期計算機表示整數時,最高位為符號位。但是0卻有兩種表示形式…

K8s部署dashboard平臺和基本使用

Kubernetes 的默認 Dashboard 主要用于基本的資源查看與管理,如查看 Pod、Service 等資源的狀態,進行簡單的創建、刪除操作 。然而,在企業級復雜場景下,其功能顯得較為局限。 與之相比,開源的 Kubernetes Dashboard 增強版工具 ——Dashboard UI ,為用戶帶來了更強大的功…

JavaEE進階-文件操作與IO流核心指南

文章目錄JavaEE進階文件操作與IO流核心指南前言:為什么需要文件操作?一、java.io.File 類的基本用法1.1 文件路徑1.2 常用方法示例獲取文件信息創建和刪除文件目錄操作文件重命名和移動二、IO流的基本概念2.1 核心困境:字節流 vs. 字符流字節…

動手學深度學習03-線性神經網絡

動手學深度學習pytorch 參考地址:https://zh.d2l.ai/ 文章目錄動手學深度學習pytorch1-第03章-線性神經網絡1. 線性回歸1.1 什么是線性回歸?1.2 如何表示線性回歸的預測公式?2. 損失函數2.1 什么是損失函數?2.2 如何表示整個訓練集…

如何安全解密受限制的PDF文件

當你需要從PDF中復制一段文字用于報告或引用時,如果文件被禁止復制,解密后即可輕松提取內容,避免手動輸入的麻煩。它解壓后雙擊主程序即可運行,無需安裝,即開即用,十分便捷。建議先將界面語言切換為中文&am…

利用DeepSeek輔助編譯c#項目tinyxlsx生成xlsx文件

繼續在尋找比較快的xlsx寫入庫,從https://github.com/TinyXlsx/TinyXlsx/ 看到它的測試結果,比c的openXLSX快幾倍,就想試用一下,仔細一看,它是個c#項目,需要.NET 8.0。 于是上微軟網站下載了.NET 8.0 SDK&a…

構建現代高并發服務器:從內核機制到架構實踐

引言:高并發的挑戰與演進 在當今互聯網時代,高并發處理能力已成為服務器的核心競爭力。傳統的"一個連接一個線程"(Thread-per-Connection)模型由于資源消耗巨大、上下文切換成本高和可擴展性差,早已無法應對數萬甚至百萬級的并發連接需求。現代高并發服務器基于…

1SG10MHN3F74C2LG Intel Stratix 10 系列 FPGA

1SG10MHN3F74C2LG 是 Intel 推出的 Stratix 10 系列 FPGA 家族中的高端型號,它基于 Intel 與 TSMC 合作的 14 納米 FinFET 工藝制造,是面向超高性能計算、數據中心加速、5G 通信基礎設施、以及高端網絡設備的旗艦級可編程邏輯器件。這顆 FPGA 以極高的邏…

IIS訪問報錯:HTTP 錯誤 500.19 - Internal Server Error

無法訪問請求的頁面,因為該頁的相關配置數據無效。 由于權限不足而無法讀取配置文件解決辦法:文件夾添加用戶權限Everyone文件夾->鼠標右鍵->屬性->安全->組或用戶名->編輯->添加->錄入Everyone->檢查名稱->一路點確定

AI對口型唱演:科技賦能,開啟虛擬歌者新篇章

最近在短視頻平臺閑逛,發現不少朋友都在玩“AI對口型唱演”,這類視頻簡直成了新晉流量密碼。從熱門歌曲到經典臺詞,配上夸張的口型和表情,分分鐘就能沖上排行榜前排。不過問題也來了——市面上這么多專用軟件,到底哪家…

爬蟲逆向--Day16Day17--核心逆向案例3(攔截器關鍵字、路徑關鍵字、請求堆棧、連續請求)

一、入口定位入口定位-- 關鍵字搜索-- 方法關鍵字--最簡單,最高效的 排第一-- encrypt 加密-- decrypt 解密-- JSON.stringify 給一個JS對象做Json字符串處理的把一個對象轉換為Json字符串JSON.stringify({a:1,b:"2"}){"a":"1…