react记录部署

导语

React中的核心概念
1 虚拟DOM(Virtual DOM)
2 Diff算法(虚拟DOM的加速器,提升React性能的法宝)

React主要的原理
Virtual DOM 虚拟DOM;

提供了一种不同的而又强大的方式来更新DOM,
代替直接的DOM操作。
就是Virtual DOM,
一个轻量级的虚拟的DOM;
通过这个Virtual DOM去更新真实的DOM,
由这个Virtual DOM管理真实DOM的更新

 
 我想问的是:为什么通过这多一层的Virtual DOM操作就能更快呢?
 diff算法。
 React会等到事件循环结束,然后利用这个diff算法,
 通过当前新的dom表述与之前的作比较,
 计算出最小的步骤更新真实的DOM
 
 virtual dom----diff----real dom
 
 
 之前我的想法是:dom树是元素组成的;但是在react里面就是
 Components 组件
在DOM树上的节点被称为元素,在这里则不同,Virtual DOM上称为commponent。
Virtual DOM的节点就是一个完整抽象的组件,它是由commponents组成。

Components存在让diff算法更加高效

如何呈现真实的DOM:如何渲染组件,什么时候渲染,怎么同步更新的
1,state,render;
当数据发生变化时,将会调用Render重现渲染,这里只能通过提供的setState方法更新数据。
setState({})更新数据;

React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层
其次React是单向的从数据到视图的渲染,非双向数据绑定(这个是很重点的问题!!)
不直接操作DOM对象,而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
不便于直接操作DOM,大多数时间只是对 virtual DOM 进行编程

https://120.24.108.143/svn/GAMC/DevCode/MD_Dialog_XML/xml

React将DOM抽象为虚拟DOM,
虚拟DOM其实就是用一个对象来描述DOM,
通过对比前后两个对象的差异,
最终只把'变化'的部分重新渲染,提高渲染的效率

为什么用虚拟dom,
当dom发生更改时需要遍历 而原生dom可遍历属性多大231个 
且大部分与渲染无关 更新页面代价太大


https://segmentfault.com/a/1190000012921279
https://zhuanlan.zhihu.com/p/20346379
React 源码剖析系列 - 不可思议的 react diff
知其然更要知其所以然

JSX的注意点
注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class

类似:label 的 for属性,使用htmlFor代替
注意 2:在 JSX 中可以直接使用 JS代码,直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3:在 JSX 中只能使用表达式,但是不能出现 语句!!!
注意 4:在 JSX 中注释语法:{/* 中间是注释的内容 */}

React创建组件的两种方式
1 通过 JS函数 创建(无状态组件)
2 通过 class 创建(有状态组件)
函数式组件 和 class 组件的使用场景说明:
1 如果一个组件仅仅是为了展示数据,那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑,需要操作数据,那么就需要使用 class 创建组件,因为,此时需要使用 state


JavaScript函数创建
注意:1 函数名称必须为大写字母开头,React通过这个特点来判断是不是一个组件
注意:2 函数必须有返回值,返回值可以是:JSX对象或null
注意:3 返回的JSX,必须有一个根元素
注意:4 组件的返回值使用()包裹,避免换行问题

function Welcome(props) {
  return (
    // 此处注释的写法 
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

 // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
 class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }
  // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

props是只读的,无法给props添加或修改属性
class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

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

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

相关文章

cuda11.8安装torch2.0.1

pip install torch2.0.1 torchvision0.15.2 torchaudio2.0.2 --index-url https://download.pytorch.org/whl/cu118

hot100 -- 回溯(上)

目录 &#x1f35e;科普 &#x1f33c;全排列 AC DFS &#x1f6a9;子集 AC DFS &#x1f382;电话号码的字母组合 AC DFS &#x1f33c;组合总和 AC DFS &#x1f35e;科普 忘记 dfs 的&#xff0c;先看看这个&#x1f447; DFS&#xff08;深度优先搜索&#xf…

百度软件测试面试经历,期望薪资27K

一面 1、 请为百度搜索框设计测试用例&#xff1f; 2、百度设计框上线前需要进行那些测试&#xff1f; 界面测试&#xff0c;功能测试&#xff0c;性能测试&#xff0c;安全性测试&#xff0c;易用性测试&#xff0c;兼容性测试&#xff0c;UI测试。 3、如何查看http状态码…

重学java 38.创建线程的方式⭐

It is during our darkest moments that we must focus to see the light —— 24.5.24 一、第一种方式_继承extends Thread方法 1.定义一个类,继承Thread 2.重写run方法,在run方法中设置线程任务(所谓的线程任务指的是此线程要干的具体的事儿,具体执行的代码) 3.创建自定义线程…

基于灰狼优化算法优化支持向量机(GWO-SVM)回归预测

代码原理 基于灰狼优化算法优化支持向量机&#xff08;GWO-SVM&#xff09;的回归预测代码的原理和流程如下&#xff1a; 1. **初始化灰狼群体**&#xff1a;随机生成一定数量的灰狼&#xff0c;并初始化它们的位置和速度。 2. **初始化SVM模型参数**&#xff1a;根据问题要…

【JAVA基础之网络编程】UDP和TCP协议以及三次握手和四次挥手的过程

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 1. 网络编程 1.1 概述 1.2 网络编程的三要素 1.2.1 IP地址 1.2.2 InetAddress 1.2.3 端口和协议 1.3 UDP协议 1.3.1 UDP发送数据 1.3.2 UDP接收数据 1.4…

C语言——小知识和小细节18

一、力扣题目 1、题目本体 2、题解 本题目我们使用异或分组的方法来解决。可以在我之前的文章《C语言——操作符CSDN博客》中看一下异或的特点。 由于异或的运算规则为相同为0&#xff0c;不同为1&#xff0c;而且是在二进制补码上进行操作的&#xff0c;我们可以发现的一个…

c++|多态

c|多态 1 多态的概念2 多态的定义及其实现2.1 满足多态的条件2.2 虚函数2.3 虚函数的重写2.4 析构函数适合加virtural吗2.4 C11 override 和 final2.5 三个概念的对比 3 多态的原理4 抽象类4.1 概念4.2 纯虚函数 1 多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是…

2413. 最小偶倍数

题目&#xff1a; 给你一个正整数 n &#xff0c;返回 2 和 n 的最小公倍数&#xff08;正整数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;n 5 输出&#xff1a;10 解释&#xff1a;5 和 2 的最小公倍数是 10 。 示例 2&#xff1a; 输入&#xff1a;n 6 输出&a…

JS 手写 节流throttle 防抖debounce函数

防抖debounce // 手写防抖 function debounce(fn, delay 200) {// timer 在闭包中let timer null// 返回一个函数return function(...args) {if (timer) {clearTimeout(timer) // 清空上次的值}timer setTimeout(() > {fn.apply(this, args) // 透传 this 和函数参数},…

【再探】设计模式—代理模式

代理是指授权代理人在一定范围内代表其向第三方进行处理有关事务。 1 代理模式 需求&#xff1a;1&#xff09;将业务代码与非业务代码分离&#xff0c;在不改变代码结构的基础上&#xff0c;为其添加新的功能。2&#xff09;为系统中的某些操作做同一处理&#xff0c;例如进…

[实例] Unity Shader 逐像素漫反射与半兰伯特光照

漫反射光照是Unity中最基本最简单的光照模型&#xff0c;本篇将会介绍在片元着色器中实现反射效果&#xff0c;并会采用半兰伯特光照技术对其进行改进。 1. 逐顶点光照与逐像素光照 在Unity Shader中&#xff0c;我们可以有两个地方可以用来计算光照&#xff1a;在顶点着色器…

数据结构:带头双向循环链表

目录 前言 链表实现 1.定义节点 2.接口实现 1.开辟新节点 2.初始化 3.打印链表 4.添加节点 头插 尾插 在pos位置之前增加节点 5.删除节点 判空 头删 尾删 删除pos位置的节点 6.查找 7.释放 前言 带头双向循环链表的结构最复杂&#xff0c;一般用在单独存储数…

z3-加法器实验

补码器加减法&#xff0c;运算方法简介 我们要知道什么是补码的加法&#xff0c;我们为什么要用补码的加法&#xff1f; 补码的加法其实就是将两个补码形式的二进制数字直接相加&#xff0c;处理的时候忽略超出固定位数的进位。补码的加法运算和无符号二进制数的加法操作一样&…

【最新区块链论文录用资讯】CCF A — SP 2024 共17篇

Conference&#xff1a;45th IEEE Symposium onSecurity and Privacy CCF level&#xff1a;CCF A Categories&#xff1a;网络与信息安全 Year&#xff1a;2024 Num&#xff1a;17 Efficient Zero-Knowledge Arguments For Paillier Cryptosystem Paillier 加密系统的有效…

基于python的网页自动刷新工具

1.下载webdriver https://msedgewebdriverstorage.z22.web.core.windows.net/?prefix122.0.2365.59/下载Edge的浏览器驱动 2.安装selenium pip install selenium4.11.1 3.写代码 # -*- coding: utf-8 -*- import tkinter as tk from tkinter import messagebox import thr…

【halcon】set_part 实现平移和缩放 彻悟版

背景 之前写了一篇关于set_part 的文章 &#xff0c;确实也实现了平移和缩放。平移是对的&#xff0c;但是缩放其实有畸变。这个问题一直都困扰着我&#xff0c;知道昨天连续测试了好几个小时&#xff0c;直到晚上11点终于完美解决。 坐标和高宽 坐标 再讲set_part 之前&am…

免费撸gpt-4o和各种大模型实用经验分享

项目 Github: https://github.com/MartialBE/one-api 先贴两张图&#xff1a; 说明 免费撸AI大模型,各位可以对照下面我给出的大模型记录表来填&#xff0c;key需要自己去拿&#xff0c;国内都需要手机号验证&#xff0c;如果你不介意。另外我在自己的博客放出免费API给大家…

模型评价指标笔记:混淆矩阵+F1+PR曲线+mAP

评价指标 二分类评价指标 混淆矩阵 TP: 正确预测为了正样本&#xff0c;原来也是正样本 FN: 错误的预测为负样本&#xff0c;原来是正样本 (漏报&#xff0c;没有找到正确匹配的数目) FP: 错误的预测为正样本&#xff0c;原来是负样本 (误报&#xff0c;没有的匹配不正确) TN…

CIM模型

CIM 是 Esri 制图信息模型。 它是一个地图内容规范,用于记录在保存、读取、引用或打开时如何永久保留描述不同项目组件的信息。 该规范以 JSON 表示,适用于 ArcGIS 应用程序和 API 中的地图、场景、布局、图层、符号和样式。 CIM 不仅限于制图设置。 要了解属性的组织方式以及…