React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMount 在渲染前调用,在客 ...
转载
2021-10-27 11:18:00
299阅读
2评论
本文整理了React核心面试题,涵盖基础概念、生命周期、Hooks和性能优化等关键知识点。重点介绍了JSX语法、组件生命周期方法、常用Hooks(useState、useEffect等)的使用技巧,以及通过React.memo、useCallback等优化性能的方法。文章还对比了不同状态管理方案,帮助开发者深入理解React特性和最佳实践,为面试和实际开发提供实用指导。
现代 JavaScript 教程 十大经典排序 面试题
原创
2024-10-21 10:40:55
39阅读
1、什么是微服务?(暗藏杀机)2、什么是微服务扩展性和高可用-可扩展性、高可用性和性能3、架构师在微服务架构中的角色是什么?决定整个软件系统的布局。 帮助确定组件的分区。 为开发微服务的团队提供某些工具和技术的建议。 提供技术治理,以便技术开发团队遵循微服务原则。4、什么是 CI 持续集成5、什么是Canary Releasing?说说你在项目中的应用一种降低在生产中引入新软件版本的风险的技术,通
转载
2024-04-06 22:08:57
64阅读
2021前端react高频面试题汇总1.ReactRouter的实现原理是什么?客户端路由实现的思想:基于hash的路由:通过监听hashchange事件,感知hash的变化改变hash可以直接通过location.hash=xxx基于H5history路由:改变url可以通过history.pushState和resplaceState等,会将URL压入堆栈,同时能够应用history.go()
原创
2021-12-07 12:54:04
330阅读
对ReactSSR的理解服务端渲染是数据与模版组成的html,即HTML=数据+模版。将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。页面没使用服务渲染,当请求页面时,返回的body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR的优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数
原创
2022-09-13 13:55:13
138阅读
前端面试题之React篇一、组件基础1. React 事件机制2. React的事件和普通的HTML事件有什么不同?3. React 组件中怎么做事件代理?它的原理是什么?4. React 高阶组件、Render props、hooks 有什么区别,为什么要不断迭代
转载
2021-06-03 13:36:41
1304阅读
当调用setState的时候,发生了什么操作?当调用setState时,React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解(reconciliation)的过程。和解的最终目标是,根据这个新的状态以最有效的方式更新DOM。为此,React将构建一个新的React虚拟DOM树(可以将其视为页面DOM元素的对象表示方式)。一旦有了这个DOM树,为了弄清DO
原创
2022-09-14 08:07:26
238阅读
【前端高频面试题】- React篇1. 请说说 React 的核心概念有哪些?React 核心概念围绕“组件化”和“高效渲染”设计,核心包括以下几点:组件(Component):React 应用的基本构建块,分为函数组件(推荐)和类组件,负责封装 UI 结构和逻辑,实现复用。JSX:JavaScri ...
可以使用TypeScript写React应用吗?怎么操作?(1)如果还未创建CreateReactApp项目直接创建一个具有typescript的CreateReactApp项目:javascriptnpxcreatereactappdemotypescript(2)如果已经创建了CreateReactApp项目,需要将typescript引入到已有项目中通过命令将typescript引入项目:j
原创
2022-09-14 10:39:40
877阅读
字节跳动ADFE团队一、传统class的痛点随着React、Vue等支持组件化的MVVM前端框架越来越流行,在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢?我觉得关键原因有以下几点:css在设计之初对“组件化”的考虑是不完全的,css直接作用于全局,无法直接作用于某个组件内部的样式。在我们的前端组件中有很多“组件样式随着数据变化”的场
转载
2023-11-16 14:33:32
117阅读
redux中间件中间件提供第三方插件的模式,自定义拦截actionreducer的过程。变为actionmiddlewaresreducer。这种机制可以让我们改变数据流,实现如异步action,action过滤,日志输出,异常报告等功能reduxlogger:提供日志输出reduxthunk:处理异步操作reduxpromise:处理异步操作,actionCreator的返回值是promise对
原创
2022-09-14 07:33:23
225阅读
ref是一个函数又有什么好处?方便react销毁组件、重新渲染的时候去清空refs的东西,防止内存泄露解释React中render()的目的。每个React组件强制要求必须有一个render()。它返回一个React元素,是原生DOM组件的表示。如果需要渲染多个HTML元素,则必须将它们组合在一个封闭标记内,例如<form、<group、<div等。此函数必须保持纯净,即必须每次调用时都返回相同的
原创
2022-09-14 10:38:51
131阅读
监听深度依赖的值变化借助lodash的isEqual实现import { isEqual } from 'lodash';function useDeepCompareEffect(fn, deps){const comparisons = useRef(0);const prevDeps = useRef(deps);if(!isEqual(prevDeps.current, deps)){
转载
2021-02-03 20:03:47
558阅读
2评论
React中refs的作用是什么?有哪些应用场景?Refs提供了一种方式,用于访问在render方法中创建的React元素或DOM节点。Refs应该谨慎使用,如下场景使用Refs比较适合:处理焦点、文本选择或者媒体的控制触发必要的动画集成第三方DOM库Refs是使用React.createRef()方法创建的,他通过ref属性附加到React元素上。要在整个组件中使用Refs,需要将ref在构造函
原创
2022-09-14 07:33:44
143阅读
一、前言最近在看前端react项目,在此总结下react项目启动加载过程,启动后是怎么显示首页的。(Ant Design Pro项目)PS:需要大概了解下React与ES6二、react项目启动加载过程1.项目依赖安装与本地启动以本人的项目为例,是Ant Design Pro项目;下载好项目后,首先需要安装依赖(node_modules):npm install然后,查看package.json文
转载
2023-12-10 11:47:10
62阅读
React简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram(照片交友) 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非
转载
2023-11-20 13:57:16
99阅读
在过去的几周里,围绕微观前端进行了大量讨论(一些是负面的,一些是积极的)。在本教程中,我将分享我所学到的知识,并向您展示如何构建由React和Vue应用程序组成的微前端应用程序。要查看此应用程序的最终代码,请单击此处。Single-spa我们将用于创建项目的 工具 是Single SPA- 用于前端微服务的 javascript 框架。Single SPA使您可以在单页面应用程序中使用多个框架,允
转载
2024-02-01 21:03:52
96阅读
React前端环境搭建 React简介(来源知乎): 1.1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES来自:React 官方网站 狭义来讲 React 是 Facebook 内部开源出来的一个前端 U ...
转载
2021-09-28 16:32:00
528阅读
2评论
什么是WebScoket?WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。为什么使用WebScoket?因为 :HTTP 协议有一个缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息。而WebScoket可以由服务器主动发送信息给客户端。应用实例:maven依赖:<de
转载
2024-07-21 10:21:14
61阅读