react 大杂烩

组件

1.是返回标签的js函数,是可重复利用的UI元素

function test(){
return (

test

);
}

2.构建组件:

(1)export 导出组件

(2)定义函数,名称必须以大写字母开头

(3)添加标签

3.具名导出

将test组件从test.tsx导出

import { test } from ‘./test’

4.JSX标签只能返回一个根元素,用父标签包裹

标签必须闭合

驼峰命名

5.JSX与大括号

通过{}使用JS变量

使用场景:jsx内的文本,=后的属性

{{}},包裹的对象

6.props传递

Props 反映了组件在任何时间点的数据

传递:通过jsx

读取:

function Avatar({ person, size }) {
// 在这里 person 和 size 是可访问的
}

7.条件渲染

if语句,&&和?:运算符选择性渲染jsx

{cond ? : } 表示 “当 cond 为真值时, 渲染 ,否则

{cond && } 表示 “当 cond 为真值时, 渲染 ,否则不进行渲染”

8.渲染列表

数据存在列表中,通过map()或filter()遍历,用

  • 包裹并返回

直接放在map()方法中的元素要指定key,一般使用能从给定数据中稳定取得的值

State和生命周期

useState的唯一参数是state变量的初始值,state变量保存上次渲染的值,state setter函数更新state并触发react重新渲染组件

state是隔离且组件私有的

state管理部分

没有在网站上找到生命周期的内容

23-06-21

Hook

1.Hooks ——以 use 开头的函数——只能在组件或自定义 Hook的最顶层调用,不能在条件语句、循环语句或其他嵌套函数内调用 Hook。

useState

setState是异步的,虽然时间很短,但不足以在上一行代码设置,下一行代码就使用,即state 的值始终”固定“在一次渲染的各个事件处理函数内部。

批处理:React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新。这允许更新多个变量,而不会触发太多次重新渲染。但也因此只有其他代码执行完毕后,ui才会更新。

如果想在下一次渲染之前多次更新同一个state,可以像setNumber(n => n + 1)传入更新函数。

组件的渲染:初次渲染、修改state会触发组件渲染

只想更新state中对象的部分属性,可以使用…对象传播语法,更新嵌套对象,需要一层层展开

setPerson({
…person, // Copy the old fields
firstName: e.target.value // But override this one
});

更新state中的数组:

添加元素,concta,[…arr],why?因为state只能通过setstate修改,使用[].push会修改state

删除元素,filter,slice

替换,map

排序,先用临时变量拷贝数组(浅拷贝),排序后再用setState

构建state的原则:

合并关联的state

避免互相矛盾的state

避免冗余的state,如果可以使用两个state表达第三个state,那就不需要三个state

避免重复的state

避免深度嵌套的state

状态提升:

当希望两个组件的状态始终同步更改,可以将相关 state 从这两个组件上移除,并把 state 放到它们的公共父级,再通过 props 将 state 传递给这两个组件

移除一个组件的时候,也会销毁它内部的state,只有在相同位置渲染同样的组件,才保留。

可以通过为一个子树指定一个不同的 key 来重置它的 state。

useContext

Context 使组件向其下方的整个树提供信息(传递多层)

使用场景:

主题,在应用顶层放一个 context provider,提供一个统一的主题模式

当前账户,许多子组件需要当前登陆的用户信息

路由

状态管理

创建方法:

通过 export const MyContext = createContext(defaultValue) 创建并导出 context。

在无论层级多深的任何子组件中,把 context 传递给 useContext(MyContext) Hook 来读取它。

在父组件中把 children 包在 <MyContext.Provider value={…}> 中来提供 context。

Context 会穿过中间的任何组件

useRef

使用场景:记住一些信息,但不想让这些信息触发渲染

通过ref.current访问数据

更改时不会触发重新渲染,可以在渲染过程之外修改和更新current的值

子组件使用父组件的ref时,直接往子组件传ref

父组件使用子组件的ref时需要使用forwardRef

23-06-25

useEffect

useEffect(() => {
// This runs after every render
});

useEffect(() => {
// This runs only on mount (when the component appears)
}, []);

useEffect(() => {
// This runs on mount and also if either a or b have changed since the last render
}, [a, b]);

return:一般返回一个清理函数,每次effect再次运行之前,react都会调用这个清理函数,最后一次是在组件卸载(被删除)时调用。

effect是由渲染本身引起的,默认情况下,effect在初始渲染和每次再次渲染后运行。

依赖项为空时,仅在组件挂载时执行。

所使用的所有依赖都要写到依赖项中。

如果Effect 的所有依赖项都具有与上次渲染期间相同的值,React 将跳过 Effect。

在严格模式下,React 会挂载组件两次(仅在开发中)来对effect进行压力测试。

什么时候应该使用:

1.控制非react的ui部件:某些api不允许连续调用两次,因此在重新渲染前应该先关闭(通过清理函数),再重新调用

2.订阅:订阅了某些内容,每次只能有一个activate的订阅

3.触发动画:清理函数中需要把时间轴重置为初始状态

4.获取数据:通过数据请求链接获取数据,清理函数中需要中断数据链接或忽略之前请求的数据结果

5.发送analytics

不必要的场景:

1.能够根据state或者props来更新state

2.用useMemo换成昂贵的计算结果

useState

const [state, setState] = useState(initialState);

向组件添加状态

set函数允许将state更新为不同的值并触发渲染

提供的新值与当前state相同,将skip re-rendering 组件及其子组件

调用set函数不会改变运行代码中的状态

import React from ‘react’
import {View,Text,Button} from ‘@mrn/react-native’
import {useState} from ‘react’
export function test(){
const [count,setCount]=useState(1);
function handleClick(){
setCount(count+1);
}
return (
<>


function test+{count}



</>);
}

useEffect

将组件与外部系统(不受react控制的代码)同步

useEffect(setup, dependencies?)

setup:具有效果逻辑的function,dependencies:需要包括在function中使用到的组件中的每个值

return undefined

import { useEffect } from ‘react’;
import { createConnection } from ‘./chat.js’;

function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState(‘https://localhost:1234’);

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();//连接
return () => {
connection.disconnect();//断开
};
}, [serverUrl, roomId]);
// …
}

useCallback

在重新渲染之间缓存function定义(?)

const cachedFn = useCallback(fn, dependencies)

fn:要缓存的函数值,dependencies:fn中涉及到的所有的reactive values

return 传递的function

使用:

1.跳过组件的重新渲染:当一个组件重新渲染时,React 会递归地重新渲染它的所有子组件,通过useCallback包装的function,可以保证它在重新渲染是相同的function

2.从被memorized的callback(?)中更新state

3.防止Effect过于频繁地触发

4.优化自定义Hook

useMemo

在重新渲染之间缓存计算结果

const cachedValue = useMemo(calculateValue, dependencies)

calculateValue:计算要缓存的值的函数

初次渲染时,返回不带参数,下一次渲染期间返回上次渲染中已存储的值

使用:

1.跳过昂贵的重新计算

2.跳过组件的重新渲染

3.记忆另一个Hook依赖

4.记忆一个function

useRef

引用一个不需要渲染的值

const ref = useRef(initialValue)

initialValue:ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略。

返回一个只有一个属性的对象:

current:最开始被设置为传递的 initialValue。之后可以把它设置为其他值。如果把 ref 对象作为一个 JSX 节点的 ref 属性传递给 React,React 将为它设置 current 属性。

在后续的渲染中,useRef 将返回同一个对象。

可以修改ref.current的属性,除了初始化以外不要在渲染期间写入 或者读取 ref.current

使用:

1.用ref引用一个值

2.操作DOM

3.避免重复创建ref的内容

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

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

相关文章

嵌入式开发-单片机学习介绍

一、单片机入门篇 单片机的定义和历史 单片机是一种集成了微处理器、存储器、输入输出接口和其他功能于一体的微型计算机&#xff0c;具有高度的集成性和便携性。单片机的历史可以追溯到20世纪70年代&#xff0c;随着微电子技术的不断发展&#xff0c;单片机逐渐成为了工业控…

操作XML(带命名空间)

之前文章讲述了使用c# xpath如何操作xml文件&#xff0c;在实际开发项目中&#xff0c;遇到的很多xml文件都是带有命名空间的&#xff0c;如果还是用之前的代码获取&#xff0c;那将获取到null。 本文讲解操作代码有命名空间的Xml文件&#xff0c;以及多个命名空间的xml。 <…

ubuntu22.04搭建verilator仿真环境

概述 操作系统为 Ubuntu(22.04.2 LTS)&#xff0c;本次安装verilator开源verilog仿真工具&#xff0c;进行RTL功能仿真。下面构建版本为5.008的verilator仿真环境。先看一下我系统的版本&#xff1a; 安装流程 安装依赖 sudo apt-get install git perl python3 make autoc…

多级缓存 架构设计

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;很多小伙伴拿到一线互联网企业如阿里、网易、有赞、希音、百度、网易、滴滴的面试资格&#xff0c;多次遇到一个很重要的面试题&#xff1a; 20w的QPS的场景下&#xff0c;服务端架构应如何设计&#xff1f;10w的QPS…

【原创】鲲鹏ARM构架openEuler操作系统安装Oracle 19c

作者:einyboy 【原创】鲲鹏ARM构架openEuler操作系统安装Oracle 19c | 云非云计算机科学、自然科学技术科谱http://www.nclound.com/index.php/2023/09/03/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E9%B2%B2%E9%B9%8Farm%E6%9E%84%E6%9E%B6openeuler%E6%93%8D%E4%BD%9C%E7%B3%BB%…

FPGA优质开源项目 – UDP万兆光纤以太网通信

本文开源一个FPGA项目&#xff1a;UDP万兆光通信。该项目实现了万兆光纤以太网数据回环传输功能。Vivado工程代码结构和之前开源的《UDP RGMII千兆以太网》类似&#xff0c;只不过万兆以太网是调用了Xilinx的10G Ethernet Subsystem IP核实现。 下面围绕该IP核的使用、用户接口…

柔性数组

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、柔性数组的特点二、柔性数组的使用三、柔性数组的优势 前言 也许你从来没有听说过柔性数组&#xff08;flexible array&#xff09;这个概念&#xff0c;但…

LLMs NLP模型评估Model evaluation ROUGE and BLEU SCORE

在整个课程中&#xff0c;你看到过类似模型在这个任务上表现良好&#xff0c;或者这个微调模型在性能上相对于基础模型有显著提升等陈述。 这些陈述是什么意思&#xff1f;如何形式化你的微调模型在你起初的预训练模型上的性能改进&#xff1f;让我们探讨一些由大型语言模型开…

TypeScript学习 + 贪吃蛇项目

TypeSCript简介 TypeScript是JavaScript的超集。它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。TS完全兼容JS&#xff0c;换言之&#xff0c;任何的JS代码都可以直…

iOS swift5 弹出提示文字(停留1~2s)XHToastSwift

CoderZhuXH/XHToastSwift - github // // XHToast.swift // XHToastSwiftExample // // Created by xiaohui on 16/8/12. // Copyright © 2016年 CoderZhuXH. All rights reserved. // 代码地址:https://github.com/CoderZhuXH/XHToastSwiftimport UIKit/*** Toast…

MySQL高阶语句(三)

一、NULL值 在 SQL 语句使用过程中&#xff0c;经常会碰到 NULL 这几个字符。通常使用 NULL 来表示缺失 的值&#xff0c;也就是在表中该字段是没有值的。如果在创建表时&#xff0c;限制某些字段不为空&#xff0c;则可以使用 NOT NULL 关键字&#xff0c;不使用则默认可以为空…

数据结构学习系列之用队列实现栈功能与用栈实现队列功能

队列与栈&#xff1a;队列&#xff08;Queue&#xff09;是一种先进先出&#xff08;FIFO&#xff09;的线性表&#xff1b;栈&#xff08;Stack&#xff09;是一种后进先出&#xff08;LIFO&#xff09;的线性表&#xff1b;实例1&#xff1a;用队列实现栈的功能&#xff1b;算…

架构,平台,框架的区别和联系

1、解释说明 - 架构&#xff1a;在软件开发中&#xff0c;架构是指软件的整体设计和组织方式。它包括了软件的结构、组件和交互方式等方面的设计。架构定义了系统的高级结构和组织方式&#xff0c;以及各个组件之间的关系和交互方式。一个良好的架构可以提高软件的可维护性、可…

中级深入--day16

爬虫(Spider)&#xff0c;反爬虫(Anti-Spider)&#xff0c;反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... Day 1 小黄想要某站上所有的电影&#xff0c;写了标准的爬虫(基于HttpClient库)&#xff0c;不断地遍历某站的电影列表页面&#xff0c;根据 Html 分析电影名字存进…

Multisim14.0仿真(五)三角波发生器

一、仿真原理图&#xff1a; 二、仿真效果&#xff1a;

Three.js相机参数及Z-Fighting问题的解决方案

本主题讨论透视相机以及如何为远距离环境设置合适的视锥体。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 透视相机是一种投影模式&#xff0c;旨在模仿人类在现实世界中看待事物的方式。 这是渲染 3D 场景最常用的投影模式。 - three.js 如果你看一下 Three.js 文档…

单元测试:优雅编写Kotlin单元测试

一、MockK简介 MockK是一款功能强大、易于使用的Kotlin mocking框架。在编写单元测试时&#xff0c;MockK能够帮助我们简化代码、提高测试覆盖率&#xff0c;并改善测试的可维护性。除了基本用法外&#xff0c;MockK还提供了许多额外的功能和灵活的用法&#xff0c;让我们能够…

汇编原理学习记录:物理地址=段地址*16+偏移地址

文章目录 知识点个人思考解释存储器大小为1MB段的最大占用存储为64KB物理地址段地址*16偏移地址 知识点 8086计算机拥有20根地址总线和16根数据总线&#xff0c;地址总线中的16根和数据总线存在复用 数据总线的数量决定了数据总线的宽度&#xff0c;决定了处理器的位数&#…

go语言基础操作--二

a : 10str : "mike"//匿名函数&#xff0c;没有函数名字 形成一个闭包,函数定义&#xff0c;还没有调用f1 : func() { //:自动推到类型fmt.Println("a ", a)fmt.Println("str ", str)}f1()//给一个函数类型起别名 这个写法不推荐type FuncType …

04. 函数和函数调用机制

1. 先学习/复习C语言的入门知识 1.1 C语言简介 C语言是一种通用的编程语言&#xff0c;于1972年由丹尼斯里奇&#xff08;Dennis Ritchie&#xff09;创建。C语言最初目的是为了开发UNIX操作系统&#xff0c;但由于其简洁的语法、快速的执行速度和可移植性&#xff0c;自此成…