前端面试题整理—React篇

一、说一下React

　　React是Facebook 开发的前端JavaScript库

　　V层：react并非完整的MVC框架，而是MVC中的C层

　　虚拟DOM：react引入虚拟DOM，每当数据变化经过reactdiff运算，将上一次的虚拟DOM与本次渲染的DOM进行对比，仅仅只渲染更新的，有效减小了DOM操做

　　JSX语法：js+xml，是js的语法扩展，编译后转换成普通的js对象

　　组件化思想：将具备独立功能的UI模块封装为一个组件，而小的组件又能够经过不一样的组合嵌套组成大的组件，最终完成整个项目的构建

　　单向数据流：指数据的流向只能由父级组件经过props讲数据传递给子组件，不能由子组件向父组件传递数据

　　要想实现数据的双向绑定只能由子组件接收父组件props传过来的方法去改变父组件数据，而不是直接将子组件数据传给父组件

　　生命周期：简单说一下生命周期：Mounting(挂载)、Updateing(更新)、Unmounting(卸载)

 

二、什么是JSX？为何浏览器没法读取JSX

　　JSX 是JavaScript XML 的简写，是 React 使用的一种文件

　　它利用 JavaScript 的表现力和相似 HTML 的模板语法

　　使得 HTML 文件很是容易理解。此文件能使应用很是可靠，并可以提升其性能

 

　　浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX

　　因此为了使浏览器可以读取 JSX，首先，须要用Babel转换器将 JSX 文件转换为 JavaScript 对象，而后再将其传给浏览器

 

三、React与Angular有何不一样？

　　react是Facebook出品，angular是Google

　　react只有MVC中的C，angular是MVC

　　react使用虚拟DOM，angular使用真实DOM

　　react是单项数据绑定，angular是双向数据绑定

 

四、react生命周期函数

　　（1）Mounting挂载阶段

　　constructor()

　　componentWillMount()组件挂载到页面以前

　　render()建立虚拟DOM，进行diff运算，更新DOM树。不可进行setState()

　　componentDidMount()组件挂载到页面以后，能够在此请求数据

　　（2）Updateing更新阶段

　　componentWillReceiveProps()父级数据发生变化

　　shouldComponentUpdate()

　　性能优化：这个函数只返回true或false，表示接下来的组件是否须要更新（从新渲染）

　　返回true就是紧接着如下的生命周期函数，返回false表示组件不须要从新渲染，再也不执行任何生命周期函数（包括render）

　　componentWillUpdate() 组件更新以前，不可进行setState() 会致使函数调用shouldComponentUpdate从而进入死循环

　　render()

　　componentDidUpdate()组件更新以后

　　（3）Unmounting卸载阶段

　　componentWillUnmount 组件卸载和销毁以前马上停用

　　能够在此销毁定时器，取消网络请求，消除建立的相关DOM节点等

 

五、shouldComponentUpdate是作什么的，（react性能优化是哪一个周期函数？）

　　shouldComponentUpdate 这个方法用来判断是否须要调用render方法从新绘制dom

　　由于DOM的描绘很是消耗性能，若是咱们能在shouldComponentUpdate 方法中可以写出更优化的 dom diff 算法，能够极大的提升性能

 

六、为何虚拟 DOM 会提升性能? 说下他的原理

 　　虚拟 dom 至关于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操做，从而提升性能

　　Virtual DOM 工做过程有三个简单的步骤

　　1）每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中从新渲

　　2）而后计算以前 DOM 表示与新表示的之间的差别

　　3）完成计算后，将只用实际更改的内容更新 real DOM

 

七、调用setState以后发生了什么？

　　当调用setState后，新的 state 并无立刻生效渲染组件，而是，先看执行流中有没有在批量更新中

　　若是有，push到存入到dirtyeComponent中，若是没有，则遍历dirty中的component，调用updateComponent,进行state或props的更新

　　而后更新UI，react进行diff运算，与上一次的虚拟DOM相比较，进行有效的渲染更新组件

 

八、react diff 原理

 　　diff（翻译差别）：计算一棵树形结构转换成另外一棵树形结构的最少操做

　　1）把树形结构按照层级分解，只比较同级元素

　　2）给列表结构的每一个单元添加惟一的 key 属性，方便比较

　　3）React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）

　　4）合并操做，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每个事件循环结束, React 检查全部标记 dirty 的 component 从新绘制

　　5）选择性子树渲染。开发人员能够重写 shouldComponentUpdate 提升 diff 的性能

 

九、setState 什么时候同步什么时候异步？

　　1）setState 只在合成事件（react为了解决跨平台，兼容性问题，本身封装了一套事件机制，代理了原生的事件，像在jsx中常见的onClick、onChange这些都是合成事件）和钩子函数（生命周期）中是“异步”的，在原生事件和 setTimeout 中都是同步的

　　2）setState的“异步”并非说内部由异步代码实现，其实自己执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新以前，致使在合成事件和钩子函数中无法立马拿到更新后的值，形式了所谓的“异步”，固然能够经过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果

　　3）setState 的批量更新优化也是创建在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中若是对同一个值进行屡次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，若是是同时 setState 多个不一样的值，在更新时会对其进行合并批量更新

 

十、react渲染机制

　　1）当页面一打开，就会调用render构建一棵DOM树

　　2）当数据发生变化（ state | props ）时，就会再渲染出一棵DOM树

　　3）此时，进行diff运算，两棵DOM树进行差别化对比，找到更新的地方进行批量改动

 

十一、React中refs 的做用是什么？

　　Refs 是 React 提供给咱们的安全访问 DOM 元素或者某个组件实例的句柄

　　咱们能够为元素添加 ref 属性而后在回调函数中接受该元素在 DOM 树中的句柄

　　该值会做为回调函数的第一个参数返回

 

十二、组件的状态(state)和属性(props)之间有何不一样　　

　　State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是做为用户事件行为的结果

　　Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，而且就子组件而言，props 是不可变的

　　组件不能改变自身的 props，可是能够把其子组件的 props 放在一块儿(统一管理)

　　

1三、在构造函数中调用 super(props) 的目的是什么

　　在 super() 被调用以前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的缘由则是便于(在子类中)能在 constructor 访问 this.props

 

1四、为何在componentDidMount()中请求数据

　　componentDidMount方法中的代码，是在组件已经彻底挂载到网页上才会调用被执行，因此能够保证数据的加载

 

1五、何为受控组件(controlled component)

　　在HTML 中，相似 <input>, <textarea> 和 <select> 这样的表单元素会维护自身的状态，并基于用户的输入来更新，当用户提交表单时，

　　前面提到的元素的值将随表单一块儿被发送，但在 React 中会有些不一样，包含表单元素的组件将会在 state 中追踪输入的值，而且每次调用回调函数时

　　如 onChange 会更新 state，从新渲染组件，一个输入表单元素，它的值经过 React 的这种方式来控制，这样的元素就被称为”受控元素”

 

1六、何为高阶组件(higher order component)

　　高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象，最多见的多是 Redux 的 connect 函数

　　除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为

　　若是你发现你在不一样的地方写了大量代码来作同一件事时，就应该考虑将代码重构为可重用的 HOC

 

1七、React中的状态是什么？它是如何使用的？

　　状态是 React 组件的核心，是数据的来源，必须尽量简单。基本上状态是肯定组件呈现和行为的对象。与props 不一样，它们是可变的，并建立动态和交互式组件。能够经过 this.state() 访问它们

 

1八、解释 React 中 render() 的目的

　　每一个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示

　　若是须要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等

　　此函数必须保持纯净，即必须每次调用时都返回相同的结果

 

1九、理解“在React中，一切都是组件”这句话

　　组件是 React 应用 UI 的构建块。这些组件将整个 UI 分红小的独立并可重用的部分

　　每一个组件彼此独立，而不会影响 UI 的其他部分

 

20、react父子组件之间如何通讯，兄弟组件呢？

　　父级传递子级：把数据挂载子组件的属性上，子组件经过this.props来接收父组件的数据

　　子级传递父级：父级须要定义一个修改数据的方法，把修改数据的方法传给子组件，当子组件须要修改父级数据时，调用父级传过来的修改方法　　

　　兄弟组件传递：属于同一个父级，父组件分别和这两个组件传递。好比子组件A操做执行父组件方法，父组件进行修改，而后把信息传给子组件B

 

2一、请列举定义react组件的中方法

　　1）函数式定义的无状态组件

　　2）es5原生的方式 React.createClass方式

　　3）es6中extends React.Component定义的组件 

 

2二、react中component和pureComponent区别是什么？

　　 PureComponent自带经过props和state的浅对比来实现 shouldComponentUpate()，而Component没有

　　比于Component，PureCompoent的性能表现将会更好

 

2三、什么是无状态组件，与有状态组件的区别

　　无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面

　　有状态组件主要用来定义交互逻辑和业务数据，使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上（有状态组件也能够叫作容器组件，无状态组件也能够叫作展现组件），而后传递props到展现组件，展现组件接收到props，把props塞到模板里面

 

2四、在哪些生命周期中能够修改组件的state

　　componentDidMount和componentDidUpdate

　　constructor、componentWillMount中setState会发生错误：setState只能在mounted或mounting组件中执行

　　componentWillUpdate中setState会致使死循环

 

2五、调用render时，DOM必定会更新吗，为何

　　不必定更新

　　React组件中存在两类DOM，render函数被调用后， React会根据props或者state从新建立一棵virtual DOM树，虽然每一次调用都从新建立，但由于建立是发生在内存中，因此很快不影响性能。而 virtual dom的更新并不意味着真实DOM的更新，React采用diff算法将virtual DOM和真实DOM进行比较，找出须要更新的最小的部分，这时Real DOM才可能发生修改

　　因此每次state的更改都会使得render函数被调用，可是页面DOM不必定发生修改

 

2六、展现组件(Presentational component)和容器组件(Container component)之间有何不一样

　　展现组件：展现专门经过props接受数据回调，而且几乎不会有自身的状态

　　容器组件：展现组件或者其余容器组件提供容器和行为；并调用actions，将其做为回调提供给展现组件,容器组件常常是有状态的

 

2七、setState的两个参数

　　第一个参数是要改变的state对象

　　第二个参数是state致使的页面变化完成后的回调，等价于componentDidUpdate

 

2八、React的生命周期函数中，当props改变时 会引起的后续变化，rander()函数何时执行

　　componentWillUpdate(){}以后

　　render

　　componentDidupdate(){}以前

 

2九、React 和 Vue 相对于JQ在开发上有哪些优势？

　　虚拟DOM的优化，组件化利于维护，组件化方便复用

 

30、react-router的原理

　　BrowserRouter或hashRouter用来渲染Router所表明的组件

　　Route用来匹配组件路径而且筛选须要渲染的组件

　　Switch用来筛选须要渲染的惟一组件

　　Link直接渲染某个页面组件

　　Redirect相似于Link，在没有Route匹配成功时触发　

 

3一、为何React Router v4中使用 switch 关键字 ？

　　虽然 <div> ** 用于封装 Router 中的多个路由

　　当你想要仅显示要在多个定义的路线中呈现的单个路线时，可使用 “switch” 关键字，使用时，<switch>**  标记会按顺序将已定义的 URL

　　与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线

 

3二、了解redux么，说一下redux

　　redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer

　　三大原则：

　　1）惟一数据源(整个应用的 state 被储存在一棵 object tree 中，而且这个 object tree 只存在于惟一一个 store 中)

　　2）reducer必须是纯函数（输入必须对应着惟一的输出）

　　3）State 是只读的, 想要更改必须通过派发action

　　redux的工做流程：　

　　使用经过reducer建立出来的Store发起一个Action，reducer会执行相应的更新state的方法，当state更新以后，view会根据state作出相应的变化

　　1）提供getState()获取到state

　　2）经过dispatch(action)发起action更新state

　　3）经过subscribe()注册监听器　

 

3三、redux数据流通的过程

　　1）用户操做视图

　　2）发起一次dispatch。有异步：返回一个函数（使用thunk中间件），没有异步：return {}

　　3）进入reducer,经过对应的type去修改state,最后返回一个新的state

 

3四、connect()前两个参数是什么？

　　mapStateToProps(state, ownProps)

　　容许咱们将store中的数据做为props绑定到组件中，只要store更新了就会调用mapStateToProps方法，mapStateToProps返回的结果必须是object对象，该对象中的值将会更新到组件中

　　mapDispatchToProps(dispatch, [ownProps])

　　容许咱们将action做为props绑定到组件中，若是不传这个参数redux会把dispatch做为属性注入给组件，能够手动当作store.dispatch使用

　　mapDispatchToProps但愿你返回包含对应action的object对象

 

3五、redux自己有什么不足？

　　1）向事件池中追加方法时，没有作去重处理

　　2）把绑定的方从在事件池中移除掉时，用的是arr.splice(index,1)，这样可能会引发数组塌陷

　　3）reducer中state，每次返回都须要深克隆，能够在redux中获取状态信息时，深克隆，这样就不用在reducer里深克隆了

 

3六、你怎么理解redux的state的

　　数据按照领域（Domain）分类，存储在不一样的表中，不一样的表中存储的列数据不能重复

　　表中每一列的数据都依赖于这张表的主键，表中除了主键之外的其余列，互相之间不能有直接依赖关系
　　把整个应用的状态按照领域（Domain）分红若干子State，子State之间不能保存重复的数据
　　State以键值对的结构存储数据，以记录的key/ID做为记录的索引，记录中的其余字段都依赖于索引
　　State中不能保存能够经过已有数据计算而来的数据，即State中的字段不互相依赖

 

3七、React,redux能够运行在服务端吗?有什么优点

　　1）利于SEO

　　2）提升首屏渲染速度

　　3）同构直出，使用同一份JS代码实现，便于开发和维护

 

3八、列出 Redux 的组件

　　1）Action – 这是一个用来描述发生了什么事情的对象

　　2）Reducer – 这是一个肯定状态将如何变化的地方

　　3）Store – 整个程序的状态/对象树保存在Store中

　　4）View – 只显示 Store 提供的数据

 

3九、解释 Reducer 的做用

　　Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 经过接受先前的状态和 action 来工做，而后它返回一个新的状态。它根据操做的类型肯定须要执行哪一种更新，而后返回新的值。若是不须要完成任务，它会返回原来的状态

 

40、Store 在 Redux 中的意义是什么？

　　Store 是一个 JavaScript 对象，它能够保存程序的状态，并提供一些方法来访问状态、调度操做和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。所以，Redux 很是简单且是可预测的。咱们能够将中间件传递到 store 处理数据，并记录改变存储状态的各类操做。全部操做都经过 reducer 返回一个新状态