深圳市官网网站建设,建筑人才网招收土建预算员实学生,个人音乐网站免费建设,天坛整装电话面试题 97. React 两种路由模式的区别#xff1f;hash和history#xff1f;
参考回答#xff1a;
1: hash路由 hash模式是通过改变锚点(#)来更新页面URL#xff0c;并不会触发页面重新加载#xff0c;我们可以通过window.onhashchange监听到hash的改变#xff0c;从而处…面试题 97. React 两种路由模式的区别hash和history
参考回答
1: hash路由 hash模式是通过改变锚点(#)来更新页面URL并不会触发页面重新加载我们可以通过window.onhashchange监听到hash的改变从而处理路由hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中对后端完全没有影响因此改变 hash 不会重新加载页面。2: history路由 history模式是通过调用window.history对象上go、back、forward去操作浏览器的历史记录栈来实现页面的无刷新跳转。hash 模式
# 后⾯ hash 值的变化不会导致浏览器向服务器发出请求浏览器不发出请求就不会刷新⻚
⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化然后根据 hash 变化来实现
更新⻚⾯部分内容的操作。
history 模式
history 模式的实现主要是 HTML5 标准发布的两个 API pushState 和 replaceState 这
两个 API 可以在改变 url但是不会发送请求。这样就可以监听 url 变化来实现更新⻚⾯部分内容
的操作。面试题 98. 解释useEffect的第二个参数传不同值的区别
参考回答
useEffect 拥有两个参数第一个参数作为回调函数会在浏览器布局和绘制完成后调用因此它不会阻碍浏览器的渲染进程。第二个参数是一个数组1 当数组存在并有值时如果数组中的任何值发生更改则每次渲染后都会触发回调。
2 当它不存在时每次渲染后都会触发回调。
3 当它是一个空列表时回调只会被触发一次类似于componentDidMount面试题 99. 简述reducer是纯函数吗说明其原因
参考回答
reducer必须是一个纯函数Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同。如果你在reducer内部直接修改旧的state对象的属性值那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变返回的state将为旧的state面试题 100. 简述对 Redux 中间件的理解常用的中间件有哪些实现原理
参考回答
中间件Middleware是介于应用系统和系统软件之间的一类软件它使用系统软件所提供的基础服务功能衔接网络上应用系统的各个部分或不同的应用能够达到资源共享、功能共享的目的
当action发出之后reducer立即算出state整个过程是一个同步的操作那么如果需要支持异步操作或者支持错误处理、日志监控这个过程就可以用上中间件Redux中中间件就是放在就是在dispatch过程在分发action进行拦截处理其本质上一个函数对store.dispatch方法进行了改造在发出 Action和执行 Reducer这两步之间添加了其他功能有很多优秀的redux中间件如
redux-thunk用于异步操作
redux-logger用于日志记录面试题 101. 简述componentWillReceiveProps的调用时机
参考回答
componentWillReceiveProps这个生命周期在16.3之后已经被废弃在组件接受到一个新的props时被调用当组件初始化render的时候不会被调用面试题 102. 执行两次setState的时候会render几次会不会立即触发
参考回答
只执行一次不会立即触发因为react中有批处理机制React会把setState的调用合并为一个来执行也就是说当执行setState的时候state中的数据并不会马上更新会按照先进先出按顺序进行执行但是在 Ajax、setTimeout 等异步方法中每 setState 一次就会 re-render 一次面试题 103. 简述React.memo()和React.PureComponent组件异同
参考回答
异React.memo()是函数组件React.PureComponent是类组件。
同都是对接收的props参数进行浅比较解决组件在运行时的效率问题优化组件的重渲染行为。
useMemo()是定义一段函数逻辑是否重复执行。
若第二个参数为空数组则只会在渲染组件时执行一次传入的属性值的更新也不会有作用。 所以useMemo()的第二个参数数组中需要传入依赖的参数。面试题 104. React 什么是 Reselect 以及它是如何工作的
参考回答
*Reselect*是一个**选择器库**用于 Redux 它使用*memoization*概念。它最初编写用于计算类似 Redux 的应用程序状态的派生数据但它不能绑定到任何体系结构或库。Reselect 保留最后一次调用的最后输入/输出的副本并仅在其中一个输入发生更改时重新计算结果。如果连续两次提供相同的输入则 Reselect 将返回缓存的输出。它的 memoization 和缓存是完全可定制的面试题 105. 在React中如何防范XSS攻击
参考回答
dangerouslySetInnerHTML
dangerouslySetInnerHTML 是 React 解析含有 HTML 标记内容的一种方式也是原生 DOM 元素 innerHTML 的替代方案面试题 106. 简述点(…)在 React 的作用
参考回答
扩展运算符或者叫展开操作符对于创建具有现有对象的大多数属性的新对象非常方便在更新state时经常这么用面试题 107. 简述什么是prop drilling如何避免
参考回答
在构建 React 应用程序时在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 prop 从每个组件一层层的传递下去从源组件传递到深层嵌套组件这叫做prop drilling。prop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂并且难以维护。为了避免prop drilling一种常用的方法是使用React Context。通过定义提供数据的Provider组件并允许嵌套的组件通过Consumer组件或useContext Hook 使用上下文数据面试题 108. 简述什么是 React Fiber?
参考回答
Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性并为不同类型的更新分配优先级以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块并将其分散到多个帧中面试题 109. 如何在 React 的 Props上应用验证
参考回答
当应用程序在开发模式下运行时React 将自动检查咱们在组件上设置的所有 props以确保它们具有正确的数据类型。对于不正确的类型开发模式下会在控制台中生成警告消息而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。下面是一组预定义的 prop 类型:React.PropTypes.string
React.PropTypes.number
React.PropTypes.func
React.PropTypes.node
React.PropTypes.bool面试题 110. React 中使用构造函数和 getInitialState 有什么区别
参考回答
构造函数和getInitialState之间的区别就是ES6和ES5本身的区别。在使用ES6类时应该在构造函数中初始化state并在使用React.createClass时定义getInitialState方法面试题 111. 解释Hooks会取代 render props 和高阶组件吗
参考回答
render props和高阶组件仅渲染一个子组件。React团队认为Hooks 是服务此用例的更简单方法。这两种模式仍然有一席之地(例如一个虚拟的 scroller 组件可能有一个 renderItem prop或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下Hooks 就足够了可以帮助减少树中的嵌套面试题 112. 如何避免React 组件的重新渲染
参考回答
React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法在这些情况下非常有用React.memo():这可以防止不必要地重新渲染函数组件
PureComponent:这可以防止不必要地重新渲染类组件
这两种方法都依赖于对传递给组件的props的浅比较如果 props 没有改变那么组件将不会重新渲染。虽然这两种工具都非常有用但是浅比较会带来额外的性能损失因此如果使用不当这两种方法都会对性能产生负面影响。通过使用 React Profiler可以在使用这些方法前后对性能进行测量从而确保通过进行给定的更改来实际改进性能。面试题 113. 请简述当调用setState时React render 是如何工作的
参考回答
1 虚拟 DOM 渲染:当render方法被调用时它返回一个新的组件的虚拟 DOM 结构。当调用setState()时render会被再次调用因为默认情况下shouldComponentUpdate总是返回true所以默认情况下 React 是没有优化的。
2 原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点而且修改的次数非常少——这是很棒的React特性它优化了真实DOM的变化使React变得更快面试题 114. 解释如何避免在React重新绑定实例
参考回答
1.将事件处理程序定义为内联箭头函数
class SubmitButton extends React.Component {
constructor(props) {
super(props);
this.state {
isFormSubmitted: false
}
;
}
render() {
return (() {
this.setState( {
isFormSubmitted: true
}
);
}
}
Submit
)
}
}
2.使用箭头函数来定义方法
class SubmitButton extends React.Component {
state {
isFormSubmitted: false
}
handleSubmit () {
this.setState( {
isFormSubmitted: true
}
);
}
render() {
return (this.handleSubmit
}
Submit
)
}
}
3.使用带有 Hooks 的函数组件
const SubmitButton () {
const [isFormSubmitted, setIsFormSubmitted] useState(false);
return (() {
setIsFormSubmitted(true);
}
}
Submit
)
}
;面试题 115. 简述React 中的 useState() 是什么
参考回答
useState 是一个内置的 React Hook。useState(0) 返回一个元组其中第一个参数count是计数器的当前状态setCounter 提供更新计数器状态的方法。
咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下咱们在setCount函数内部使用它可以做更多的事情使用 Hooks能够使咱们的代码保持更多功能还可以避免过多使用基于类的组件
定义state的数据参数是初始化的数据返回值两个值1. 初始化值2. 修改的方法
useState中修改的方法异步
借助于useEffect 进行数据的监听
可以自己定义Hooks的方法, 方法内部可以把逻辑返回面试题 116. Component, Element, Instance 之间有什么区别和联系
参考回答
**元素**一个元素element是一个普通对象(plain object)描述了对于一个DOM节点或者其他组件component你想让它在屏幕上呈现成什么样子。元素element可以在它的属性props中包含其他元素(译注:用于形成元素树)。创建一个React元素element成本很低。元素element创建之后是不可变的。**组件**一个组件component可以通过多种方式声明。可以是带有一个render()方法的类简单点也可以定义为一个函数。这两种情况下它都把属性props作为输入把返回的一棵元素树作为输出。**实例**一个实例instance是你在所写的组件类component class中使用关键字this所指向的东西(译注:组件实例)。它用来存储本地状态和响应生命周期事件很有用。函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance但是永远也不需要直接创建一个组件的实例因为React帮我们做了这些。面试题 117. 简述React.createClass和extends Component的区别有哪些
参考回答
React.createClass和extends Component的bai区别主要在于
1语法区别
createClass本质上是一个工厂函数extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。
createClass方式的方法定义使用逗号隔开因为creatClass本质上是一个函数传递给它的是一个Object而class的方式定义方法时务必谨记不要使用逗号隔开这是ES6 class的语法规范。
2propType 和 getDefaultProps
React.createClass通过proTypes对象和getDefaultProps()方法来设置和获取props.
React.Component通过设置两个属性propTypes和defaultProps
3状态的区别
React.createClass通过getInitialState()方法返回一个包含初始值的对象
React.Component通过constructor设置初始状态
4this区别
React.createClass会正确绑定this
React.Component由于使用了 ES6这里会有些微不同属性并不会自动绑定到 React 类的实例上。
5Mixins
React.createClass使用 React.createClass 的话可以在创建组件时添加一个叫做 mixins 的属性并将可供混合的类的集合以数组的形式赋给 mixins。
如果使用 ES6 的方式来创建组件那么 React mixins 的特性将不能被使用了。面试题 118. 哪些方法会触发 React 重新渲染重新渲染 render 会做些什么
参考回答
1哪些方法会触发 react 重新渲染?setState方法被调用
setState 是 React 中最常用的命令通常情况下执行 setState 会触发 render。但是这里有个点值得关注执行 setState 的时候不一定会重新渲染。当 setState 传入 null 时并不会触发 render。class App extends React.Component {
state {
a: 1
};render() {
console.log(render);
return ({this.state.a}onClick{() {
this.setState({ a: 1 }); // 这里并没有改变 a 的值
}}Click methis.setState(null)}setState null);
}
}
父组件重新渲染只要父组件重新渲染了即使传入子组件的 props 未发生变化那么子组件也会重新渲染进而触发 render2重新渲染 render 会做些什么?会对新旧 VNode 进行对比也就是我们所说的Diff算法。对新旧两棵树进行一个深度优先遍历这样每一个节点都会一个标记在到深度遍历的时候每遍历到一和个节点就把该节点和新的节点树进行对比如果有差异就放到一个对象里面遍历差异对象根据差异的类型根据对应对规则更新VNodeReact 的处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前最简单的方法就是直接调用 innerHTML。Virtual DOM厉害的地方并不是说它比直接操作 DOM 快而是说不管数据怎么变都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时遍历两棵树进行各种比对还是相当耗性能的特别是在顶层 setState 一个微小的修改默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法但是这个过程仍然会损耗性能.面试题 119. React如何判断什么时候重新渲染组件
参考回答
组件状态的改变可以因为props的改变或者直接通过setState方法改变。组件获得新的状态然后React决定是否应该重新渲染组件。只要组件的state发生变化React就会对组件进行重新渲染。这是因为React中的shouldComponentUpdate方法默认返回true这就是导致每次更新都重新渲染的原因。当React将要渲染组件时会执行shouldComponentUpdate方法来看它是否返回true组件应该更新也就是重新渲染。所以需要重写shouldComponentUpdate方法让它根据情况返回true或者false来告诉React什么时候重新渲染什么时候跳过重新渲染面试题 120. 简述对React中Fragment的理解它的使用场景是什么
参考回答
在React中组件返回的元素只能有一个根元素。为了不添加多余的DOM节点我们可以使用Fragment标签来包裹所有的元素Fragment标签不会渲染出任何元素。React官方对Fragment的解释React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组而无需向 DOM 添加额外节点。
import React, { Component, Fragment } from react// 一般形式
render() {
return ();
}
// 也可以写成以下形式
render() {
return (
);
}面试题 121. React中可以在render访问refs吗
参考回答
{this.state.title}
{
this.spanRef.current ? 有值 : 无值
}不可以render 阶段 DOM 还没有生成无法获取 DOM。DOM 的获取需要在 pre-commit 阶段和 commit 阶段面试题 122. 简述React的插槽(Portals)的理解
参考回答
插槽将一个React元素渲染到指定的Dom容器中
ReactDOM.createPortal(React元素, 真实的DOM容器)该函数返回一个React元素
第一个参数child是任何可渲染的 React 子元素例如一个元素字符串或 fragment。
第二个参数container是一个 DOM 元素。
import React, { Component } from react;
import ReactDOM from react-dom;
export default class Portals extends Component {
render() {
return (
onClick{() {
console.log(rooter click);
}}我想出现在root中);
}
}
function Test() {
return ReactDOM.createPortal(
,
//
我想出现在container中
,
document.getElementById(container)
);
}
function ChildA() {
return
我是childA;
}面试题 123. 简述对React-Intl 的理解它的工作原理
参考回答
React-intl是雅虎的语言国际化开源项目FormatJS的一部分通过其提供的组件和API可以与ReactJS绑定。React-intl提供了两种使用方法一种是引用React组件另一种是直接调取API官方更加推荐在React项目中使用前者只有在无法使用React组件的地方才应该调用框架提供的API。它提供了一系列的React组件包括数字格式化、字符串格式化、日期格式化等。在React-intl中可以配置不同的语言包他的工作原理就是根据需要在语言包之间进行切换面试题 124. React 并发模式是如何执行的
参考回答
React 中的并发并不是指同一时刻同时在做多件事情。因为 js 本身就是单线程的同一时间只能执行一件事情而且还要跟 UI 渲染竞争主线程。若一个很耗时的任务占据了线程那么后续的执行内容都会被阻塞。为了避免这种情况React 就利用 fiber 结构和时间切片的机制将一个大任务分解成多个小任务然后按照任务的优先级和线程的占用情况对任务进行调度。对于每个更新为其分配一个优先级 lane用于区分其紧急程度。
通过 Fiber 结构将不紧急的更新拆分成多段更新并通过宏任务的方式将其合理分配到浏览器的帧当中。这样就能使得紧急任务能够插入进来。
高优先级的更新会打断低优先级的更新等高优先级更新完成后再开始低优先级更新面试题 125. React setState 调⽤之后发⽣了什么是同步还是异步
参考回答
1React中setState后发⽣了什么
在代码中调⽤setState函数之后React 会将传⼊的参数对象与组件当前的状态合并然后触发调和过程(Reconciliation)。经过调和过程React 会以相对⾼效的⽅式根据新的状态构建 React 元素树并且着⼿重新渲染整个UI界⾯。
在 React 得到元素树之后React 会⾃动计算出新的树与⽼树的节点差异然后根据差异对界⾯进⾏最⼩化重渲染。在差异计算算法中React 能够相对精确地知道哪些位置发⽣了改变以及应该如何改变这就保证了按需更新⽽不是全部重新渲染。
如果在短时间内频繁setState。React会将state的改变压⼊栈中在合适的时机批量更新state和视图达到提⾼性能的效果。
2setState 是同步还是异步的
假如所有setState是同步的意味着每执⾏⼀次setState时有可能⼀个同步代码中多次
setState都重新vnode diff dom修改这对性能来说是极为不好的。如果是异步则可以把⼀个同步代码中的多个setState合并成⼀次组件更新。所以默认是异步的但是在⼀些情况下是同步的。
setState 并不是单纯同步/异步的它的表现会因调⽤场景的不同⽽不同。在源码中通过isBatchingUpdates 来判断setState 是先存进 state 队列还是直接更新如果值为 true 则执⾏异步操作为 false 则直接更新。
异步 在 React 可以控制的地⽅就为 true⽐如在 React ⽣命周期事件和合成事件中都会⾛合并操作延迟更新的策略。
同步 在 React ⽆法控制的地⽅⽐如原⽣事件具体就是在 addEventListener 、setTimeout、setInterval 等事件中就只能同步更新。
⼀般认为做异步设计是为了性能优化、减少渲染次数
setState设计为异步可以显著的提升性能。如果每次调⽤ setState都进⾏⼀次更新那么意味着render函数会被频繁调⽤界⾯重新渲染这样效率是很低的最好的办法应该是获取到多个更新之后进⾏批量更新
如果同步更新了state但是还没有执⾏render函数那么state和props不能保持同步。state和props不能保持⼀致性会在开发中产⽣很多的问题面试题 126. 简述super()和super(props)有什么区别
参考回答
在ES6中通过extends关键字实现类的继承,super关键字实现调用父类super代替的是父类的构建函数使用super(xx)相当于调用sup.prototype.constructor.call(this.xx)如果在子类中不使用super关键字则会引发报错
super()就是将父类中的this对象继承给子类的没有super()子类就得不到this对象在React中类组件是基于es6的规范实现的继承React.Component因此如果用到constructor就必须写super()才初始化this在调用super()的时候我们一般都需要传入props作为参数如果不传进去React内部也会将其定义在组件实例中所以无论有没有constructor在render中this.props都是可以使用的这是React自动附带的但是也不建议使用super()代替super(props)因为在React会在类组件构造函数生成实例后再给this.props赋值所以在不传递props在super的情况下调用this.props为undefined,而传入props的则都能正常访问确保了 this.props 在构造函数执行完毕之前已被赋值更符合逻辑总结在React中类组件基于ES6所以在constructor中必须使用super
在调用super过程无论是否传入propsReact内部都会将porps赋值给组件实例porps属性中
如果只调用了super()那么this.props在super()和构造函数结束之间仍是undefined面试题 127. 简述React中组件间过渡动画如何实现
参考回答
在react中react-transition-group是一种很好的解决方案其为元素添加enterenter-activeexitexit-active这一系列勾子可以帮助我们方便的实现组件的入场和离场动画其主要提供了三个主要的组件CSSTransition在前端开发中结合 CSS 来完成过渡动画效果
SwitchTransition两个组件显示和隐藏切换时使用该组件
TransitionGroup将多个动画组件包裹在其中一般用于列表中元素的动画面试题 128. 简述如何Redux 中的异步请求
参考回答
在 Redux 的应用中我们经常需要进行异步请求如获取数据、发送请求等。然而Redux 原生并不支持异步请求因为 Redux 中的数据流是单向的由 View、Action、Reducer 三个部分组成。Action 触发 Reducer 更新 State从而触发 View 重新渲染。如果 Action 中包含异步请求就需要将这个请求和处理请求的数据的过程放在远程服务器上。因此Redux 本身并不处理异步请求它需要依赖其他的库来支持异步操作。常见的处理异步请求的库是 Redux-thunk 和 Redux-saga。其中Redux-thunk 是 Redux 官方推荐的一个异步操作的中间件。它允许我们在 Action 中编写异步代码使得 Action 可以返回一个函数而不是一个对象。在函数中我们可以发起异步请求、处理异步请求的数据然后使用 Dispatch 将数据传递给 Reducer 更新 State。而 Redux-saga 则是一个更加强大的异步操作库它使用了 ES6 中的 Generator 函数来实现异步操作。相对于 Redux-thunkRedux-saga 提供了更多的功能比如取消异步操作、自动重试等
