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

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

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

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

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

使用 displayName 命名组件：

export default React.createClass(
了解本专栏 订阅专栏 解锁全文 超级会员免费看
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，
VAN
04-22 215
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。
前端面试汇总-React
分享前端工程化、动效魔法与性能之舞！
06-29 1650
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
react 全局公共组件-----动态弹窗 (dialog)
weixin_30908941的博客
09-13 1759
react 的时候，总是会用到弹窗，并且各种各样的，一般来说，组件层级嵌套之后，就会出现 z-index层级覆盖的问题 这个时候，就需要一个公共的弹出层，然后我们将需要展示的组件，放到弹出层里面 下面是目录结构： dialog.jsx代码 import React, { Component } from 'react'; import { is, fromJS } f...
面试题：React实现一个Dialog模板
愤怒的小火柴人
08-29 1572
题目大概是要实现一个dialog的模板，你可以应用他实现很多功能，比如说某个操作的确认提醒等，我们要做的实现这样一个可应用都多个功能的dialog，只要你想要显示的组件写好，外部嵌套这样一个dialog组件，就能实现...
react全局弹窗
qq_40414209的博客
05-17 718
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 554
参数说明如下： | 参数 | 说明 | | — | — | | progress | 加载进度 | | foreDrawType | 波浪图的绘制类型: DrawColor 或者 DrawImage | | backDrawType | 波浪图的背景绘制 | | amplitude | 波浪的振幅， 0f ~ 1f 表示振幅在整个绘制区域的占比 | | velocity | 波浪移动的速度 | | content | 子Composalble | 接下来重点介绍一下 DrawType。 DrawType
React对话框组件实现
weixin_30797199的博客
07-24 294
当下前端届最火的技术之一莫过于React + Redux + webpack的技术结合。最近公司内部也正在转react，这周主要做了个React的modal组件，接下来谈下具体实现过程。 基本的HTML结构 虽然React基于虚拟DOM，但他的JSX语法还是离不开最基本的HTML。第一步要做的就是通过HTML&&CSS实现Dialog垂直水平居中框。HTML结构如下： ...
【React源码20】深入学习React 源码实现——Portals 的实现
最新发布
silverclayz的技术分享
06-01 757
本文深入分析了React中Portals的实现原理。Portals允许将子节点渲染到DOM层级之外，常用于弹窗等场景。文章从历史演进、基本使用方式入手，重点剖析了源码实现的核心流程：1) 创建Portal对象；2) 构建HostPortal类型Fiber节点；3) 在commit阶段将DOM插入指定容器。通过简化代码示例展示了Portal的核心数据结构和工作机制，包括containerInfo存储目标容器、Fiber节点特殊类型标记等关键设计。
React模态钩子：简单同构实现模态框的轻量级工具
本文档标题为“use-react-modal::framed_picture:模态React钩”，指出了一个专门用于React开发环境的钩子（Hook），它被设计用于创建和管理模态对话框（Modal）或弹出框（Dialog Box）。标题中的“framed_picture”...
Vue相关前端面试题目总结
秀秀的奇妙旅行
11-07 1973
说下你对 mvvm 的理解？双向绑定的理解？请详细说下你对 vue 生命周期的理解？请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？webpack什么是webpack 说下你对 mvvm 的理解？双向绑定的理解？ 请详细说下你对 vue 生命周期的理解？ 请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？ webpack 什么是webpack ...
React+TS前台项目实战（九）-- 全局常用组件弹窗Dialog封装
weixin_43883615的博客
06-14 2145
今天这篇主要讲全局公共弹窗Dialog组件封装，将用到上篇封装的模态框Modal组件。有时在前台项目中，偶尔要用到一两个常用的组件，如 弹窗，其实不必非安装ant-design这些主流框架，大可自定义封装一个，而无需引入额外依赖， 提高自己的封装能力。下一篇讲【全局常用组件Text封装】。关注本栏目，将实时更新。
react实现全局组件确认弹窗
双双浪的博客
12-16 4026
本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用 创建全局modal组件 此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。 import ReactDOM from 'react-dom'; import React, { Fragment } from 'react'; import Button from 'components...
react全局的公共组件-------弹框 （Alert）
weixin_33998125的博客
04-24 1902
最近研究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 869
引言 UI 组件中有很多弹出式组件，常见的如 Dialog，Tooltip 以及 Select 等。这些组件都有一个特点，它们的弹出层通常不是渲染在当前的 DOM 树中，而是直接插入在 body （或者其它类似的地方）上的。这么做的主要目的是方便控制这些弹出层的 z-index ，确保它们能够处于合适的层级上，不至于被遮挡。 我们都知道 React App 的顶层某个地方肯定有这么一行代码：Rea...
使用Dialog实现全局Loading加载框
weixin_33860722的博客
12-12 887
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候，都是在当前的页面隐藏一个Loading布局，需要加载的时候，显示出来，加载完再隐藏 使用Dialog实现Loading框可以实现低耦合。 效果图 自定义Loading类 package ……; import ……; /** * Created by ko...
react 全局消息弹窗
宏斌的博客
02-18 1472
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 2344
Toast是常用的轻提示弹框，常用于页面loading和提示语弹窗。本例基于React实现一个随时可调用且不随页面渲染的全局组件。 如何使用 首先引入 import Toast from './components/toast' JSX中事件调用： <button onClick={() => { Toast.info('普...
React 创建对话框组件
徐同保的专栏
10-12 1944
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 ...
前端面试题全解析：238题深入理解vue与react
总结起来，这份《前端面试大全解析238题》是一个涵盖了前端面试中常见的问题和知识点的资料包，适合正在准备前端面试的开发者们深入学习和复习。它不仅包含了前端的基础知识，也深入到框架、原理、性能优化和测试等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

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

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

打赏作者

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

抵扣说明：

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

余额充值