【前端学习——react文档】学习react文档笔记(持续更新)

React官方文档
我不一定按照文档顺序记录

jsx语法系列

JSX 中通过大括号使用 JavaScript

可以在哪使用大括号 ?
  • 用作 JSX 标签内的文本<h1>{name}'s To Do List</h1> 是有效的,但是 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
  • 用作紧跟在 = 符号后的属性:src={avatar} 会读取 avatar 变量,但是 src=“{avatar}” 只会传一个字符串 {avatar}。
使用 “双大括号”

可以在 JSX 中传递对象。
对象也用大括号表示,为了能在 JSX 中传递,你必须用另一对额外的大括号包裹对象。
JSX 中看到 {{ 和 }}时,它只不过是包在大括号里的一个对象。

将 Props 传递给组件

1.props 传递给子组件
组件使用 props 来互相通信,直接在组件里写属性
例如

 <Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>
  1. 在子组件中读取 props
    子组件的括号内直接列出他们( 不要忘记 ( 和 ) 之间的一对花括号 { 和 }
function Avatar({ person, size }) {// 在这里 person 和 size 是可访问的
}

或者通过整个 props 对象,将它解构。

function Avatar(props) {let person = props.person;let size = props.size;// ...
}
  1. 给 prop 指定一个默认值
    默认值仅在缺少 size prop 或 size={undefined} 时生效。 但是如果你传递了 size={null} 或 size={0},默认值将 被使用。

  2. 使用 JSX 展开语法传递 props

<Avatar {...props} />

不要尝试“更改 props”。当一个组件需要改变它的 props(例如,响应用户交互或新数据)时,它不得不“请求”它的父组件传递 不同的 props
你可以设置 state。

state

既然谈到props,接着看看state

组件需要“记住”某些东西,就需要用state

例如,下面这种不起作用,index的值不会改变

export default function Gallery() {let index = 0;function handleClick() {index = index + 1;}return (<><button onClick={handleClick}>Next</button><h3>  {index + 1}</h3></>)

存在两个原因使得变化不可见:

  • 局部变量无法在多次渲染中持久保存。 当 React 再次渲染这个组件时,它会从头开始渲染——不会考虑之前对局部变量的任何更改。
  • 更改局部变量不会触发渲染。 React 没有意识到它需要使用新数据再次渲染组件。

要使用新数据更新组件,需要做两件事:

  • 保留 渲染之间的数据。
  • 触发 React 使用新数据渲染组件(重新渲染)。
useState

在 React 中,useState 以及任何其他以“use”开头的函数都被称为 Hook
Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用,你不能在条件语句、循环语句或其他嵌套函数内调用 Hook(遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。——这样React 才知道返回的是哪个 state )。只在 React 渲染时有效

useState里发生了什么?

const [index, setIndex] = useState(0);

1.组件进行第一次渲染。 因为你将 0 作为 index 的初始值传递给 useState,它将返回 [0, setIndex]。 React 记住 0 是最新的 state 值。
2.你更新了 state。当用户点击按钮时,它会调用 setIndex(index + 1)。 index 是 0,所以它是 setIndex(1)。这告诉 React 现在记住 index 是 1 并触发下一次渲染。
3.组件进行第二次渲染。React 仍然看到 useState(0),但是因为 React 记住 了你将 index 设置为了 1,它将返回 [1, setIndex]。
4.以此类推!

React 如何知道返回哪个 state ?

原因:在同一组件的每次渲染中,Hooks 都依托于一个稳定的调用顺序。只要 Hook 的调用顺序在多次渲染之间保持一致,React 就能正确地将内部 state 和对应的 Hook 进行关联。

这就是为什么 Hook 需要在我们组件的最顶层调用

state特性

**State 是隔离且私有的:**如果你渲染同一个组件两次,每个副本都会有完全隔离的 state!改变其中一个不会影响另一个。

渲染和提交

在一个 React 应用中一次屏幕更新都会发生以下三个步骤:

  1. 触发
  2. 渲染
  3. 提交

1. 触发一次渲染
有两种原因会导致组件的渲染:

  • 组件的初次渲染
  • 组件(或者其祖先之一)的 状态发生了改变

2. React 渲染你的组件

  • 在进行初次渲染时, React 会调用根组件,创建DOM节点。
  • 对于后续的渲染, React 会调用内部状态,更新触发了渲染的函数组件。(递归地更新这些触发了渲染的组件)

渲染必须是纯函数。
纯函数:输入如果相同,那么输出也相同;只做它自己的事情,不会更改在该函数调用前就已存在的对象或变量。
可以使用严格模式去找到组件中的错误:“严格模式” 下开发时,React 会调用每个组件的函数两次,这可以帮助发现由不纯函数引起的错误。

3. React 把更改提交到 DOM 上
在渲染(调用)你的组件之后,React 将会修改 DOM。

  • 对于初次渲染, React 会使用 appendChild() DOM API 将其创建的所有 DOM 节点放在屏幕上。
  • 对于重渲染, React 将应用最少的必要操作(在渲染时计算!),以使得 DOM 与最新的渲染输出相互匹配。
    React 仅在渲染之间存在差异时才会更改 DOM 节点。

4. 浏览器绘制
在渲染完成并且 React 更新 DOM 之后,浏览器就会重新绘制屏幕。

纯函数

例子

 let guest = 0;function Cup() {// Bad:正在更改预先存在的变量!guest = guest + 1;return <h2>Tea cup for guest #{guest}</h2>;
}export default function TeaSet() {return (<><Cup /><Cup /><Cup /></>);
}

这里输出是2,4,6而不是1,2,3 的原因是开启了严格模式,所以执行了两次加一操作;
并且react在提交阶段更新DOM,而不是渲染阶段,因此,不会输出第一次执行的结果。
其次,在每个cup中间输出guest的值,发现都是0,这是因为渲染顺序是父到子,所以teaset会先渲染,还没执行子。

https://stackoverflow.com/a/76453814

条件渲染

切勿将数字放在 && 左侧

如果左侧是 0,整个表达式将变成左侧的值(0),React 此时则会渲染 0 而不是不进行渲染。
可以将左侧的值改成布尔类型:messageCount > 0

渲染列表

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

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

相关文章

docker系列9:容器卷挂载(下)

传送门 docker系列1&#xff1a;docker安装 docker系列2&#xff1a;阿里云镜像加速器 docker系列3&#xff1a;docker镜像基本命令 docker系列4&#xff1a;docker容器基本命令 docker系列5&#xff1a;docker安装nginx docker系列6&#xff1a;docker安装redis docker系…

预训练模型介绍

一、什么是GPT GPT 是由人工智能研究实验室 OpenAI 在2022年11月30日发布的全新聊天机器人模型, 一款人工智能技术驱动的自然语言处理工具 它能够通过学习和理解人类的语言来进行对话, 还能根据聊天的上下文进行互动,能完成撰写邮件、视频脚本、文案、翻译、代码等任务 二、 为…

【JVM】内存调优——内存泄漏、内存溢出

内存调优 什么是内存泄漏、内存泄漏&#xff1f; 内存泄漏&#xff1a;在Java中如果不再使用一个对象&#xff0c;但是该对象依然在GC ROOT的引用链上&#xff0c;这个对象就不会被垃圾回收器回收。内存溢出&#xff1a;内存的使用量超过了Java虚拟机可以分配的上限&#xff…

如何让 PDF 书签从杂乱无序整洁到明丽清新

1、拉取书签&#xff08;详细步骤看文末扩展阅读&#xff09; 原状态 —— 杂乱无序 自动整理后的状态 —— 错落有致&#xff0c;但摩肩接踵 2、开始整理 全选自动整理后的书签&#xff0c;剪切 访问中英混排排版优化 - 油条工具箱 https://utils.fun/cn-en 1 粘贴 → 2 …

【IDEA】IDEA常用快捷键

Windows系统 快捷键功能备注CtrlShiftEnter格式化本行&#xff0c;并鼠标跳转到下一行CtrlAltL格式化代码Ctrli快速实现接口方法CtrlShiftU快速实现大小写转换CtrlAlt鼠标左键快速进入方法实现内部CtrlAlt←退回上一步鼠标所在地方CtrlAlt→回到刚才鼠标所在地方Ctrl空格代码智…

020、Python+fastapi,第一个Python项目走向第20步:ubuntu 24.04 docker 安装mysql8、redis(一)

系列文章 pythonvue3fastapiai 学习_浪淘沙jkp的博客-CSDN博客https://blog.csdn.net/jiangkp/category_12623996.html 前言 docker安装起来比较方便&#xff0c;不影响系统整体&#xff0c;和前面虚拟环境有异曲同工之妙&#xff0c;今天把老笔记本T400拿出来装了个ubuntu24…

Covalent Network(CQT)为 Arbitrum 生态提供 250 万美元的资助,以促进 Web3 的创新与发展

Covalent Network&#xff08;CQT&#xff09;作为 Web3 领先的“数据可用性”层&#xff0c;宣布将提供 250 万美元的资金以支持 Arbitrum 生态项目&#xff0c;包括 Arbitrum One、Nova、Orbit 或 Stylus。此举旨在通过提供资源和帮助&#xff0c;推动利用 Arbitrum 网络上 C…

【JVM】JMM 内存模型

JMM 概述 内存模型 java[内存模型](Java Memory Model) 和 [内存结构]JMM规定了在多线程下对共享数据的读写时&#xff0c;对数据的原子性 有序性 可见性的规则和保障。 原子性 原子性问题: i和i–不是原子性操作! 所以一个i指令会在执行过程中被另一个线程执行! 问题分…

牛客美团2024年春招第一场笔试【技术】解题

1.小美的平衡矩阵 小美拿到了一个n∗n的矩阵&#xff0c;其中每个元素是 0 或者 1。 小美认为一个矩形区域是完美的&#xff0c;当且仅当该区域内 0 的数量恰好等于 1 的数量。 现在&#xff0c;小美希望你回答有多少个i∗i的完美矩形区域。你需要回答1≤i≤n的所有答案 输出…

VSCode连接远程服务器时卡在审核(check)log.txt和pid.txt

诸神缄默不语-个人CSDN博文目录 VSCode就NM跟SB一样天天搁那儿更新&#xff0c;瞎JB更新&#xff0c;每次更新都要出一次兼容性问题&#xff0c;远程服务器不能连公网就上不去了&#xff0c;也没有显式提示&#xff0c;错误很明显就是在下载不了文件&#xff0c;用VSCode内置的…

Linux的有关权限的学习

1.认识权限在Linux中的表示 在Linux中&#xff0c;一切皆文件&#xff0c;而每个文件都会有其相对应的操作权限。那么&#xff0c;我们该怎么来认识他们呢&#xff1f; 首先我们可以看到&#xff0c;在每个test文件的前面都会有一个-rw-r--r--这个字符&#xff0c;而这个字符&…

matlab绘制等高线图

在MATLAB中&#xff0c;你可以使用contour函数来绘制等高线图。以下是一个简单的示例&#xff0c;说明如何使用contour函数来绘制一个二维函数的等高线图。 假设我们要绘制函数z x^2 - y^2的等高线图&#xff0c;其中x和y在-5到5的范围内变化。 % 定义x和y的范围和步长 [x…

ServiceNow 研究:通过RAG减少结构化输出中的幻觉

论文地址&#xff1a;https://arxiv.org/pdf/2404.08189 原文地址&#xff1a;rag-hallucination-structure-research-by-servicenow 在灾难性遗忘和模型漂移中&#xff0c;幻觉仍然是一个挑战。 2024 年 4 月 18 日 灾难性遗忘&#xff1a; 这是在序列学习或连续学习环境中出现…

Pycharm远程环境开发(保姆级详细步骤)

使用远程机器的python环境 同步一下linxu和window的文件 可以从远端下载到本地(如下图所示)&#xff0c;也可以从本地上传到linux&#xff0c;在左侧的目录里右键选择你所需要的上传文件点击deployment然后upload就行

k8s 资源组版本支持列表

1 kubernetes的资源注册表 kube-apiserver组件启动后的第一件事情是将Kubernetes所支持的资源注册到Scheme资源注册表中,这样后面启动的逻辑才能够从Scheme资源注册表中拿到资源信息并启动和运行API服务。 kube-apiserver资源注册分为两步:第1步,初始化Scheme资源注册表;…

Linux进程——Linux下常见的进程状态

前言&#xff1a;在进程学习这一块&#xff0c;我们主要学习的就是PCB这个进程控制块&#xff0c;而PBC就是用来描述进程的结构体&#xff0c;而进程状态就是PCB结构体中的一个变量。 本篇主要内容&#xff1a; 操作系统中的进程状态Linux下的进程状态 在开始之前&#xff0c;我…

AI学习指南-人工智能概述

欢迎来到人工智能的奇妙世界&#xff01;如果你是初学者&#xff0c;那么你来对地方了。今天&#xff0c;我们将一起探索人工智能&#xff08;AI&#xff09;的基本概念&#xff0c;看看它是如何分类的&#xff0c;它的应用有哪些&#xff0c;以及未来可能的发展方向。准备好了…

每日一题(力扣740):删除并获得点数--dp+思维

其实跟打家劫舍没啥区别 排序去重之后去考虑当前位置和前两个位置之间的关系即可&#xff0c;具体见代码&#xff1a; class Solution { public:int deleteAndEarn(vector<int>& nums) {int n nums.size();if (n 1) return nums[0];unordered_map<int, int>…

Java项目:基于SSM框架实现的在线医疗服务系统(ssm+B/S架构+源码+数据库+毕业论文+开题报告)

一、项目简介 本项目是一套基于SSM框架实现的在线医疗服务系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能…

MES(制造执行系统)与PDCA循环,斩不断理还乱的关系。

MES系统算是B端系统中比较复杂的一种&#xff0c;这与我国制造业标准化程度较低有一定的关联&#xff0c;MES的存在就是要更好执行PDCA循环&#xff0c;二者关联是千丝万缕的&#xff0c;B系统提升专家借此为大家分享一下。 一、什么是PDCA PDCA&#xff08;Plan-Do-Check-Ac…