前端技能树，面试复习第 28 天—— React 综合问题解析 | 实现一个全局 Dialog | React 的设计理念 | SSR | JSX 的原理 | HOC 高阶组件

已于 2022-07-20 09:02:09 修改
阅读量280 收藏
点赞数
分类专栏： 前端面试复习笔记 文章标签： 前端 react.js javascript 前端面试 React 面试题
于 2022-07-20 09:01:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ImagineCode/article/details/125884728
版权
本文探讨了React组件命名规范，16.x版本的改进，实现全局Dialog的方法，数据持久化策略，React与Vue的异同，以及如何在React中使用TypeScript。文章详细解释了React的设计理念，包括声明式编程、组件化、Virtual DOM和函数式编程思想。此外，还讨论了React的状态提升、严格模式、遍历方法和SSR的理解。最后，文章介绍了HOC高阶组件的概念及其与mixins相比的优点。
摘要由CSDN通过智能技术生成

⭐️ 本文首发自 前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、答疑解惑、面试辅导以及职业发展。。

1. React组件命名推荐的方式是哪个？

通过引用而不是使用来命名组件 displayName。

使用 displayName 命名组件：

export default React.createClass
了解本专栏 订阅专栏 解锁全文 超级会员免费看
编程轨迹_
关注
专栏目录
订阅专栏
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，
VAN
04-22 65
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。
2023年前端面试汇总-React
越陌度阡
06-29 891
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
react 全局公共组件-----动态弹窗 (dialog)
weixin_30908941的博客
09-13 1674
react 的时候，总是会用到弹窗，并且各种各样的，一般来说，组件层级嵌套之后，就会出现 z-index层级覆盖的问题 这个时候，就需要一个公共的弹出层，然后我们将需要展示的组件，放到弹出层里面 下面是目录结构： dialog.jsx代码 import React, { Component } from 'react'; import { is, fromJS } f...
面试题：React实现一个Dialog模板
愤怒的小火柴人
08-29 1374
题目大概是要实现一个dialog的模板，你可以应用他实现很多功能，比如说某个操作的确认提醒等，我们要做的实现这样一个可应用都多个功能的dialog，只要你想要显示的组件写好，外部嵌套这样一个dialog组件，就能实现...
react全局弹窗
qq_40414209的博客
05-17 668
import React from 'react'; import ReactDOM from 'react-dom'; import { Snackbar } from '@material-ui/core'; import { Alert ,Color} from "@material-ui/lab"; export default function DialogAlert(msg:string = "",duration:number=1500,type:Color = "error"){
Dialog 按照顺序弹窗，2021大厂Android开发面试总结+解答
m0_66264533的博客
01-24 510
参数说明如下： | 参数 | 说明 | | — | — | | progress | 加载进度 | | foreDrawType | 波浪图的绘制类型: DrawColor 或者 DrawImage | | backDrawType | 波浪图的背景绘制 | | amplitude | 波浪的振幅， 0f ~ 1f 表示振幅在整个绘制区域的占比 | | velocity | 波浪移动的速度 | | content | 子Composalble | 接下来重点介绍一下 DrawType。 DrawType
React对话框组件实现
weixin_30797199的博客
07-24 240
当下前端届最火的技术之一莫过于React + Redux + webpack的技术结合。最近公司内部也正在转react，这周主要做了个React的modal组件，接下来谈下具体实现过程。 基本的HTML结构 虽然React基于虚拟DOM，但他的JSX语法还是离不开最基本的HTML。第一步要做的就是通过HTML&&CSS实现Dialog垂直水平居中框。HTML结构如下： ...
一天梳理完React所有面试考察知识点
beifeng11996的博客
10-25 108
返回一个新值，没有副作用（不会修改其它值）// 父类 class People {consoloe . log('eating') } } // 继承 class Student extends People {super(old) // 变量传递给父类执行 this . name = name this . number = number } sayHi() {
通宵整理的react面试题并附上自己的答案
beifeng11996的博客
11-16 353
Fiber是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。抹平浏览器差异，实现更好的跨平台。避免垃圾回收，React 引入事件池，在事件池中获取或释放事件对象，避免频繁地去创建和销毁。
Vue相关前端面试题目总结
秀秀的奇妙旅行
11-07 1849
说下你对 mvvm 的理解？双向绑定的理解？请详细说下你对 vue 生命周期的理解？请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？webpack什么是webpack 说下你对 mvvm 的理解？双向绑定的理解？ 请详细说下你对 vue 生命周期的理解？ 请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？ webpack 什么是webpack ...
React+TS前台项目实战（九）-- 全局常用组件弹窗Dialog封装
最新发布
weixin_43883615的博客
06-14 1683
今天这篇主要讲全局公共弹窗Dialog组件封装，将用到上篇封装的模态框Modal组件。有时在前台项目中，偶尔要用到一两个常用的组件，如 弹窗，其实不必非安装ant-design这些主流框架，大可自定义封装一个，而无需引入额外依赖， 提高自己的封装能力。下一篇讲【全局常用组件Text封装】。关注本栏目，将实时更新。
react实现全局组件确认弹窗
双双浪的博客
12-16 3823
本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用 创建全局modal组件 此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。 import ReactDOM from 'react-dom'; import React, { Fragment } from 'react'; import Button from 'components...
react全局的公共组件-------弹框 （Alert）
weixin_33998125的博客
04-24 1850
最近研究react，发现写一个组件很容易，但是要写一个全局的好像有点麻烦。不能像VUE一样，直接在原型上面扩展，注册全局组件下面实现一个弹框，只需要引入之后，直接调用方法即可，不需要写入组件给出我写react全局组件的思路。创建一个 div加入到body，用这个div当容器，渲染react组件，然后由改变组件的 state来控制弹框的显示隐藏代码结构如下：alter.jsximport React...
React在body下追加全局组件并实现渲染更新
热门推荐
qq_39629050的博客
06-30 1万+
组件化对前端来讲已是家常便饭，各种功能效果实现之后，冷不防产品又想让在另一个模块调用。简单，Ctrl + c + v一通操作，几十遍几十上百行代码不嫌烦的话完全OK的哈~。像我这么懒的人肯定是要利用组件一劳永逸哇。我们平时写的组件一般是在当前页面的某个元素节点下面使用，要是碰上一些蒙层或是需要置于顶层覆盖的组件，避免元素的隐藏属性则需要将组件放置于页面外层。保存运行，哎哟卧槽怎么还有个节点盖在上面...
漫谈 React 组件库开发（一）：多层嵌套弹层组件
weixin_33893473的博客
08-25 806
引言 UI 组件中有很多弹出式组件，常见的如 Dialog，Tooltip 以及 Select 等。这些组件都有一个特点，它们的弹出层通常不是渲染在当前的 DOM 树中，而是直接插入在 body （或者其它类似的地方）上的。这么做的主要目的是方便控制这些弹出层的 z-index ，确保它们能够处于合适的层级上，不至于被遮挡。 我们都知道 React App 的顶层某个地方肯定有这么一行代码：Rea...
使用Dialog实现全局Loading加载框
weixin_33860722的博客
12-12 846
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候，都是在当前的页面隐藏一个Loading布局，需要加载的时候，显示出来，加载完再隐藏 使用Dialog实现Loading框可以实现低耦合。 效果图 自定义Loading类 package ……; import ……; /** * Created by ko...
react 全局消息弹窗
宏斌的博客
02-18 1269
component import React, { forwardRef, useImperativeHandle, useCallback } from "react"; import { Button, Snackbar as MaterialSnackbar, IconButton, } from "@material-ui/core"; import CloseIcon from "@material-ui/icons/Close"; export const snackbar: Re
React实现全局组件：Toast轻提示
weixin_34202952的博客
09-20 2190
Toast是常用的轻提示弹框，常用于页面loading和提示语弹窗。本例基于React实现一个随时可调用且不随页面渲染的全局组件。 如何使用 首先引入 import Toast from './components/toast' JSX中事件调用： <button onClick={() => { Toast.info('普...
React 创建对话框组件
徐同保的专栏
10-12 1869
Dialog.js: import React from 'react'; import ReactDOM from 'react-dom'; export default class Dialog { static modal(Component, zIndex) { let body = document.body; let showDom ...
前端面试热点：Vue与React的diff算法解析
本文主要探讨了前端面试中关于Vue和React框架中diff算法的区别和优化。面试官通过考察这些深层次的原理来评估候选人的技术潜力和可培养性，特别是对于初入职场的工程师。在Vue和React中，diff算法用于更新虚拟DOM树...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值