[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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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…