- 博客(96)
- 收藏
- 关注
RSS订阅原创 前端react面试题合集
React 的工作原理React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。讲讲什么是 JSX ？当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将
2023-03-15 10:19:21
545
原创 详解React的Transition工作原理原理
Transition 是 react18 引入的新概念，用来区分紧急和非紧急的更新。2 个 API 还有一个差别：当进行连续快速输入时，使用 startTransition 是无法触发类似 throttle 的效果的。
2023-03-15 10:19:06
522
原创 前端常见react面试题合集
受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定super();//e是事件源 let val = e . target . value;val });render() {非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOMsuper();
2023-03-15 10:18:51
1603
原创 这可能是你需要的React实战技巧
你可以看到不管 antd(react) 还是 element(vue) 中的弹窗组件都是渲染在 document.body 上的，而非当前组件所对应的 render 节点上。的使用，当你掌握了这两者，诸如 Toast、Dialog、Dropdown 大体都是一个实现原理。也是要执行比较逻辑，当入参数非常复杂时，这样优化其实是得不偿失的，所以具体情况要具体分析。总结一下，最后的这个组件有多种实现方式，这里只是很简单的演示一下，关键点在你要掌握。例子，实际是不需要考虑优化的，因为本身。
2023-03-15 10:18:35
449
原创 滴滴前端二面常考react面试题（持续更新中）
refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。this . showResult . bind(this) } > 展示结果 < / button > < / div >);} }如果该属性值是一个字符串， React将会在组件实例化对象的refs属性中，存储一个同名属性，该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。
2023-03-01 16:18:35
373
原创 详细解读 React useCallback & useMemo
阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回值。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。
2023-03-01 16:18:19
325
原创 前端经典react面试题及答案
JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了。React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。在销毀期，组件即将被销毁，请求数据变得无意义。实现了一套dom结构，在每次操作在和真实dom之前，使用实现好的diff算法，对虚拟dom进行比较，递归找出有变化的dom节点，然后对其进行更新操作。
2023-02-28 10:00:53
583
原创 美团前端经典react面试题整理
refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。this . showResult . bind(this) } > 展示结果 < / button > < / div >);} }如果该属性值是一个字符串， React将会在组件实例化对象的refs属性中，存储一个同名属性，该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。
2023-02-28 09:59:50
282
原创 深度讲解React Props
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
2023-02-28 09:59:14
310
原创 前端一面常见react面试题（持续更新中）
每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点。为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这对于性能是有好处的。
2023-02-27 13:03:15
486
原创 从实现一个React到深度理解React框架核心原理
这篇文章循序渐进地介绍实现以下几个概念，遵循本篇文章基本就能搞懂为啥需要fiber，为啥需要commit和phases、reconciliation阶段等原理。本篇文章又不完全和原文一致，这里会加入我自己的一些思考，比如经过处理后fiber tree和element tree的联系等。createElement函数render函数FibersHooks。
2023-02-27 13:02:51
337
原创 校招前端高频react面试题合集
DOM 操作非常昂贵。将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对 象 Connect，Connect 重 新 render 外部传入的原组件 WrappedComponent ，并把 connect 中传入的 mapStateToProps，mapDispatchToProps与组件上原有的 props合并后，通过属性的方式传给WrappedComponent。但是，有的时候子组件的接受父组件的数据没有变动。
2023-02-27 13:02:23
656
原创 彻底搞懂React-hook链表构建原理
每一个 hook 函数都有对应的 hook 对象保存状态信息useContext是唯一一个不需要添加到 hook 链表的 hook 函数只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render 阶段需要给函数组件 fiber 添加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保存其状态信息。
2023-02-27 13:02:10
589
原创 前端二面高频react面试题集锦
受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定super();//e是事件源 let val = e . target . value;val });render() {非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOMsuper();
2023-02-23 19:38:18
449
原创 人人能读懂redux原理剖析
至此一个完整的redux我们就已经分析完了，个人认为中间件的compose这里是比较不好理解的点，但是只要明白中间件主要要解决的是增强dispatch函数，就可以顺着这个思路去理解。接着再试着写几个中间件，进一步理解为什么中间件的格式需要返回嵌套的三层函数，明白了这两个点，redux的原理也就基本能够明白了，有问题欢迎在评论中指出。
2023-02-23 19:37:51
426
原创 React高级特性之RenderProps
是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那么，我们就说这个组件使用了技术。
2022-12-12 10:49:12
241
原创 react-Suspense工作原理分析
之所以是将 Suspense 放在最后来分析，是因为对 Suspense 的处理涉及到多个状态，这些状态在之前的步骤中或许会被修改，因此在了解其他步骤之后再来看 Suspense 或许更容易理解。从上面的描述即可以看出，Suspense 是一个加载数据的标准，lazy 只是该标准下实现的一个工具方法。beginWork - second pass，由于此时 DidCapture 存在，会将 primary 组件作为子节点，并将 fallback 组件作为 primary 组件的兄弟节点。
2022-12-12 10:49:00
321
原创 React组件复用的发展史
React MiXin只能通过React.createClass()来使用，如下：Mixins实现Mixins问题Mixins引入了隐式的依赖关系你可能会写一个有状态的组件，然后你的同事可能添加一个读取这个组件的。几个月之后，你可能希望将该移动到父组件，以便与其兄弟组件共享。你会记得更新这个来读取而不是吗？如果此时，其它组件也在使用这个呢？无法保证两个特定的可以一起使用。例如，如果和都定义来，则不能一起使用它们。同时，你也无法在自己的组件上定义具有此名称的方法。每一个新的需求都使得更难理解。随
2022-12-07 12:15:35
113
原创 React组件复用的技巧
假如我们有一个组件，那么一般来说这个组件主要接收的就是，把它放在主要内容的部分，然后组件本身的节点来控制布局，那么这个时候如果我们这个布局包含两个部分呢，比如还有一个部分，是跟主要内容有明显区分的。比如：那么我们这个时候会如何设计这个组件呢？这应该是我们比较常见的方式，我们通过把具体组件作为的传入进来，然后按照组件的写法把它写入到组件渲染内容之中。我们想要使用这个组件，一般会像下面这样：那么这样做有什么问题呢？显然是有的，最明显的就是无法在使用的时候指定如果有，那么就我们只能硬编码在里面，不能在使用组件
2022-12-07 12:14:59
109
原创 React高级特性之Context
在典型的React应用中，数据是通过props，自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得十分的累赘和笨拙。Context提供了一种在组件之间（上下层级关系的组件）共享这种类型数据的方式。这种方式不需要你手动地，显式地通过props将数据层层传递下去。Context是为那些可以认定为【整颗组件树范围内可以共用的数据】而设计的。比如说，当前已认证的用户数据，UI主题数据，当前用户的偏好语言设置数据等。举个例子，下面的代码中，为了装饰
2022-12-07 12:14:30
212
原创 React源码中的dom-diff
这一章讲述了，react的diff过程，也学习了react的diff策略，经过上述的处理之后就会走到，在这个过程中我们会根据新生成的fiber树去创建dom元素，根据其上的副作用flags、链表去做副作用的处理，在commit阶段的函数中进行真实dom的插入处理，下一章将讲述真实dom的生成。
2022-11-18 11:35:09
79
原创 React生命周期深度完全解读
render 阶段、commit 阶段。只有 class 组件才有生命周期，因为 class 组件会创建对应的实例，而函数组件不会。组件实例从被创建到被销毁的过程称为。由 class 组件创建的实例具有生命周期，它的 render 函数在 render 阶段执行，并在此阶段进行 DOM 节点的 diff（diff 算法就是在此阶段进行的），找出需要改变的 DOM 操作。然后在 commit 阶段将对应的 DOM 操作提交至视图中。
2022-11-18 11:34:32
218
原创 React的5种高级模式
让我们在 "控制反转 "中更进一步：主要的逻辑现在被转移到一个自定义的钩子中。这个钩子可以被用户访问，并且暴露了几个内部逻辑（状态、处理程序），允许他对你的组件有更好的控制。通过这5个高级React模式，我们看到了利用 "控制反转 "概念的不同方式。它们给你提供了一个强大的方法来创建灵活和适应性强的组件。然而，我们都知道这句著名的谚语：“能力越大责任越大”，你越是把控制权转移给用户，你的组件就越是远离 "即插即用 "的思维方式。作为一个开发者，你的角色是选择正确的模式来对应正确的需求。
2022-11-18 11:33:45
123
原创 这可能是你需要的React实战技巧
你可以看到不管 antd(react) 还是 element(vue) 中的弹窗组件都是渲染在 document.body 上的，而非当前组件所对应的 render 节点上。的使用，当你掌握了这两者，诸如 Toast、Dialog、Dropdown 大体都是一个实现原理。也是要执行比较逻辑，当入参数非常复杂时，这样优化其实是得不偿失的，所以具体情况要具体分析。总结一下，最后的这个组件有多种实现方式，这里只是很简单的演示一下，关键点在你要掌握。例子，实际是不需要考虑优化的，因为本身。
2022-11-16 09:33:46
293
原创 通俗易懂的React事件系统工作原理
React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。合成事件对象很有意思，一开始听名字会觉得很奇怪，看到英文名更奇怪， 实际上合成事件的意思就是使用原生事件合成一个 React 事件， 例如使用原生click事件合成了。
2022-11-16 09:31:50
840
原创 经常被问到的react-router实现原理详解
Router组件主要做的是通过BrowserRouter传过来的当前值，与Route通过props传进来的path对比，然后决定是否执行props传进来的render函数,react-router-dom是react的路由，它帮助我们在项目中实现单页面应用，它提供给我们两种路由一种基于hash段实现的。而且还经常会被xxx面试官问到，什么是前端路由，它的原理的是什么，它是怎么实现，跳转不刷新页面的…如果你在用本渣以上提供给你的环境，还要配置一下，下面👇这些东西，如果不是，请忽略。啊狗啊猫之类的东西代理。
2022-11-15 11:03:51
940
原创 详细解读 React useCallback & useMemo
阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回值。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。
2022-11-15 11:03:01
250
原创 详解React的Transition工作原理原理
Transition 是 react18 引入的新概念，用来区分紧急和非紧急的更新。2 个 API 还有一个差别：当进行连续快速输入时，使用 startTransition 是无法触发类似 throttle 的效果的。
2022-11-15 11:02:26
268
原创 彻底搞懂React-hook链表构建原理
每一个 hook 函数都有对应的 hook 对象保存状态信息useContext是唯一一个不需要添加到 hook 链表的 hook 函数只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render 阶段需要给函数组件 fiber 添加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保存其状态信息。
2022-11-14 11:47:16
649
2
原创 深度讲解React Props
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
2022-11-14 11:45:39
1876
原创 人人能读懂redux原理剖析
至此一个完整的redux我们就已经分析完了，个人认为中间件的compose这里是比较不好理解的点，但是只要明白中间件主要要解决的是增强dispatch函数，就可以顺着这个思路去理解。接着再试着写几个中间件，进一步理解为什么中间件的格式需要返回嵌套的三层函数，明白了这两个点，redux的原理也就基本能够明白了，有问题欢迎在评论中指出。
2022-11-10 09:05:43
244
原创 从实现一个React到深度理解React框架核心原理
这篇文章循序渐进地介绍实现以下几个概念，遵循本篇文章基本就能搞懂为啥需要fiber，为啥需要commit和phases、reconciliation阶段等原理。本篇文章又不完全和原文一致，这里会加入我自己的一些思考，比如经过处理后fiber tree和element tree的联系等。createElement函数render函数FibersHooks。
2022-11-10 09:05:03
193
原创 React高级特性之RenderProps
是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那么，我们就说这个组件使用了技术。
2022-11-09 12:26:52
154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人