React面试

React渲染流程(重点)

jsx描述界面
jsx babel render function=>vdom
vdom fiber 在进行渲染
vdom 转换fiber reconcile
转换过程创建dom
commit 到dom

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

vdom React Element 对象, 只记录了子节点, 没有记录兄弟节点, 因为渲染不可中断

fiber fiberNode 对象, 是一个链表 父节点 兄弟节点子节点, 可以打断

React Fiber是什么(重点)

Fiber出现背景

React15 Stack Reconciler 同步递归过程, 不可中断
导致页面响应度变差

没有区别优先级

Fiber是什么

对核心调度过程重写
编码: 是一种树节点的数据结构
一个Fiber是一个节点对象

Fiber更新机制

  1. 初始化流程
    创建fiberRoot
    rooterFiber(ReactDom.render 或者 ReactDom.createRoot)

  2. beginwork

  • wip内存中构建workinprogreess fiber
    第一次更新后 current树

current: 视图层渲染的树 current fiber树

  1. 深度调和子节点渲染视图
    alernate树, 完成整个子节点便利, 包括fiber创建, wip树作为最新树, 完成初始化流程

更新
重新wip树

双缓存模式

减少页面抖动与卡顿,减少fiber节点性能损耗

为什么不能直接使用this.state改变数据

并不会重新触发render组件不重新渲染

this.state.message = ‘xxxxx’ // xx

不触发render
setState() // 触发render 页面响应

this.setState({
    message: 'hello'
})

setState 将需要更新的数据放到状态队列,并不会立刻更新状态setState
可以更高效的进行批量更新state

Redux工作原理

状态管理库

  • 跨层级的数据共享与通信

  • 需要持久化全局数据, 用户登录信息

  • Store 一个全局状态管理对象

  • Reducer 一个纯函数根据旧的state 和 props更新到state

  • Action 改变状态的唯一方法 dispatch action
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

React-Router工作原理

为什么需要前端路由

  • 早期: 用户体验差
  • spa 单页应用 seo不友好
  • 记住用户操作

解决什么问题

  • 刷新页面 根据url对资源进行重定向
  • 根据url映射到不同内容
  • 拦截用户刷新操作: 感知url变化

react-router-dom有哪些组件

HashRouter BroserRouter 路由器
Router 路由匹配
Link 连接
NavLink 当前活动的连接
Switch路由跳转
Redirect 路由重定向

核心:跳转页面
路由: 定义路由与组件映射关系
导航: 复杂触发路由改变

BroserRouter html5 history api实现路由跳转
popState

HashRouter url的hash 属性
#xx
hashChange 触发路由更新

React Hook(重点)

区别

  • 类组件需要生命周期 constructor 函数组件不需要
  • 类组件需要手动绑定 this, 函数组件no
  • 类: 有生命周期 函数:no 通过useEffect模拟生命周期
  • 类组件: 维护自己state, 函数: 无状态
  • 类: 需要集成 函数不需要
  • 类: 面向对象方法 封装: 组件属性方法, 封装到组件内部, 继承extends React.Component
    函数: 函数式编程思想

why React hooks

  • 告别难以理解的class 组件
  • 解决业务逻辑难拆分
  • 使状态逻辑复用简单
  • 设计理念: 函数式编程思想

局限性

  • 不能完整对函数组件提供类组件能力

  • 对dev提出更高要求

  • hooks规则约束

  • useEffect 监听数据变化

  • useMemo 缓存变量. 如果依赖不变化,不触发回调函数更新,不触发页面重新渲染

  • useState 维护自己数据

  • useEffectLayout

  • useCallback 缓存函数. 如果依赖不变化,不触发回调函数更新函数,不触发页面重新渲染

React 常用组件

Portal

让子组件渲染在除了父组件之外的dom节点地方

ReactDom.createPortal(child, container)

-弹窗 提示框

Fragment

包裹子列表, 不产生额外dom节点方法

Context

props

跨层级组件数据传递方法

Transition

React 18 引入 并发特性, 允许操作被中断

React中用户如何根据不同权限,查看不同页面?

  1. js
    1. ajax role->请求不同的memuList json,展示有权限菜单
  2. react-router
    1.onEnter
<Router path="/home" component={App} onEnter={
    (nextState, replace)=>{
        // 根据菜单判断用户信息
        const uid = utils.getUrlParams(nextState, 'uid');
        if(!uid){
            replace('/')
        }else{
            // 展示用户信息
        }
    }
}>

封装一个privateRouter

React事件机制(重点)

什么是合成事件
事件触发, 事件冒泡 事件捕获 事件合成 派发

作用:

  • 底层磨平不同浏览器之前差异, 暴露稳定, 统一 与原生事件相同接口
  • 把握主动权, 中心化控制
  • 引入事件池 避免频繁创建销毁

与原生dom事件区别
包含对原生dom事件引用 e.nativeEvent

dom事件流如何工作?

  1. 事件捕获
  2. 处于目标
  3. 事件冒泡

React16 绑定在document
React17 绑定在container ReactDom.render(app, container)

  1. 事件绑定在container上, 减少内存开销
  2. 自身实现冒泡机制, 不能通过return false组织冒泡
  3. 通过SytheticEvent 实现事件合成

React事件与普通HTML事件有什么区别?

  • 事件名称

  • 原生: 全小写

  • react: onClick 小驼峰

  • 事件处理函数

  • 原生: 字符串

  • react: onClick={}

  • 阻止浏览器本身默认行为

  • 原生: return false

  • react: preventDefault()

VDOM合成事件
模拟原生DOM模拟原生DOM行为

cross platform react所有事件全部存放在数组中

为什么需要使用Hooks

  1. 复杂组件
    componentDidMount, componentDidUpdate, componentWillUnmount

    1. addEventListener removeEventListener
    2. useEffect(()=>{}, [])

便于将逻辑抽离到useEffect, 实现高内聚,低耦合
2. class
1. this

Fragments

保证函数唯一的根节点

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

算法:完全背包问题dp

文章目录 一、完全背包问题的特征二、定义状态三、状态转移四、降维优化五、参考例题5.1、Acwing&#xff1a;3.完全背包问题5.2、Acwing&#xff1a;900. 整数划分 一、完全背包问题的特征 完全背包问题是动态规划中的一种经典问题&#xff0c;它的主要特征可以总结如下&…

政安晨:【深度学习神经网络基础】(四)—— 自组织映射

目录 自组织映射和邻域函数 理解邻域函数 墨西哥帽邻域函数 计算SOM误差 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

APx500音频分析仪硬件简介

两通道模拟输出&#xff0c;两通道或以上的模拟输入接口 线性编码数字音频接口&#xff08;AES/EBU,TOSLINK,SPDIF&#xff09;Linear PCM 脉冲密度调制码流&#xff08;需要APx-PDM选件支持&#xff09; Bluetooth蓝牙音频码流&#xff08;需APx-BT选件支持&#xff09; 最…

打印月历 Open Judge

题面链接: http://noi.openjudge.cn/ch0113/24/ 题目描述: 评析: 大模拟题&#xff0c;考察的是你的耐心和毅力&#xff01;很不错的模拟题练习题&#xff0c;小白(like me)可以练一练 思路: 先一个月一个月的模拟&#xff0c;求出来题目问的这个一年的这一个月的第一天是星期…

C#互联网区域医学检验中心云LIS系统源码

云LIS联通四级&#xff08;市、县、乡、村&#xff09;检验服务网构建互联网检验服务新体系落地检验资源区域共享建设。云LIS系统是一种基于云计算技术的区域实验室信息管理系统&#xff0c;它的主要功能是管理实验室中的各种信息数据&#xff0c;包括样品数据、检测结果、仪器…

多视觉传感器协同弱小目标检测

源自&#xff1a;指挥与控制学院 作者&#xff1a;王田&#xff0c; 程嘉翔&#xff0c; 刘克新&#xff0c;王薇&#xff0c; 吕金虎 “人工智能技术与咨询” 发布 摘 要 多视觉传感器协同对空实现全区域覆盖的弱小目标检测&#xff0c;在近距离防空领域中具有重要意义。…

酷开科技不断深耕智能电视领域,用酷开系统带给消费者更多可能性

在这个网络快速发展的时代&#xff0c;电视行业也发生了巨大变革。与以往单纯的“看”电视不同&#xff0c;人们不再满足于现有的状态&#xff0c;消费者对电视娱乐的追求更加丰富&#xff0c;这也就带给智能电视产业无限的发展可能。酷开科技瞄准这一产业趋势&#xff0c;不断…

Golang | Leetcode Golang题解之第18题四数之和

题目&#xff1a; 题解&#xff1a; func fourSum(nums []int, target int) (quadruplets [][]int) {sort.Ints(nums)n : len(nums)for i : 0; i < n-3 && nums[i]nums[i1]nums[i2]nums[i3] < target; i {if i > 0 && nums[i] nums[i-1] || nums[i]…

VLAN间的通信

目录 原理概述 实验目的 实验内容 实验拓扑 1.基本配置 2.使用VLANIF接口实现VLAN间的通信 3.使用VLAN聚合实现VLAN间的通信。 原理概述 通常情况下&#xff0c;如果不采用一些特殊的方法&#xff08;如采用Hybrid端口的方法&#xff09;&#xff0c;不同的VLAN之间是不…

力扣--动态规划完全背包/深度优先08.11.零币

如果暴力的深度优先&#xff1a; class Solution {// 定义硬币的面值数组int fangx[4] {25, 10, 5, 1};// 计数变量&#xff0c;用于记录配合得到 n 的方法数long long count 0;// 定义深度优先搜索函数// now: 当前总值// n: 目标总值// notbig: 上一次选择的硬币面值索引…

PCB学习记录-----入门基础知识

一、搭建环境 1.下载嘉立创EDA 软件下载 - 嘉立创EDA (lceda.cn) 选专业版 在线编辑&#xff1a;嘉立创EDA(专业版) - V2.1.45 (lceda.cn) 官方教程&#xff1a;立创EDA专业版-使用教程 (lceda.cn) 2.新建工程 文件-新建-项目&#xff0c;右键Board1可以重命名&#xff…

Debian 12.0安装NVM管理器

cd到一个自己创建的目录 要在Debian 12.0上安装 Node Version Manager&#xff08;NVM&#xff09;来管理 Node.js 版本&#xff0c;您可以按照以下步骤进行操作&#xff1a; 首先&#xff0c;您需要使用 cURL 下载 NVM 安装脚本。在终端中运行以下命令&#xff1a; curl -o…

读博做FPGA上的AI加速能不能搞啊?

从企业的角度来看&#xff0c;选择在FPGA上进行AI加速仍然有其一定的优势和适用场景&#xff0c;但也有一些挑战需要考虑。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给…

使用Datax自定义采集组件Reader/Writer实现国产数据库支持以及_Datax数据清洗/过滤规则功能自定义---大数据之DataX工作笔记007

我们基于datax来做的自己的数据采集系统,现在基本的数据采集已经实现了,也就是调用datax的数据采集能力,实现在已支持的数据库之间同步数据.我们是基于datax-web实现的,里面都有开源的代码了,可以分析以后拿过来用,这个过程并不复杂,而且,结合xxljob的web那个开源项目,也可以让…

S19文件解析

目录 一、概述 二、S19文件解析 三、举例 一、概述&#xff1a; Motorola S-record是一种文件格式&#xff0c;由摩托罗拉在20世纪70年代中期为Motorola 6800处理器创建&#xff0c;以ASCII文本形式传达二进制信息的十六进制值&#xff0c;其文件格式也可能为SRECORD&#xf…

如何使用宝塔面板搭建MySQL数据库并实现无公网IP远程访问

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

Macos 部署自己的privateGpt(2024-0404)

Private Chatgpt 安装指引 https://docs.privategpt.dev/installation/getting-started/installation#base-requirements-to-run-privategpt 下载源码 git clone https://github.com/imartinez/privateGPT cd privateGPT安装软件 安装&#xff1a; Homebrew /bin/bash -c…

《C语言深度解剖》(3):探索函数递归、传值、传址调用的奥秘

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多数据结构与算法点击专栏链接查看&am…

Linux锁的使用

一、临界资源与临界区 多线程会共享例如全局变量等资源&#xff0c;我们把会被多个执行流访问的资源称为临界资源&#xff0c;我们是通过代码访问临界资源的&#xff0c;而我们访问临界资源的那部分代码称为临界区。 实现一个抢票系统 只有一个线程抢票时 #include <ios…

【二分查找】Leetcode 寻找峰值

题目解析 162. 寻找峰值 题目中有一个很重要的提示&#xff1a;对所有有效的i都存在nums[i] ! nums[i1],因此这道题不需要考虑nums[mid] 和 nums[mid1]之间的相等与否的关系 算法讲解 1. 暴力枚举 我们按照顺序判断每个数字是否是当前的峰值&#xff0c;如果是直接返回&#…