和history

hash模式是通过改变锚点(#)来更新页面URL并不会触发页面重新加载我们可以通过window.onhashchange监听到hash的改变从而处理路由hash

虽然出现在

history模式是通过调用window.history对象上go、back、forward去操作浏览器的历史记录栈来实现页面的无刷新跳转。

hash

hash

值的变化不会导致浏览器向服务器发出请求浏览器不发出请求就不会刷新⻚

hashchange

拥有两个参数第一个参数作为回调函数会在浏览器布局和绘制完成后调用因此它不会阻碍浏览器的渲染进程。

第二个参数是一个数组1

当数组存在并有值时如果数组中的任何值发生更改则每次渲染后都会触发回调。

当它是一个空列表时回调只会被触发一次类似于componentDidMount面试题

99.

reducer必须是一个纯函数Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同。

如果你在reducer内部直接修改旧的state对象的属性值那么新的state和旧的state将都指向同一个对象。

因此Redux认为没有任何改变返回的state将为旧的state面试题

100.

中间件Middleware是介于应用系统和系统软件之间的一类软件它使用系统软件所提供的基础服务功能衔接网络上应用系统的各个部分或不同的应用能够达到资源共享、功能共享的目的

当action发出之后reducer立即算出state整个过程是一个同步的操作那么如果需要支持异步操作或者支持错误处理、日志监控这个过程就可以用上中间件Redux中中间件就是放在就是在dispatch过程在分发action进行拦截处理其本质上一个函数对store.dispatch方法进行了改造在发出

Action和执行

Reducer这两步之间添加了其他功能有很多优秀的redux中间件如

redux-thunk用于异步操作

简述componentWillReceiveProps的调用时机

参考回答

componentWillReceiveProps这个生命周期在16.3之后已经被废弃在组件接受到一个新的props时被调用当组件初始化render的时候不会被调用面试题

102.

执行两次setState的时候会render几次会不会立即触发

参考回答

只执行一次不会立即触发因为react中有批处理机制React会把setState的调用合并为一个来执行也就是说当执行setState的时候state中的数据并不会马上更新会按照先进先出按顺序进行执行但是在

Ajax、setTimeout

简述React.memo()和React.PureComponent组件异同

参考回答

异React.memo()是函数组件React.PureComponent是类组件。

同都是对接收的props参数进行浅比较解决组件在运行时的效率问题优化组件的重渲染行为。

若第二个参数为空数组则只会在渲染组件时执行一次传入的属性值的更新也不会有作用。

所以useMemo()的第二个参数数组中需要传入依赖的参数。

面试题

104.

的应用程序状态的派生数据但它不能绑定到任何体系结构或库。

Reselect

保留最后一次调用的最后输入/输出的副本并仅在其中一个输入发生更改时重新计算结果。

如果连续两次提供相同的输入则

Reselect

扩展运算符或者叫展开操作符对于创建具有现有对象的大多数属性的新对象非常方便在更新state时经常这么用面试题

107.

应用程序时在多层嵌套组件来使用另一个嵌套组件提供的数据。

最简单的方法是将一个

prop

从每个组件一层层的传递下去从源组件传递到深层嵌套组件这叫做prop

drilling的主要缺点是原本不需要数据的组件变得不必要地复杂并且难以维护。

为了避免prop

Context。

通过定义提供数据的Provider组件并允许嵌套的组件通过Consumer组件或useContext

Hook

中新的协调引擎或重新实现核心算法。

它的主要目标是支持虚拟DOM的增量渲染。

React

Fiber

的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性并为不同类型的更新分配优先级以及新的并发原语。

React

Fiber

的目标是增强其在动画、布局和手势等领域的适用性。

它的主要特性是增量渲染:能够将渲染工作分割成块并将其分散到多个帧中面试题

109.

props以确保它们具有正确的数据类型。

对于不正确的类型开发模式下会在控制台中生成警告消息而在生产模式中由于性能影响而禁用它。

强制的

props

构造函数和getInitialState之间的区别就是ES6和ES5本身的区别。

在使用ES6类时应该在构造函数中初始化state并在使用React.createClass时定义getInitialState方法面试题

111.

props和高阶组件仅渲染一个子组件。

React团队认为Hooks

是服务此用例的更简单方法。

这两种模式仍然有一席之地(例如一个虚拟的

scroller

提供了两个方法在这些情况下非常有用React.memo():这可以防止不必要地重新渲染函数组件

props

没有改变那么组件将不会重新渲染。

虽然这两种工具都非常有用但是浅比较会带来额外的性能损失因此如果使用不当这两种方法都会对性能产生负面影响。

通过使用

React

Profiler可以在使用这些方法前后对性能进行测量从而确保通过进行给定的更改来实际改进性能。

面试题

113.

结构。

当调用setState()时render会被再次调用因为默认情况下shouldComponentUpdate总是返回true所以默认情况下

React

只会在虚拟DOM中修改真实DOM节点而且修改的次数非常少——这是很棒的React特性它优化了真实DOM的变化使React变得更快面试题

114.

返回一个元组其中第一个参数count是计数器的当前状态setCounter

咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下咱们在setCount函数内部使用它可以做更多的事情使用

Hooks能够使咱们的代码保持更多功能还可以避免过多使用基于类的组件

初始化值2.

object)描述了对于一个DOM节点或者其他组件component你想让它在屏幕上呈现成什么样子。

元素element可以在它的属性props中包含其他元素(译注:用于形成元素树)。

创建一个React元素element成本很低。

元素element创建之后是不可变的。

**组件**一个组件component可以通过多种方式声明。

可以是带有一个render()方法的类简单点也可以定义为一个函数。

这两种情况下它都把属性props作为输入把返回的一棵元素树作为输出。

**实例**一个实例instance是你在所写的组件类component

class中使用关键字this所指向的东西(译注:组件实例)。

它用来存储本地状态和响应生命周期事件很有用。

函数式组件(Functional

component)根本没有实例instance。

类组件(Class

component)有实例instance但是永远也不需要直接创建一个组件的实例因为React帮我们做了这些。

面试题

117.

createClass本质上是一个工厂函数extends的方式更加接近最新的ES6规范的class写法。

两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。

createClass方式的方法定义使用逗号隔开因为creatClass本质上是一个函数传递给它的是一个Object而class的方式定义方法时务必谨记不要使用逗号隔开这是ES6

2propType

React.createClass通过proTypes对象和getDefaultProps()方法来设置和获取props.

React.Component通过设置两个属性propTypes和defaultProps

React.createClass通过getInitialState()方法返回一个包含初始值的对象

React.Component通过constructor设置初始状态

4this区别

进行对比也就是我们所说的Diff算法。

对新旧两棵树进行一个深度优先遍历这样每一个节点都会一个标记在到深度遍历的时候每遍历到一和个节点就把该节点和新的节点树进行对比如果有差异就放到一个对象里面遍历差异对象根据差异的类型根据对应对规则更新VNodeReact

render

组件状态的改变可以因为props的改变或者直接通过setState方法改变。

组件获得新的状态然后React决定是否应该重新渲染组件。

只要组件的state发生变化React就会对组件进行重新渲染。

这是因为React中的shouldComponentUpdate方法默认返回true这就是导致每次更新都重新渲染的原因。

当React将要渲染组件时会执行shouldComponentUpdate方法来看它是否返回true组件应该更新也就是重新渲染。

所以需要重写shouldComponentUpdate方法让它根据情况返回true或者false来告诉React什么时候重新渲染什么时候跳过重新渲染面试题

120.

在React中组件返回的元素只能有一个根元素。

为了不添加多余的DOM节点我们可以使用Fragment标签来包裹所有的元素Fragment标签不会渲染出任何元素。

React官方对Fragment的解释React

允许你将子列表分组而无需向

document.getElementById(container)

function

React-intl是雅虎的语言国际化开源项目FormatJS的一部分通过其提供的组件和API可以与ReactJS绑定。

React-intl提供了两种使用方法一种是引用React组件另一种是直接调取API官方更加推荐在React项目中使用前者只有在无法使用React组件的地方才应该调用框架提供的API。

它提供了一系列的React组件包括数字格式化、字符串格式化、日期格式化等。

在React-intl中可以配置不同的语言包他的工作原理就是根据需要在语言包之间进行切换面试题

124.

渲染竞争主线程。

若一个很耗时的任务占据了线程那么后续的执行内容都会被阻塞。

为了避免这种情况React

就利用

结构和时间切片的机制将一个大任务分解成多个小任务然后按照任务的优先级和线程的占用情况对任务进行调度。

对于每个更新为其分配一个优先级

Fiber

结构将不紧急的更新拆分成多段更新并通过宏任务的方式将其合理分配到浏览器的帧当中。

这样就能使得紧急任务能够插入进来。

高优先级的更新会打断低优先级的更新等高优先级更新完成后再开始低优先级更新面试题

125.

会将传⼊的参数对象与组件当前的状态合并然后触发调和过程(Reconciliation)。

经过调和过程React

React

会⾃动计算出新的树与⽼树的节点差异然后根据差异对界⾯进⾏最⼩化重渲染。

在差异计算算法中React

能够相对精确地知道哪些位置发⽣了改变以及应该如何改变这就保证了按需更新⽽不是全部重新渲染。

如果在短时间内频繁setState。

React会将state的改变压⼊栈中在合适的时机批量更新state和视图达到提⾼性能的效果。

2setState

假如所有setState是同步的意味着每执⾏⼀次setState时有可能⼀个同步代码中多次

setState都重新vnode

dom修改这对性能来说是极为不好的。

如果是异步则可以把⼀个同步代码中的多个setState合并成⼀次组件更新。

所以默认是异步的但是在⼀些情况下是同步的。

setState

并不是单纯同步/异步的它的表现会因调⽤场景的不同⽽不同。

在源码中通过isBatchingUpdates

来判断setState

setState都进⾏⼀次更新那么意味着render函数会被频繁调⽤界⾯重新渲染这样效率是很低的最好的办法应该是获取到多个更新之后进⾏批量更新

如果同步更新了state但是还没有执⾏render函数那么state和props不能保持同步。

state和props不能保持⼀致性会在开发中产⽣很多的问题面试题

126.

在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-transition-group是一种很好的解决方案其为元素添加enterenter-activeexitexit-active这一系列勾子可以帮助我们方便的实现组件的入场和离场动画其主要提供了三个主要的组件CSSTransition在前端开发中结合

CSS

SwitchTransition两个组件显示和隐藏切换时使用该组件

TransitionGroup将多个动画组件包裹在其中一般用于列表中元素的动画面试题

128.

的应用中我们经常需要进行异步请求如获取数据、发送请求等。

然而Redux

原生并不支持异步请求因为

中包含异步请求就需要将这个请求和处理请求的数据的过程放在远程服务器上。

因此Redux

本身并不处理异步请求它需要依赖其他的库来支持异步操作。

常见的处理异步请求的库是

Redux-thunk

可以返回一个函数而不是一个对象。

在函数中我们可以发起异步请求、处理异步请求的数据然后使用

Dispatch