- 博客(246)
- 收藏
- 关注
RSS订阅原创 面试官让你说说react状态管理？
开发者普遍认为状态是组件的一部分, 但是同时却又在剥离状态上不停的造轮子, 这不是很矛盾么?对于一个最简单的文本组件而言你觉得应该把 text 从 Text 组件中剥离么?如果你的直觉告诉你不应该这么做, 那为何要使用 redux mobx jotai 等等一系列稀奇古怪的状态管理库来让我们的代码变得更复杂?所以 why?还不是 React 自己的锅!!!因为 React 在组件状态上给出了双重定义, 内敛的 state 和开放的 props.
2023-05-19 13:02:08
216
1
原创 高级前端常考react面试题指南
类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
2023-05-19 13:01:45
241
原创 面试官：React怎么做性能优化
最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进行汇总，并以此作为学习React的第一篇笔记（自己学习，什么都好，就是费头发…）。React.memo其中和是类组件中的优化方式，而React.memo是函数组件中的优化方式。和。
2023-05-19 13:00:58
199
原创 字节前端二面react面试题（边面边更）
类似的业务需求也有很多，如一个可以横向滑动的列表，当前高亮的 Tab 显然隶属于列表自身的时，根据传入的某个值，直接定位到某个 Tab。它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。在react的componentWillReceiveProps(nextProps)生命周期中，可以在子组件的render函数执行前，通过this.props获取旧的属性，通过nextProps获取新的props，对比两次props是否相同，从而更新子组件自己的state。否则新建实例时会报错；
2023-03-13 17:21:31
407
原创 问：React的useState和setState到底是同步还是异步呢？
在正常的react的事件流里（如onClick等）setState和useState是异步执行的（不会立即更新state的结果）多次执行setState和useState，只会调用一次重新渲染render不同的是，setState会进行state的合并，而useState则不会在setTimeout，Promise.then等异步事件中setState和useState是同步执行的（立即更新state的结果）
2023-03-13 17:21:18
116
原创 校招前端二面经典react面试题及答案
实际上，diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。 具体的流程如下：真实的 DOM 首先会映射为虚拟 DOM；当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；根据 patch 去更新真实的 DOM，反馈到用户的界面上。一个简单的例子：这里，首先假定 ExampleComponent
2023-03-13 17:18:24
182
原创 问：你是如何进行react状态管理方案选择的？
简单总结了一下目前较为常用的状态管理方式，我个人最喜欢的使用方式是Mobx+Hooks，简单轻量易上手。各位可以根据自己的需求选择适合自己项目的管理方式。
2023-03-13 17:18:12
97
原创 老生常谈React的diff算法原理-面试版
第一次发文章 not only（虽然）版式可能有点烂 but also （但是）最后赋有手稿研究 finally看完他你有收获diff算法：对于update的组件，他会将当前组件与该组件在上次更新是对应的Fiber节点比较，将比较的结果生成新的Fiber节点。一个DOM节点，在某一时刻最多会有4个节点和他相关。
2023-03-01 08:11:43
400
原创 问：React的setState为什么是异步的？
不知道大家有没有过这个疑问，React 中setState()为什么是异步的？我一度认为setState()是同步的，知道它是异步的之后很是困惑，甚至期待 React 能出一个之类的 API。同样有此疑问的还有 MobX 的作者 Michel Weststrate，他认为经常听到的答案都很容易反驳，并认为这可能是一个历史包袱，所以开了一个 issue 询问真正的原因。
2023-03-01 08:11:11
53
原创 2023前端二面必会react面试题合集
请看下面的代码：答案：1.在构造函数没有将props传递给super，它应该包括以下行// ... }2.事件监听器(通过分配时)的作用域不正确，因为 ES6 不提供自动绑定。因此，开发人员可以在构造函数中重新分配// ... }refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。
2023-02-28 08:12:12
317
原创 阿里前端二面react面试题
在组件初始化的时候 通过this.state 给组件设置一个初始化的state，第一次render的时候会用state来渲染组件通过this.setState方法来更新stateHooks是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易。参考。
2023-02-28 08:11:31
150
原创 你是如何使用React高阶组件的？
High Order Component（包装组件，后面简称HOC），是React开发中提高组件复用性的高级技巧。HOC并不是React的API，他是根据React的特性形成的一种开发模式。HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法在React的第三方生态中，有非常多的使用，比如Redux的connect方法或者React-Router的withrouter方法。
2023-02-28 08:11:15
57
原创 手写一个Redux,深入理解其原理-面试进阶
单纯的Redux只是一个状态机，store里面存了所有的状态state，要改变里面的状态state，只能。对于发出来的action需要用reducer来处理，reducer会计算新的state来替代老的state。subscribe方法可以注册回调方法，当的时候会执行里面的回调。Redux其实就是一个发布订阅模式！Redux还支持enhancerenhancer其实就是一个装饰者模式，传入当前的，返回一个增强的。Redux使用支持中间件，的返回值其实就是一个enhancer。
2023-02-28 08:10:29
64
原创 rawed-6
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。HOC 可以用于以下许多用例代码重用、逻辑和引导抽象渲染劫持state 抽象和操作props 处理。
2023-02-28 07:50:09
85
原创 一道React面试题把我整懵了
这种技术依赖于提案，目前还在stage-2阶段，如果需要使用这种方案，我们需要安装this . handleClick } > 测试 < / button > } }这也是我们面试题中提到的第二种绑定方案自动绑定没有方案二、三所带来的渲染性能问题（只绑定一次，没有生成新的函数）;可以再封装一下，使用这种写法来达到传参的目的。我们在babel上做一下编译：点击class-properties（选择ES2016或者更高，需要手动安装一下这个plugin相比于。
2023-02-28 07:42:32
47
原创 React面试：谈谈虚拟DOM，Diff算法与Key机制
B、C，与旧集合相比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在旧集合中的位置是最大的，导致其他节点的 _mountIndex
2023-02-27 09:38:03
147
原创 百度前端高频react面试题（持续更新中）
this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。给定相同的输入，总是返回相同的输出。过程没有副作用。不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定。
2023-02-27 09:37:46
247
原创 react的jsx和React.createElement是什么关系？面试常问
参考前端进阶面试题详细解答// 最后返回一个调用ReactElement执行方法，并传入刚才处理过的参数 return ReactElement(type , key , ref , self , source , ReactCurrentOwner . current , props ,);
2023-02-27 09:37:01
137
原创 前端常考react面试题（持续更新中）
Fiber是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。
2023-02-26 16:55:40
907
原创 React组件之间的通信方式总结（上）
先来几个术语：本文重点：上回说到JSX的用法，这回要开讲react组件之间的一个沟通。那么什么是组件？我知道英文是Component，但这对我而言就是一个单词，毫无意义。要了解Component之间是如何进行友好交流的，那就要先了解Component是个什么鬼。上回说到的JSX，我们可以这么创建对象：还是老老实实地用、这种标准的HTML标签元素去生成React元素。但是这样的话，我们的JS就会变得巨大无比，全部都是新建的React元素，有可能到时候我们连对象名都不晓得怎么起了，也许就变成这样的。哈哈哈开个
2023-02-26 16:55:26
408
原创 社招前端常见react面试题（必备）
在React项目中，通过redux存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。
2023-02-26 16:54:26
512
原创 React组件之间的通信方式总结（下）
React 也是数据驱动的，当数据发生变化时，视图就会自动发生变化（视图是数据的映射）。组件中的数据有两个来源：props 和 state，其中 props 就是组件被使用时接收的行内属性，是从外部传入的数据，而 state 是组件的私有数据，组件定义时就需要创建；class 定义的组件中有 this，state，生命周期的钩子，而 function 声明的组件只有 props；
2023-02-26 16:54:05
459
原创 _vue-3
1. 哪些变化从上图中，我们可以概览的新特性，如下：1.1 速度更快相比1.2 体积更小通过的功能，可以将无用模块“剪辑”，仅打包需要的能够，有两大好处：可以开发出更多其他的功能，而不必担忧打包出来的整体体积过多1.3 更易维护compositon Api更好的Typescript支持是基于编写的，可以享受到自动的类型定义提示1.4 编译器重写1.5 更接近原生可以自定义渲染 API1.6 更易使用响应式 暴露出来轻松识别组件重新渲染原因2. Vue3新增特性Vue 3 中需要关注的一些新功能包括：2.1
2023-02-26 14:17:48
463
原创 _vue-2
所以我们可以v-model进行如下改写：这个语法糖必须是固定的，也就是说属性必须为，方法名必须为：。知道了的原理，我们可以在自定义组件上实现原理会将组件的 默认转化成原生的 ，会根据标签的不同生成不同的事件和属性----------@----------的作用的工作原理相同点都是语法糖，都可以实现父子组件中的数据的双向通信区别点格式不同：, : : 只能用一次；可以有多个----------@----------插槽作用域插槽------
2023-02-26 14:11:46
309
原创 _vue-1
为什么要有这些模式，目的：职责划分、分层（将层、层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上MVC模式 代表： + + MVVM模式 映射关系的简化，隐藏了总结 ： 模式简化了界面与业务的依赖，解决了数据频繁更新。 在使用当中，利用双向绑定技术，使得 变化时， 会自动更新，而 变化时， 也会自动变化。我们以下通过一个 实例来说明 的具体实现----------@----------优点：缺点：单页应用与多页应用的区别实现一个SPAhistory模式 ： 模式核心借用
2023-02-26 14:11:33
630
原创 _react
抹平浏览器差异，实现更好的跨平台。避免垃圾回收，React 引入事件池，在事件池中获取或释放事件对象，避免频繁地去创建和销毁。方便事件统一管理和事务机制。为了解决跨浏览器兼容性问题，React会将浏览器原生事件（）封装为合成事件（）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样React在更新DOM。
2023-02-26 13:56:15
272
原创 _hand-2
入口实现Dep实现watcher实现compiler实现Observer使用----------@--------------------@--------------------@----------基础的代码：简单实现：封装成一个class:----------@----------简单实现2. 迷你版----------@--------------------@--------------------@--------------------@----------
2023-02-26 13:53:35
123
原创 前端react面试题（边面边更）
this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。给定相同的输入，总是返回相同的输出。过程没有副作用。不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用。
2023-02-23 17:35:12
269
原创 百度前端一面高频react面试题指南
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。Hook是 React 16.8 的新增特性。
2023-02-23 17:34:50
274
原创 React循环DOM时为什么需要添加key
所以在每次更新的时候，React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI，如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n3)，其中 n 是树中元素的数量，如果在React中使用了该算法，那么展示1000个元素所需要执行的计算量将在十亿的量级范围，这个开销太过昂贵了，React的更新性能会变得非常低效；当节点为不同的元素，React会拆卸原有的树，并且建立起新的树：当一个元素从。的不变，这种低效的比较方式会带来一定的性能问题，
2023-02-23 17:34:19
377
原创 React的useLayoutEffect和useEffect执行时机有什么不同
我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
2023-02-23 17:33:44
361
原创 前端二面react面试题集锦
使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。我们来看一下具体如何操作吧。txt : "牛逼" } this . handleChange = this . handleChange . bind(this) } handleChange(e) {
2023-02-21 10:03:04
328
原创 React-Hooks怎样封装防抖和节流-面试真题
防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。但是这里搜索框的例子并不好，对值变化之后发起的请求可以进行节流，但是因为搜索框需要实时呈现输入的内容，就需要实时的。节流函数相对于防抖函数用在事件触发更为频繁的场景上，滑动事件，滚动事件，动画上。的调用就符合了节流规则。，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。函数传入节流函数，得到一个新函数，手势事件中使用新函数，那么。
2023-02-21 10:02:23
703
原创 React-hooks面试考察知识点汇总
在组件之间复用状态逻辑很难React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。复杂组件变得难以理解组件常常在和中获取数据。但是，同一个中可能也包含很多其它的逻辑，如设置事件监听，而之后需在中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。
2023-02-21 10:01:22
255
原创 React-Hooks怎样封装防抖和节流-面试真题
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取render() {render() {() => this . context . changeColor('green') } > 绿色 < / button > < button onClick = {
2023-02-21 10:00:47
561
原创 百度前端必会react面试题总结
在每次数据发生变化前，虚拟dom都会缓存一份，变化之时，现在的虚拟dom会与缓存的虚拟dom进行比较。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。可能你已经发现了，高阶组件其实就是装饰器模式在 React 中的实现：通过给函数传入一个组件（函数或类）后在函数内部对该组件（函数或类）进行功能的增强（不修改传入参数的前提下），最后返回这个组件（函数或类），即允许向一个现有的组件添加新的功能，同时又不去修改该组件，属于。
2023-02-20 11:17:43
267
原创 面试官：你是怎样进行react组件代码复用的
Hook 中使用 Hook。Hook 的提出主要就是为了解决 class 组件的一系列问题，所以我们不能在 class 组件中使用它。相比函数，编写一个 class 可能需要掌握更多的知识，需要注意的点也越多，比如 this 指向、绑定事件等等。另外，
2023-02-20 11:17:07
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人