react中关于类式组件和函数组件对props、state、ref的使用

文章中有很多蓝色字体为扩展链接，可以补充查看。

常用命令使用规则

组件编写方式:

1.函数式

function MyButton() {
//直接return 标签体return (<>……</>);
}

2.类

class MyButton extends React.Component {
//在render方法中，return 标签体render() {return <>……</>}
}

虚拟dom到底是怎么个事？

-虚拟dom:它本质上是一个拥有着对应着真实的DOM元素的属性集合的 JavaScript对象。
为什么要使用虚拟dom?

答案：我们通过对dom的操作实现浏览器更新，当应用的项目比较小的时候这么做是没有问题的，但是当变更频繁或者需要操作的dom数量大的时候就非常不合适了。因为dom的变更会引起浏览器的重排和重绘，这是十分消耗性能的。
因此引入虚拟dom的概念来改善这种问题，在渲染dom之前，存储一份虚拟dom。每次去变更dom，都会使用最新的虚拟dom去对比之前的，只更新增加不同的部分，避免全量更改真实dom减少开销，以下是使用虚拟dom的好处。

  1. 性能优化： 虚拟DOM使得React可以将多次DOM操作合并为一次，从而减少了实际的DOM操作次数，提高了性能。
  2. 快速更新： React通过比较虚拟DOM和实际DOM的差异，只更新必要的部分，避免了不必要的重新渲染，提高了页面的响应速度。
  3. 框架内部使用： 虚拟DOM是React框架内部使用的一种机制，开发者通常无需直接操作虚拟DOM，React会在合适的时机将其转化为真实的DOM。
vue与react的diff算法的区别

React 和 Vue 都采用了高效的虚拟 DOM Diff 算法来优化视图更新，尽管它们在具体实现上有所不同，但核心目标都是尽可能地减少对真实 DOM 的操作以提升性能。以下是 React 和 Vue diff 算法的主要对比点：

  1. Diff 策略：

    • React：React 使用了深度优先搜索（DFS）进行树形结构的比较，并且在同层节点中，默认采用“逐个”比较的方式，只有在找到 key 相同的节点时才进行移动操作，而不是重新创建。当遇到列表类型的子节点时，若没有提供稳定的 key，则会默认复用首尾的节点，中间的节点会被全部卸载并重新创建。
    • Vue：Vue 也是基于 DFS 进行树形结构比较，但它采用的是“双向”遍历的方式，在确定待插入、移动或删除的元素时效率更高。Vue 也强调使用 key 来提高列表渲染性能，如果提供了 key，Vue 可以更精确地识别出被移动或复用的元素。

  2. 异同处理：

    • React：React 在同一层级的节点比较中，只要类型不同就会直接替换整个子树，这可能导致不必要的DOM操作。
    • Vue：Vue 对于组件的修改更为灵活，它会尝试复用现有组件实例，即使其类型发生了变化。但如果数据或者 prop 有显著差异，也会触发重建。

  3. 调度策略：

    • React：React 16 引入了 Fiber 架构，实现了可中断和恢复的 Diff 算法，允许浏览器在渲染过程中进行其他任务，提高了 UI 响应速度。
    • Vue：Vue 的异步更新队列机制，使得多个数据更改在一起时可以统一进行一次视图更新，一定程度上减少了计算量。

  4. 优化手段：

    • React：通过 shouldComponentUpdate 或者 PureComponent、React.memo 提供组件级别的优化。
    • Vue：Vue 则是默认跟踪依赖，通过对象属性代理和响应式系统自动检测变更，配合 computed 属性和 watch 选项进行优化。

总结来说，React 和 Vue 在 Diff 算法上的差异主要体现在具体的遍历策略、组件更新逻辑以及优化方式上，两者都在努力减少不必要的 DOM 操作，提升页面渲染性能。实际开发中，合理使用 key、遵循最佳实践都可以进一步提升二者在大规模数据更新场景下的表现。

使用 JSX 书写标签语言_规则

  1. 标签闭合
  2. 只能返回一个根元素
  3. 使用驼峰式命名法给所有 大部分属性命名！
css
//常用举例 css
<img className="avatar" />//{}中写入变量
<imgclassName="avatar"style={{width: user.imageSize,height: user.imageSize}}
/>//如果你有多个条件类
<img className={cn('row', {selected: isSelected,large: size === 'large',isActived && 'isActived '})} />

props、state、ref

props

简单来说props就是组件对外的接口，用于接收父级组件的传递过来的参数的一个口子。通过这个口子可以使子组件使用父组件传递过来的内容。

绝不能修改自身的 props。

- 函数式组件 -
function Button({ onSmash, children }) {return (<button onClick={onSmash}>{children}</button>);
}export default function App() {return (<div><Button onSmash={() => alert('正在播放！')}>播放电影</Button></div>);
}
//总结：在标签中传递，方法参数接收
- 类式组件
import React ,{Component} from 'react'
class App extends Component {constructor(props){super(props)}render(){return (<div><Button onSmash={() => alert('正在播放！')}>播放电影</Button></div>);}
}
//总结：在标签中传递，在cunstrctor中接收

在React的类式组件中，即使不写constructor构造函数，也依然可以使用props。React会自动为类组件实例初始化props，无需在构造函数中手动传递。你可以直接在组件类的其他生命周期方法或者成员函数中通过this.props访问到传入的props。

import React ,{Component} from 'react'
class MyComponent extends Component{render(){const {name ,age } = this.props;return (<div>我叫{name},我已经{age}岁了！</div>)}
}
//使用组件时使用标签传递props
<MyComponent name='喵喵' age={3} />

state

它是React组件内的一个对象，用于存储组件的动态数据或状态。每个React组件都有自身的state，并且它可以随时间发生变化，进而驱动组件重新渲染，以反映新的状态所导致的UI变化。

  • state如同一张快照，这个观点很重要，请跳转查看。
  • 当你想要批量的操作state值的时候可以使用箭头函数处理。
  • 如果一个值可以基于现有的 props 或 state 计算得出，不要把它作为一个 state，而是在渲染期间直接计算这个值。
function Form() {const [firstName, setFirstName] = useState('Taylor');const [lastName, setLastName] = useState('Swift');// ✅ 非常好：在渲染期间进行计算const fullName = firstName + ' ' + lastName;// ...
}
  • 更新state的对象是全覆盖模式，而不是替换模式。
  • 操作数组
    在这里插入图片描述
- 函数式组件 -
//1.导入useState hook
import { useState } from 'react';export default function Gallery() {//2.声明state变量 nameconst [name, setName] = useState('喵喵');function handleChangeName() {//3.改变state变量setName('朵喵喵');}return (<><button onClick={handleChangeName}>换个名字</button>{name}</>);
}
- 类式组件 -
import React, { Component } from 'react';class YourComponent extends Component {//1.在constructor中声明//constructor(props) {//  super(props);//  this.state = {//    name: "喵喵"//  };//}//2.直接声明state = {name: "喵喵"};handleButtonClick = () => {this.setState({name: '朵喵喵',});}render() {return ( <button onClick={this.handleButtonClick}>{this.state.name}</button> );}
}export default YourComponent;

ref

当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 ref 。state的改变会导致页面重新被渲染，而使用ref定义的变量是不会被渲染的。就相当于重新开辟了一个空间用于存储不需要被渲染到页面上的数据，减少一些不必要的渲染开支。

如何使用？
//引入 hook
import { useRef } form 'react'// 定义,useRef返回一个对象，相当于 const name = useRef('喵喵'){ return { current：‘喵喵’ } }
// 到组件挂载后，this.myDivRef.current才指向真实DOM节点
const name = useRef('喵喵')       //  = { current :'喵喵'}//使用
export default function Cat(){return (<div onClick="() => name.current = '朵喵喵'">改名</div>)
}
ref与state的区别

==更加建议使用state ==
在这里插入图片描述

扩展应用，操作dom

由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React管理的 DOM 元素。

直接操作DOM并不是通常推荐的做法

函数式
//1.
import React, { useRef, useEffect } from 'react';function MyComponent() {//2.const divRef = useRef(null);function handleChange (){//4.修改divRef.current.style.backgroundColor = 'red'}return (//3.使用定义的变量<div ref={divRef} onClick={handleChange}>这个div的背景将会被设置为红色</div>);
}export default MyComponent;
类式

在 React 中，JSX 的渲染必须是纯粹操作，不应该包含任何像修改 DOM 的副作用。

import React, { Component, createRef } from 'react';class MyComponent extends Component {myDivRef = createRef();componentDidMount() {// 到组件挂载后，this.myDivRef.current才指向真实DOM节点if (this.myDivRef.current) {this.myDivRef.current.style.backgroundColor = 'red';}}render() {return (<div ref={this.myDivRef}>这个div的背景将会被设置为红色</div>);}
}export default MyClassComponent;

关于生命周期

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/823971.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

GPT-3.5和GPT-Plus的区别

GPT-3.5和GPT-Plus的区别

GPT-3.5和GPT-Plus都是OpenAI开发的大型语言模型,但它们之间有一些区别: GPT-3.5就是大家熟知的ChatGPT GPT-Plus 是Open AI 的更强的AI模型GPT-4版本。两者区别是&#xff1a; 模型规模:GPT-Plus是GPT-3的一个更大版本,参数量更多。而GPT-3.5是GPT-3的一个优化版本,在参数量…
阅读更多...
4月帮助问题汇总，日更

4月帮助问题汇总，日更

4-16&#xff1a; 有人提出一个问题&#xff0c;就是说领导要让在一个什么都没装的linu系统中防止一个文件以供访问&#xff0c;已帮助&#xff08;https://ask.csdn.net/questions/8089263?spm1001.2014.3001.5501&#xff09;有人在全屏播放视频的视频上创建一个div悬浮在视…
阅读更多...
基于Copula函数的风光功率联合场景生成_任意修改生成的场景数目(附带Matlab代码)

基于Copula函数的风光功率联合场景生成_任意修改生成的场景数目(附带Matlab代码)

基于Copula函数的风光功率联合场景生成 削减为6个场景 部分展示削减为5个场景 部分展示 风光等可再生能源出力的不确定性和相关性给系统的设计带来了极大的复杂性&#xff0c;若忽略这些因素&#xff0c;势必会在系统规划阶段引入次优决策风险。因此&#xff0c;在确定系统最佳…
阅读更多...
TR-DPO：革新大模型对齐技术

TR-DPO：革新大模型对齐技术

这篇论文中提出的TR-DPO&#xff08;Trust Region Direct Preference Optimization&#xff09;方法的架构或流程设计主要侧重于改进语言模型对齐过程中的稳定性和有效性。 在传统的对齐方法中&#xff0c;模型在学习的时候需要尽可能地靠近一个预先设定的参考模型。这就像是给…
阅读更多...
c语言，单链表的实现----------有全代码!!!!

c语言，单链表的实现----------有全代码!!!!

1.单链表的定义和结构 单链表是一种链式的数据结构&#xff0c;它用一组不连续的储存单元存反线性表中的数据元素。链表中的数据是以节点的形式来表示的&#xff0c;节点和节点之间相互连接 一般来说节点有两部分组成 1.数据域 &#xff1a;数据域用来存储各种类型的数据&…
阅读更多...
Windows系统下查看C语言文件反汇编

Windows系统下查看C语言文件反汇编

一、配置编译器环境变量 1.下载mingw64 MinGW 的全称是&#xff1a;Minimalist GNU on Windows &#xff0c;MinGW 就是 GCC 的 Windows 版本 。 MinGW-w64 与 MinGW 的区别在于 MinGW 只能编译生成32位可执行程序&#xff0c;而 MinGW-w64 则可以编译生成 64位 或 32位 可执行…
阅读更多...
订单表里的防止并发下单

订单表里的防止并发下单

说下逻辑 保证订单表里的防止并发下单并且是唯一&#xff0c;设置一个订单表一个订单交易哈希字段&#xff0c;设置一个索引规则&#xff0c;保证唯一&#xff0c;如果下单的订单交易哈希字段重复直接不让他添加订单。 在具体实现时&#xff0c;可以通过在数据库中创建唯一索…
阅读更多...
day11 | 栈与队列 part-3 (Go) | 239 滑动窗口最大值、347 前 K 个高频元素 (好难)

day11 | 栈与队列 part-3 (Go) | 239 滑动窗口最大值、347 前 K 个高频元素 (好难)

今日任务 239 滑动窗口最大值 (题目:. - 力扣&#xff08;LeetCode&#xff09; )347 前 K 个高频元素 (题目: . - 力扣&#xff08;LeetCode&#xff09; )栈与队列总结 239 滑动窗口最大值 题目:. - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums&#xf…
阅读更多...
处理json文件，并将数据汇总至Excel表格

处理json文件，并将数据汇总至Excel表格

从scores.jason文件中读取学生信息,输出学生的学号&#xff0c;姓名&#xff0c;各科成绩&#xff0c;平均分, 各科标准差 scores.jason {"学院": "计算机学院","班级": "2022级1班","成绩": [{"学号": 1001,&q…
阅读更多...
使用avx2 指令集加速向量算法运算

使用avx2 指令集加速向量算法运算

使用cpu-z 查看cpu指令集 2 向量加&#xff0c;乘法&#xff0c;除法 我们使用向量加&#xff0c;为什么函数是0 到 8 的计算&#xff0c;因为avx2 寄存器为256位&#xff0c;同时设置启动增强指令集 #include <immintrin.h> // 引入包含AVX2指令集的头文件void vecto…
阅读更多...
C语言学习/复习21----初阶阶段总结

C语言学习/复习21----初阶阶段总结

C语言初阶总结 一、C语言概述 C语言是一种通用的、过程式的计算机编程语言&#xff0c;支持结构化的编程、词汇变量以及递归等特性。它既具有高级语言的特点&#xff0c;又具有汇编语言的特点&#xff0c;适合编写系统软件和应用软件。 二、基本语法 数据类型&#xff1a;包…
阅读更多...
sudo ./configure --prefix=/usr/local/nginx sudo make sudo make install

sudo ./configure --prefix=/usr/local/nginx sudo make sudo make install

sudo ./configure --prefix/usr/local/nginx sudo make sudo make install这三条命令是用于编译和安装 Nginx 的源代码。 sudo ./configure --prefix/usr/local/nginx&#xff1a;./configure&#xff1a;这个命令运行了 Nginx 的配置脚本&#xff0c;它会检查系统环境&#x…
阅读更多...
C++类和对象：赋值重载，const成员

C++类和对象：赋值重载，const成员

文章目录 1.赋值运算符重载1.1运算符重载1.2 赋值运算符重载1.3 前置和后置重载 2.日期类的实现3. const成员函数4 取地址及const取地址操作符重载 上文介绍了前三个默认成员函数&#xff0c;本文会介绍剩下三个&#xff0c; 赋值重载会重点展开。 1.赋值运算符重载 1.1运算符…
阅读更多...
【ZZULIOJ】1069: 向Z同学学习（Java）

【ZZULIOJ】1069: 向Z同学学习（Java）

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 Z同学为了实现暑假去云南旅游的梦想&#xff0c;决定以后每天只消费1元&#xff0c;每花k元就可以再得到1元&#xff0c;一开始Z同学有M元&#xff0c;问最多可以坚持多少天。 输入 输入2个整数M,…
阅读更多...
next_siblings()函数介绍

next_siblings()函数介绍

next_siblings() 是一个 BeautifulSoup 库中的函数&#xff0c;用于在 HTML 或 XML 文档中查找当前节点之后的所有兄弟节点。它返回一个生成器对象&#xff0c;可以用于迭代获取当前节点之后的所有兄弟节点。 例如&#xff0c;如果你有一个 HTML 文档结构如下&#xff1a; &l…
阅读更多...
代码随想录 Day17 字符串 | LC344 反转字符串 LC541 反转字符串II 卡码网54替换数字

代码随想录 Day17 字符串 | LC344 反转字符串 LC541 反转字符串II 卡码网54替换数字

一、反转字符串 题目&#xff1a; 力扣344&#xff1a;反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题…
阅读更多...
prompt提示词：工作文职类提问技巧，让AI 帮你写工作报告

prompt提示词：工作文职类提问技巧，让AI 帮你写工作报告

目录 工作文职类提问技巧报告类资料整理类履历类工作类 工作文职类提问技巧 工作文职类提示词&#xff0c;黄色字体需要替换成你想问的内容即可 报告类 报告开头 我现在正在[报告的情境与目的 #03A9F4]。我的报告主题是[主题 #03A9F4]&#xff0c;请提供[数字 #03A9F4]种开…
阅读更多...
微服务相关

微服务相关

1. 微服务主要七个模块 中央管理平台&#xff1a;生产者、消费者注册&#xff0c;服务发现&#xff0c;服务治理&#xff0c;调用关系生产者消费者权限管理流量管理自定义传输协议序列化反序列化 2. 中央管理平台 生产者A在中央管理平台注册后&#xff0c;中央管理平台会给他…
阅读更多...
不说成为Linux高级工程师，但成为合格的软件开发人员还是够了，一文深入浅出的精炼总结Linux核心知识点，掌握Linux的使用与高阶技巧

不说成为Linux高级工程师，但成为合格的软件开发人员还是够了，一文深入浅出的精炼总结Linux核心知识点，掌握Linux的使用与高阶技巧

不说成为Linux高级工程师&#xff0c;但成为合格的软件开发人员还是够了&#xff0c;一文深入浅出的精炼总结Linux核心知识点&#xff0c;掌握Linux的使用与高阶技巧。 Linux 的学习对于一个程序员的重要性是不言而喻的。前端开发相比后端开发&#xff0c;接触 Linux 机会相对…
阅读更多...
binder c++客户端处理流程

binder c++客户端处理流程

c实现binder通讯参考示例 binder通讯 c源码&#xff0c;本文分析客户端的处理流程。相关的代码如下 sp<ProcessState> proc(ProcessState::self());//1 sp<IServiceManager> sm defaultServiceManager();//2 sp<IBinder> binder sm->getService(String…
阅读更多...
最新文章

Copyright @ 2022~2023