react进阶

  1. react-virtualized的高阶组件,Autosize可以使屏幕适配。使用render-props模式来获取到AutoSizer组件暴露的width和height属性。
  2. JSON.parse(JSON.stringify())不适用于有undefined的数据。
    深拷贝的使用,不能使用在有undefined的数据中。有直接过滤undefinded的数据。
  3. deepcopy (递归深复制)性能不好,占用内存。
  4. immutable的拷贝:从子组件获取到地址信息,如果有新值,新值指向新值,其他继续引用旧函数。最好配合immutable的方法。
  5. mobx的使用:使用observable来订阅信息,使用autorun来消费信息。autorun会自动去绑定里面相关的值,相关值改变时才进行改变。绑定值可以使用observable.get和observable.map绑定。装饰器浏览器要识别要使用@babel/plugin-proposal-decorators,配置.babelrc添加装饰器的语法。再安装 npm i customize-cra react-app-rewired。
  6. styled-components:在js中使用css。cosnt StyledFooter = styled.footer`background: yellow`,使用标签函数。原理是用这个去包装你的组件,形成高阶函数,且默认加上了一些样式。
  7. yield和* 什么时候可以用到,在redux-sage或者dva中会使用
  8. redux-saga: redux的中间件,可执行副作用的异步操作数据的方法。
  9. formik 表单验证,react的高阶函数
  10. 兄弟组件通信,将共享状态提升至最近的公父组件中,由公共父组件管理这个状态,状态提升。
  11. 样式覆盖:在配置路由时,CityList和Map组件都被导入到项目中,那么组件的样式也就被导入到项目中。如果组件之间样式名称相同,那么一个组件中的样式就会在另一个组件中生效,从而造成组件之间样式相互覆盖的问题。
    1. 解决方案:1、类名不同。2、scss的嵌套。3、css in js。
  12. css in js:指在javascript编写css的统称,用来解决css样式的冲突,覆盖等问题。常见有:css modules、styled-components等。
  13. css modules:实现方式,使用了webpack的css-loader插件;命名采用:BEM(block块,element元素、modifier三部分组成)命名规范,比如:.list_item_active。
    1. 使用方式:创建一个名为 xxx.module.css 的样式文件。如 import styles from "./index.module.css";
    2. <div style={styles.text}></div
  14. umijs,Dva:
    1. 重定向组件
      import {} from "umi";
      <Redirect to="/film" />
    2. 嵌套路由:
      在pages中新建文件夹film,该文件夹下还有一个_layout.tsx,默认是访问这个。如果同级目录中有Comingsoon.tsx,在路径输入后会返回到新加的文件。
      如果要使用父路由调用子路由,就使用props.children的方法。function Film(props){<div>{props.children}</div> }
      如果需要读取路由信息,使用const location = useLocation();中
      可以新建一个layouts来存放根组件目录。级别比较高,需要使用{props.children}显示视图。
  • GraphQL的使用:进行处理数据,规定后端一些字段。
  • umi下的dvajs:原生dvajs,要手动注册redux的同步和异步。
    1. umi就不用手动注册。
    2. 全局安装npm install dva-cli -g

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

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

相关文章

jacoco功能测试-代码覆盖率

1、下载 jacoco 官网地址&#xff1a;EclEmma - JaCoCo Java Code Coverage Library 2、拷贝 jar 包 下载好后&#xff0c;找到这两个文件&#xff0c;然后找到被测项目 3、启动 jacocoagent&#xff0c;监控被测项目 java -javaagent:jacocoagent.jarincludes*,outputtcp…

【Java】异常处理 之 使用Log4j

使用 Log4j 前面介绍了Commons Logging&#xff0c;可以作为“日志接口”来使用。而真正的“日志实现”可以使用Log4j。 Log4j是一种非常流行的日志框架&#xff0c;最新版本是2.x。 Log4j是一个组件化设计的日志系统&#xff0c;它的架构大致如下&#xff1a; log.info(&q…

linux0.95(VFS重点)源码通俗解读(施工中)

文件系统在磁盘中的体现 下面是磁盘的内容&#xff0c;其中i节点就是一个inode数组&#xff0c;逻辑块就是数据块可用于存放数据 操作系统通过将磁盘数据读入到内存中指定的缓冲区块来与磁盘交互&#xff0c;对内存中的缓冲区块修改后写回磁盘。 进程(task_struct * task[N…

Mysql中如果建立了索引,索引所占的空间随着数据量增长而变大,这样无论写入还是查询,性能都会有所下降,怎么处理?

索引所占空间的增长确实会对MySQL数据库的写入性能和查询性能造成影响&#xff0c;这主要是由于索引数据过多时会导致磁盘I/O操作变得非常频繁&#xff0c;从而使性能下降。为此&#xff0c;可以采取以下几种方式来减缓这种影响&#xff1a; 1. 限制索引的大小&#xff1a;可以…

Netty框架技术文档-基本概念

Netty: Home https://github.com/netty/netty 基本概念 NIO&#xff08;Non-blocking I/O&#xff0c;非阻塞I/O&#xff09;&#xff1a;NIO是一种Java平台的I/O模型&#xff0c;它使用Channel和Buffer来进行数据传输&#xff0c;而不是传统的Stream。NIO模型可以处理大量并…

TCP除了3次握手,其他的这些你知道吗?

文章首发地址 MSS&#xff1a; MSS&#xff08;Maximum Segment Size&#xff09;表示TCP报文段的最大长度&#xff0c;通常是MSSMTU-TCP头部长度。由于数据链路层协议的MTU可能不同&#xff0c;因此TCP连接建立时会通过MSS选项告知对方报文段的最大长度。MTU&#xff1a; MTU…

【探索SpringCloud】服务发现-Nacos使用

前言 在聊服务注册中心时&#xff0c;便提到了Nacos。这次便来认识一下。当然&#xff0c;这自然没有官方介绍那般详尽&#xff0c;权当是学习了解Nacos原理的一个过程吧。 Nacos简介 Nacos&#xff0c;全名&#xff1a;dynamic Naming And Configuration Service. 而这个名…

Java JDBC,轻松构建数据库连接:代码教程详解

JDBC的概述 Java Database Connectivity&#xff08;JDBC&#xff09;是 Java 中用于与数据库进行通信的 API。它提供了一套标准的 API&#xff0c;并允许 Java 应用程序连接到各种关系型数据库&#xff0c;如 MySQL、Oracle、PostgreSQL 等&#xff0c;从而可以执行 SQL 查询…

win10在vmware15中安装macos10.13系统

第一步、安装vmware版本信息如下 第二步、下载unlocker-main和darwin.iso放到安装文件夹 第三步、管理员身份运行win-install.cmd 第四步、运行vmware新建虚拟机 第五步、启动新创建的虚拟机macOS 10.13并选择语言 第六步、选择磁盘工具抹掉磁盘 第七步、格式化完成后退出磁盘工…

flutter 随笔

万物 皆可 结构 概念 ⽆状态 插件类 flutter系统类 MaterialApp源App应⽤ 事件 很简单/简单/较复杂/复杂/很复杂 结构体 MaterialApp(xx:) 公开坑位属性&#xff1a;所配置内容 Widget 插件事件 function 函数事件 flutter/dart 事件结构描述void Function() 外层主事件 内层回…

数据结构:交换排序

冒泡排序 起泡排序&#xff0c;别名“冒泡排序”&#xff0c;该算法的核心思想是将无序表中的所有记录&#xff0c;通过两两比较关键字&#xff0c;得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素&#xff0c;就交换它们。对每一对相邻…

Python-OpenCV中的图像处理-图像金字塔

Python-OpenCV中的图像处理-图像金字塔 图像金字塔高斯金字塔拉普拉斯金字塔 金字塔图像融合 图像金字塔 同一图像的不同分辨率的子图集合&#xff0c;如果把最大的图像放在底部&#xff0c;最小的放在顶部&#xff0c;看起来像一座金字塔&#xff0c;故而得名图像金字塔。cv2…

小程序发布注意事项

1、使用HBuildx的 发布 功能发布小程序&#xff0c;因为编译完的代码目录不是同一个 如果使用 运行 到小程序&#xff0c;最后发布的版本会显示”无法连接本地服务器“ 2、使用unicloud的云服务 uniCloud发行 | uni-app官网 阿里云的unicloud的话&#xff0c;使用request域名…

Spring中Bean的循环依赖问题

1.什么是Bean的循环依赖&#xff1f; 简单来说就是在A类中&#xff0c;初始化A时需要用到B对象&#xff0c;而在B类中&#xff0c;初始化B时需要用到A对象&#xff0c;这种状况下在Spring中&#xff0c;如果A和B同时初始化&#xff0c;A&#xff0c;B同时都需要对方的资源&…

电脑开机出现Boot Device怎么办?

开机出现Boot Device这个问题很常见&#xff0c;有时还会出现No Boot Device的问题&#xff0c;虽然多了一个单词&#xff0c;但意思是相同的&#xff0c;这些问题说明你的系统盘出现了问题&#xff0c;或者是引导出现了问题。这该如何解决呢&#xff1f; 方法1. 检查主板或硬盘…

【算法——双指针】LeetCode 283 移动零

题目描述&#xff1a; 思路&#xff1a; (双指针) O(n)O(n)O(n) 给定一个数组 nums&#xff0c;要求我们将所有的 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 如图所示&#xff0c;数组nums [0,1,0,3,12]&#xff0c;移动完成后变成nums [1,3,12,0,0] &am…

若依vue -【 100 ~ 更 ~ 110 】

100 主子表代码生成详解 1 新建数据库表结构&#xff08;主子表&#xff09; -- ---------------------------- -- 客户表 -- ---------------------------- drop table if exists sys_customer; create table sys_customer (customer_id bigint(20) not null…

Docker部署rabbitmq遇到的问题 Stats in management UI are disabled on this node

1. Stats in management UI are disabled on this node #进入rabbitmq容器 docker exec -it {rabbitmq容器名称或者id} /bin/bash#进入容器后&#xff0c;cd到以下路径 cd /etc/rabbitmq/conf.d/#修改 management_agent.disable_metrics_collector false echo management_age…

谈谈语音助手

目录 1.什么是语音助手 2.语音助手的发展过程 3.现在有哪些成熟的语音助手 4.语音助手对人类发展的影响 1.什么是语音助手 语音助手是一种能够通过语音交互与用户进行沟通和执行任务的虚拟助手。它基于人工智能和自然语言处理技术&#xff0c;能够理解用户的语音指令&#x…

数据结构-队列的实现(C语言版)

前言 队列是一种特殊的线性表&#xff0c;它只允许在一端对数据进行插入操作&#xff0c;在另一端对数据进行删除操作的特殊线性表&#xff0c;队列具有先进先出的&#xff08;FIFO&#xff09;的 特性&#xff0c;进行插入操作的一端称为队尾&#xff0c;进行删除操作的一端称…