- 博客(90)
- 收藏
- 关注
RSS订阅原创 前端经典react面试题（持续更新中）
当Facebook第一次发布 React 时，他们还引入了一种新的 JS 方言JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。
2023-03-15 11:06:28
541
原创 细说React组件性能优化
纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。person . name } 丨 {name : "张三" , job : "developer" });} , 1000);} , [ ]);
2023-03-15 11:06:13
458
原创 读懂React原理之调和与Fiber
一 引沿Fiber 架构是React16中引入的新概念，目的就是解决大型 React 应用卡顿，React在遍历更新每一个节点的时候都不是用的真实DOM，都是采用虚拟DOM，所以可以理解成fiber就是React的虚拟DOM，更新Fiber的过程叫做调和，每一个fiber都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime，来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动权交给浏览器去渲染，做一些动画，重排（ reflow ），重绘 repa
2023-03-15 11:05:39
503
原创 京东前端高频react面试题及答案
react 生命周期初始化阶段：getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后运行中状态：componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回
2023-03-15 11:04:05
743
1
原创 前端一面react面试题指南
当Facebook第一次发布 React 时，他们还引入了一种新的 JS 方言JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。
2023-03-01 17:22:53
310
原创 深度探讨react-hooks实现原理
根据官方提供的 useXXX API 结合自己的业务场景，可以使用自定义开发需要的 custom hooks，从而抽离业务开发数据，按需引入；实现业务数据与视图数据的充分解耦。
2023-03-01 17:21:40
312
原创 美团前端二面常考react面试题及答案
React-intl提供了两种使用方法，一种是引用React组件，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。setState 并不是单纯同步/异步的，它的表现会因调用场景的不同而不同。React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。
2023-03-01 17:20:32
403
原创 升级到React-Router-v6
近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别，以及 v6 一些新特性。而在原有项目还是使用老版本 react router 的情况下，不太建议急着直接升级，可能存在较多的改动。全部换成Route 新特性变更render和component改为element，且支持嵌套路由path支持相对路径；简化path格式，只支持两种动态占位符。
2023-02-28 10:23:31
168
原创 滴滴前端二面必会react面试题指南
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取render() {render() {() => this . context . changeColor('green') } > 绿色 < / button > < button onClick = {
2023-02-28 10:23:17
223
原创 阿里前端二面常考react面试题（必备）
Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。
2023-02-28 10:22:10
497
原创 深入分析React-Scheduler原理
关键词：react react-scheduler scheduler 时间切片 任务调度 workLoop。
2023-02-28 10:21:36
223
原创 滴滴前端高频react面试题汇总
Fiber是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。
2023-02-27 13:15:06
312
原创 你要的react+ts最佳实践指南
基础类型就没什么好说的了，以下都是比较常用的，一般比较好理解，也没什么问题。// 联合类型 }Hooks的美妙之处不只有减小代码行的功效，重点在于能够做到逻辑与 UI 分离。做纯粹的逻辑层复用。例子：当你自定义 Hooks 时，返回的数组中的元素是确定的类型，而不是联合类型。可以使用 const-assertions。// 推断出 [boolean, typeof load]，而不是联合类型 (boolean | typeof load)[] }也可以断言成tuple type。
2023-02-27 13:14:48
1023
原创 几个你必须知道的React错误实践
React 的大多数东西和 JavaScript 几乎是一样的。React 的 props 也只是 JavaScript 中的对象，这也就意味着我们可以在对象中传递许多不同的值，而组件很难知道它们。这样组件在使用 props 时就变得比较麻烦。很多人喜欢这么访问 props。在不使用 TypeScript 或者不定义 propsTypes 的情况下，我们可以随意使用 props.xxx 的方式来访问 props。
2023-02-27 13:14:05
310
原创 阿里前端二面必会react面试题指南
通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。
2023-02-24 08:12:51
247
原创 一文读透react精髓
一个JSX语法的示例，如下所示< / h1 >;这种语法形式，既不是HTML，也不是字符串，而是称之为JSX，是React里用来描述UI和样式的语法，JSX最终会被编译为合法的JS语句调用（编译器在遇到时采用JS语法进行解析，遇到就采用HTML规则进行解析）;render() {} }这种方式比起函数定义方式则更加灵活。
2023-02-24 08:09:51
154
原创 react组件深度解读
当然，这不是设置 React 组件样式的最佳方法，但在条件样式中，使用它非常方便。组件，使用了类似 HTML 的样式，但它既不是 HTML，也不是 JS，甚至不是 React。第一个字母是大写字母，这是一个规定，因为我们在处理混合的 HTML 元素和 React 元素时，JSX 编译器（如 Babel ）会将所有以小写字母开头的名称视为 HTML 元素。的组件将继续成为 React 的一部分，但作为 React 开发人员，我认为开始使用函数（和 Hook ），并专注于学习新 API 是有意义的。
2022-12-12 11:00:06
194
原创 react进阶用法完全指南
自定义Hook的本质是一种函数代码逻辑的抽取。自定义组件必须以use开头，否则会报错。下面的这个自定义Hook就是对组件的挂载和卸载中重复的逻辑进行复用。return(< div > < h1 > 这是测试自定义Hook < / h1 > < / div >) } function useInfo(name) {console . log(` ${ name } 组件被挂载了~ `);console . log(` ${ name } 组件被卸载了~ `);};} , [ ]);}${
2022-12-12 10:59:36
328
原创 redux原理是什么
相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和API。
2022-12-12 10:59:25
135
原创 React核心工作原理
拿到一个问题，一般回答都是是什么？为什么？怎么办？那就按照这个思路来吧！这里说到了JSX，那就顺带大致说一下：为什么需要JSXReact 16原理React 17原理与vue的异同react中虚拟dom+jsx的设计一开始就有，vue则是演进过程中才出现的，2.0版本后出现。jsx本来就是js扩展，转义过程简单直接的多；vue把template编译为render函数的过程需要复杂的编译器转换字符串-ast-js函数字符串当首次调用的时候，容器节点里的所有DOM 元素都会被替换，后续的调用则
2022-12-07 11:50:24
340
原创 React组件设计模式-纯组件，函数组件，高阶组件
如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。(2) React.ComponentshouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变，那么这个组件不会更新(3) PureComponent如果你的组件更复杂一些，你可以
2022-12-07 11:50:11
490
原创 React组件通信
react因为组件化，使得组件间通信十分的重要。本文就来简单介绍一些常见的react组件间传递的内容。我将归纳为以下几种关系来详述:父组件与子组件之间，子组件与父组件之间，发布者与订阅者模式（context），兄弟组件间，redux也是一种组件管理的方法，但是redux状态管理的内容比较多，这里只做简单介绍，之后再另开一篇详述。react的数据流是单向的，最常见的就是通过props由父组件向子组件传值。我们做一个简单的选择商品，然后改变价格的事例。父组件：父组件就是两个按钮，用来切换商品的价格，其中引用
2022-12-07 11:49:43
316
原创 React-hooks+TypeScript最佳实战
自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux自定义 Hook 可以让你在不增加组件的情况下达到同样的目的Hook 是一种复用状态逻辑的方式，它不复用 state 本身事实上 Hook 的每次调用都有一个完全独立的 state} , [ ]);
2022-11-18 13:01:01
159
原创 React中常见的TypeScript定义实战
调和是一种算法，就是React对比新老虚拟DOM的过程，以决定需要更新哪一部分。暂停工作，稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要，则中止工作为了实现上面的要求，我们需要把任务拆分成一个个可执行的单元，这些可执行的单元就叫做一个Fiber，一个Fiber就代表一个可执行的单元。一个Fiber就是一个普通的JS对象，包含一些组件的相关信息。// fiber 标签 证明是什么类型fiber。// key调和子节点时候用到。
2022-11-18 12:59:59
89
原创 React性能优化的8种方式
调和是一种算法，就是React对比新老虚拟DOM的过程，以决定需要更新哪一部分。暂停工作，稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要，则中止工作为了实现上面的要求，我们需要把任务拆分成一个个可执行的单元，这些可执行的单元就叫做一个Fiber，一个Fiber就代表一个可执行的单元。一个Fiber就是一个普通的JS对象，包含一些组件的相关信息。// fiber 标签 证明是什么类型fiber。// key调和子节点时候用到。
2022-11-18 12:59:30
114
原创 读懂React原理之调和与Fiber
调和是一种算法，就是React对比新老虚拟DOM的过程，以决定需要更新哪一部分。暂停工作，稍后再回来优先考虑不同类型的工作重用以前完成的工作如果不再需要，则中止工作为了实现上面的要求，我们需要把任务拆分成一个个可执行的单元，这些可执行的单元就叫做一个Fiber，一个Fiber就代表一个可执行的单元。一个Fiber就是一个普通的JS对象，包含一些组件的相关信息。// fiber 标签 证明是什么类型fiber。// key调和子节点时候用到。
2022-11-16 09:50:21
125
原创 React-Hook最佳实践
HookuseState可以实现类似state和setState的效果useEffect可以实现这几个生命周期的功能，并且写法更加简单，在每次渲染后都会触发，触发的条件是依赖项有改变useRef返回一个引用，每次渲染都返回同一个对象，和类组件this属性一致返回一个记忆化的回调函数，在依赖项改变的时候，回调函数会修改，否则返回之前的回调函数，对于一些需要传给子组件的函数，可以使用这个，避免子组件因为回调函数改变而改变useMemo返回一个记忆化的值，依赖项改变，返回的值才会变，可用来记忆化值，和Vue。
2022-11-16 09:48:47
1715
原创 React-diff原理及应用
React的高效得益于其Virtual DOM+React diff的体系。diff算法并非react独创，react只是在传统diff算法做了优化。但因为其优化，将diff算法的时间复杂度一下子从O(n^3)降到O(n)。React diff的三大策略：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。
2022-11-16 09:46:56
140
原创 深度剖析React懒加载原理
现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。这里举一个平时开发中可能会遇到的场景，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。
2022-11-15 12:43:43
268
原创 深度探讨react-hooks实现原理
根据官方提供的 useXXX API 结合自己的业务场景，可以使用自定义开发需要的 custom hooks，从而抽离业务开发数据，按需引入；实现业务数据与视图数据的充分解耦。进入学习。
2022-11-15 12:43:14
144
原创 细说React组件性能优化
纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。person . name } 丨 {name : "张三" , job : "developer" });} , [ ]);
2022-11-15 12:42:05
313
原创 几个你必须知道的React错误实践
React 的大多数东西和 JavaScript 几乎是一样的。React 的 props 也只是 JavaScript 中的对象，这也就意味着我们可以在对象中传递许多不同的值，而组件很难知道它们。这样组件在使用 props 时就变得比较麻烦。很多人喜欢这么访问 props。在不使用 TypeScript 或者不定义 propsTypes 的情况下，我们可以随意使用 props.xxx 的方式来访问 props。
2022-11-14 12:16:00
94
原创 升级到React-Router-v6
近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别，以及 v6 一些新特性。而在原有项目还是使用老版本 react router 的情况下，不太建议急着直接升级，可能存在较多的改动。全部换成Route 新特性变更render和component改为element，且支持嵌套路由path支持相对路径；简化path格式，只支持两种动态占位符。
2022-11-14 12:15:01
113
原创 深入分析React-Scheduler原理
关键词：react react-scheduler scheduler 时间切片 任务调度 workLoop。
2022-11-14 12:14:18
373
原创 redux原理是什么
相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和API。
2022-11-10 09:27:28
179
原创 一文读透react精髓
一个JSX语法的示例，如下所示< / h1 >;这种语法形式，既不是HTML，也不是字符串，而是称之为JSX，是React里用来描述UI和样式的语法，JSX最终会被编译为合法的JS语句调用（编译器在遇到{时采用JS语法进行解析，遇到
2022-11-10 09:26:44
146
原创 你要的react+ts最佳实践指南
基础类型就没什么好说的了，以下都是比较常用的，一般比较好理解，也没什么问题。// 联合类型 }Hooks的美妙之处不只有减小代码行的功效，重点在于能够做到逻辑与 UI 分离。做纯粹的逻辑层复用。例子：当你自定义 Hooks 时，返回的数组中的元素是确定的类型，而不是联合类型。可以使用 const-assertions。};// 推断出 [boolean, typeof load]，而不是联合类型 (boolean | typeof load)[] }也可以断言成tuple type。
2022-11-10 09:24:27
577
原创 React组件通信
一个react app是由很多react组件组成的，有的组件之间是有嵌套关系的，可以形成一条“组件链”。Context可以当做组件的“作用域”[3]。一个根组件，它定义了一个context，它的组件链上的组件都可以访问到provider中定义的变量或对象，如下图所示，这就比较像‘作用域’的概念。context在一些简单的场景下可以替代部分redux的功能。
2022-11-09 13:14:50
457
原创 react组件深度解读
当然，这不是设置 React 组件样式的最佳方法，但在条件样式中，使用它非常方便。组件，使用了类似 HTML 的样式，但它既不是 HTML，也不是 JS，甚至不是 React。第一个字母是大写字母，这是一个规定，因为我们在处理混合的 HTML 元素和 React 元素时，JSX 编译器（如 Babel ）会将所有以小写字母开头的名称视为 HTML 元素。的组件将继续成为 React 的一部分，但作为 React 开发人员，我认为开始使用函数（和 Hook ），并专注于学习新 API 是有意义的。
2022-11-09 13:14:11
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人