标签: React

客栈小K | 4天前 | React前端相关

React 框架 | 深入剖析 Scheduler 原理

关键词:react react-scheduler scheduler 时间切片 任务调度 workLoop 背景 本文所有关于 React 源码的讨论,基于 React v17.0.2 版本。 文章背景 工作中一直有在用 React 相关的技术栈,但却一直没有花时间好好思考一下其底层的运行逻辑,碰巧身边的小伙伴们也有类似的打算,所以决定组团卷一波,对 React 本身探个究竟。 本文是基于众多的源码分析文章,加入自己的理解,然后输出的一篇知识梳理。如果你也感兴趣,建议多看看参考资料中的诸多引用文章,相信你也会有不一样的收获。 本文不会详细说明 React 中 react-reconciler 、 react-dom 、fiber 、dom diff、lane 等知识,仅针对 scheduler 这一细节进行剖析。 知识点背景 在我尝试理解 React 中 Scheduler 模块的过程中,发现有很多概念理解起来比较绕,也是在不断问自己为什么的过程中,发现如果自顶向下的先有一些基本的认知,再深入理解 Scheduler 在 Reac...

 49 |  0 |  0 React前端相关

客栈小K | 3周前 | React算法前端相关Vue

信仰崩了?Preact 开始采用 Vue3 的响应式设计

前言 不知大家有没有听过 Preact 这个框架,就算没听过 Preact 那也应该听过 React 吧? 一字之差, preact 比 react 多了个 p !(听起来咋不像啥好话呢) 这个 P 代表的是 Performance , 高性能版React 的意思。 Preact 一开始是 CodePen 上的一个小项目,有点类似于咱们国内常见的 《三百行代码带你实现个React》 这类文章,用最少的代码实现了 React 的最基本功能,然后放到 CodePen 上供大家 敬仰 学习。 当然这是很多年前的事了,那时候这种东西很容易火,想想 N 年前你看过的第一篇 《三百行实现个Vue》 、 《三百行实现个React》 之类的文章是不是竞争对手很少、很容易引发大量的关注度。不过现在不行了,太卷!这类文章隔三差五的就能看到一篇,同质化严重,导致大家都有点审美疲劳了。 但在那个年代 Preact 就是这么火起来的,三百行实现了个 React 引发大量关注度之后,作者觉得自己做的这玩意好像还挺不错的哈!于是开始继续完善,完善后拿去一测试:性能简直完...

 75 |  0 |  0 React算法

HZFEStudio | 2022-07-01 | React前端相关Vue

框架:谈谈 React 和 Vue 的区别

回答关键点 推模型与拉模型 模板与 JSX React 和 Vue 同为现代化的 Web 前端开发框架。相同之处都是采用数据驱动视图的思想,以虚拟 DOM 为基础,以组件化的方式组织应用,让开发者无需关心 DOM 细节,从更高的层次设计应用。不同之处在于,具体组件的编写方式(template vs jsx),数据响应模型以及具体的生态。 知识点深入 1\. 开发体验的区别 学习曲线 Vue:旨在降低前端开发门槛,学习曲线平缓,对了解 HTML、CSS 及 JS 的传统模式的前端开发和后端开发人员更友好。 React:传播自身的概念和思想,需要了解 JSX 的相关知识,组件中的一切都可以通过 JavaScript 灵活控制,上手成本相较于 Vue 来说略高。 JSX 与模板语法 Vue:默认使用基于 HTML 的模板语法,将模板、样式及逻辑划分开来使关注点分离。也可以选配 JSX 支持。 React:默认使用 JSX 编写组件,将 HTML 和 CSS 组合到 JavaScript 中。在选用 Typ...

 355 |  0 |  0 React前端相关

HZFEStudio | 2022-07-01 | React前端相关

框架:React 事件机制原理

相关问题 React 合成事件与原生 DOM 事件的区别 React 如何注册和触发事件 React 事件如何解决浏览器兼容问题 回答关键点 React 的事件处理机制可以分为两个阶段:初始化渲染时在 root 节点上注册原生事件;原生事件触发时模拟捕获、目标和冒泡阶段派发合成事件。通过这种机制,冒泡的原生事件类型最多在 root 节点上注册一次,节省内存开销。且 React 为不同类型的事件定义了不同的处理优先级,从而让用户代码及时响应高优先级的用户交互,提升用户体验。 React 的事件机制中依赖合成事件这个核心概念。合成事件在符合 W3C 规范定义的前提下,抹平浏览器之间的差异化表现。并且简化事件逻辑,对关联事件进行合成。如每当表单类型组件的值发生改变时,都会触发 onChange 事件,而 onChange 事件由 change、click、input、keydown、keyup 等原生事件组成。 知识点深入 1\. 原生事件和合成事件 JavaScript 通过事件可以和 DOM 进行交互。 1.1 原生事件...

 323 |  1 |  0 React前端相关

HZFEStudio | 2022-07-01 | React前端相关

框架:React Hooks 实现原理

相关问题 React Hooks 是什么 React Hooks 是怎么实现的 使用 React Hooks 需要注意什么 回答关键点 闭包 Fiber 链表 Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hooks 主要是利用闭包来保存状态,使用链表保存一系列 Hooks,将链表中的第一个 Hook 与 Fiber 关联。在 Fiber 树更新时,就能从 Hooks 中计算出最终输出的状态和执行相关的副作用。 使用 Hooks 的注意事项: 不要在循环,条件或嵌套函数中调用 Hooks。 只在 React 函数中调用 Hooks。 知识点深入 1\. 简化实现 [React Hooks 模拟实现](https://codesandbox.io/s/hopeful-williams-id7ey?file=/src/index.js) 该示例是一个 React Hooks 接口的简化模拟实现,可以实际运...

 302 |  0 |  0 React前端相关

HZFEStudio | 2022-06-30 | React前端相关

框架:React Fiber 的作用和原理

相关问题 Fiber 是什么 谈谈你对 Fiber 的了解 Fiber 对 React 的使用带来了什么影响 回答关键点 调度 深度优先遍历 Fiber 是 React 16 中采用的新协调(reconciliation)引擎,主要目标是支持虚拟 DOM 的渐进式渲染。 Fiber 将原有的 Stack Reconciler 替换为 Fiber Reconciler,提高了复杂应用的可响应性和性能。主要通过以下方式达成目标: 对大型复杂任务的分片。 对任务划分优先级,优先调度高优先级的任务。 调度过程中,可以对任务进行挂起、恢复、终止等操作。 Fiber 对现有代码的影响: 由于 Fiber 采用了全新的调度方式,任务的更新过程可能会被打断,这意味着在组件更新过程中,render 及其之前的生命周期函数可能会调用多次。因此,在下列生命周期函数中不应出现副作用。 shouldComponentUpdate React 16 中已经声明废弃的钩子 componentWillMo...

 252 |  0 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说React的事件机制?

一、是什么 React 基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等 在 React 中这套事件机制被称之为合成事件 合成事件(SyntheticEvent) 合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器 根据 W3C 规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口,例如: jsx const button = <button onClick={handleClick} 按钮</button 如果想要获得原生 DOM 事件,可以通过 e.nativeEvent 属性获取 js const handleClick = (e) = console.log(e.nativeEvent);; const button = <button onClick={handleClick} 按钮</button 从上面可以看到 React 事件和原生事件也非常的相似,但也有一定的区别: 事件名称

 288 |  1 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

super() 和 super(props) 有什么区别?

一、ES6 类 在 ES6 中,通过 extends 关键字实现类的继承,方式如下: js class sup { constructor(name) { this.name = name; } printName() { console.log(this.name); } } class sub extends sup { constructor(name, age) { super(name); // super代表的事父类的构造函数 this.age = age; } printAge() { console.log(this.age); } } let jack = new sub("jack", 20); jack.printName(); //输出 : jack jack.printAge(); //输出 : 20 在上面的例子中,可以看到通过 super 关键字实现调用父类, super 代替的是父类的构建函数,使用 super(name) 相当于调

 201 |  0 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说你在使用React 过程中遇到的常见问题?如何解决?

一、前言 在使用 react 开发项目过程中,每个人或多或少都会遇到一些"奇怪"的问题,本质上都是我们对其理解的不够透彻 react 系列,33个工作日,33次凌晨还在亮起的台灯,到今天就圆满画上句号了,比心 在系列中我们列出了很多比较经典的考题,工作中遇到的问题也往往就藏中其中,只是以不同的表现形式存在罢了 今天的题解不算题解,准确来说是对整个系列的一次贯穿,总结 目录: react 有什么特性 生命周期有哪些不同阶段?每个阶段对应的方法是? state 和 props有什么区别? super()和super(props)有什么区别? setState执行机制? React的事件机制? 事件绑定的方式有哪些? 构建组件的方式有哪些?区别? 组件之间如何通信? key有什么作用? refs 的理解?应用场景? Hooks的理解?解决了什么问题? 如何引入css? redux工作原理? redux中间件有哪些? react-router组件有哪些? render触发时机? 如何减少render?

 286 |  0 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

state 和 props 有什么区别?

一、state 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是 state ,一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用 setState 来改变,从而达到更新组件内部数据的作用,并且重新调用组件 render 方法,如下面的例子: jsx class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) = { return { count: prevState.count + 1 }; }); } render() { return ( <button onClick={() = this.updateCount()} Clicked {this.sta

 233 |  1 |  7 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说 React中的setState执行机制

一、是什么 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是 state 当需要修改里面的值的状态需要通过调用 setState 来改变,从而达到更新组件内部数据的作用 如下例子: jsx import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props); this.state = { message: "Hello World" } } render() { return ( <div <h2 {this.state.message}</h2 <button onClick={e = this.changeText()} 面试官系列</button

 179 |  1 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说React服务端渲染怎么做?原理是什么?

一、是什么 在[SSR中](https://mp.weixin.qq.com/s/vvUtC_aAprUjoJRnfFjA1A),我们了解到 Server-Side Rendering ,简称 SSR ,意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程 其解决的问题主要有两个: SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 加速首屏加载,解决首屏白屏问题 二、如何做 在 react 中,实现 SSR 主要有两种形式: 手动搭建一个 SSR 框架 使用成熟的SSR 框架,如 Next.JS 这里主要以手动搭建一个 SSR 框架进行实现 首先通过 express 启动一个 app.js 文件,用于监听3000端口的请求,当请求根目

 184 |  0 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说React render方法的原理?在什么时候会被触发?

一、原理 首先, render 函数在 react 中有两种形式: 在类组件中,指的是 render 方法: jsx class Foo extends React.Component { render() { return <h1 Foo </h1 ; } } 在函数组件中,指的是函数组件本身: js function Foo() { return <h1 Foo </h1 ; } 在 render 中,我们会编写 jsx , jsx 通过 babel 编译后就会转化成我们熟悉的 js 格式,如下: jsx return ( <div className='cn' <Header hello </Header <div start </div Right Reserve </div ) babel 编译后: js return ( React.createElement( 'div', { c

 179 |  1 |  0 React前端相关

动感超人, | 2022-06-27 | React前端相关

说说你对Redux的理解?其工作原理?

一、是什么 React 是用于构建用户界面的,帮助我们解决渲染 DOM 的过程 而在整个应用中会存在很多个组件,每个组件的 state 是由自身进行管理,包括组件定义自身的 state 、组件之间的通信通过 props 传递、使用 Context 实现数据共享 如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程 这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的 redux 就是一个实现上述集中管理的容器,遵循三大基本原则: 单一数据源 state 是只读的 使用纯函数来执行修改 注意的是, redux 并不是只应用在 react 中,还与其他界面库一起使用,如 Vue 二、工作原理 redux 要求我们把数据都放在 store 公共存储空间 一个组件改变了 store 里的数据内容,其他组件就能感知到 store 的变化,再来取数据,从而间接的实现了这些数据

 221 |  0 |  0 React前端相关