2020年React最全面试题

前言

React是近几年来前端项目开发很是火的一个框架，其背景是Facebook团队的技术支持，市场占有率也很高。不少初学者纠结一开始是学react仍是vue。我的以为，有时间的话，最好两个都掌握一下。

react全家桶

（1）运用jsx语法

（2）React生命周期

（3）先后端交互用到的fetch/axios

（4）React-router路由

（5）数据流解决方案redux

（6）React-redux

（7）中间件

（8）Dva框架

（9）Umi框架

react的优缺点以及特色

优点：

1.     引入了虚拟DOM和diff算法，提升了Web性能。

2. 组件化，模块化开发。便于咱们后期维护性。

3. 单向数据流，比较有序，便于数据管理。

不足：

1. react中只是MVC模式的View部分，因此在react开发中要依赖不少其余模块。

2. 当父组件进行从新渲染时，即便子组件的props或state没有任何改变，也会一样进行从新渲染。（react如何避免重复渲染）

特色：　

1. 声明式设计（React采用声明式，能够轻松描述应用。）

2. 高性能（React经过对DOM的模拟，最大限度地减小与DOM的交互。）

3. 灵活（React能够与已知的库或框架很好地配合。）

在React如何作性能优化？

1. 给DOM的遍历上加上惟一的key。提升diff算法效率。

尽可能不要用index,若是说在DOM中删了某一个节点，index也就会发生变化，这时候就会从新渲染，因此key值最好使用id。

2.     能用const声明的就用const。

在render里面尽可能减小新变量的建立以及函数的指向改变问题。

3. 减小对真实DOM的操做。

4. 若是是用webpack搭建环境的话，当一个包过大加载过慢时，可分红多个包来优化。

5. 使用react-loadable，按需加载路由

6. 定时器，超时器使用事后在unmount中清除。

7. immutable对象管理状态  让状态不能被更改

8. 把component更换成pureComponent 也能够进行优化

你对pureComponent的理解

  1.当更新时，若是组件的props或者state都没有改变，render函数就不会触发。

  2.省去虚拟DOM的生成和对比过程，达到提高性能的目的。

  3.具体缘由是由于react自动帮咱们作了一层浅比较

简述react项目的开发过程？

答：

   安装node环境 
    使用creat-react-app建立项目
    经过npm start运行项目
    查看生产环境的项目目录及结构
    开始写本身的组件 而后拼装组件
    而后在查看项目 没问题了
    在经过webpack打包到生产环境中 
    而后提交到公司git服务器上 
    而后链条测试
    上线

react生命周期及相关用法

react生命周期分为mount阶段、update阶段、unmount阶段。

(1) mount阶段：

componentWillMount：实例挂载以前。进行初始化数据的交互。

Render：渲染组件

componentDidMount：实例挂载完成。在这个函数中，实现先后端数据交互。

 

(2) update阶段：

 componentWillReceiveProps：父组件改变时调用。

sholudComponentUpdate：是否从新渲染组件，通常在这个函数中作组件的性能优化。

componentWillUpdate：组件数据更新前调用

componentDidUpdate：组件数据更新完成时调用

 

(3) unmount阶段：

componentWillUnmount：通常用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。

对先后state浅层比较

react如何避免重复渲染

React 官方提供了 PureRenderMixin 插件，它的功能就是在不须要从新渲染的状况下让shouldComponentUpdate 返回 false, 使用这个插件就可以减小没必要要的从新渲染，性能获得也获得一些提高。

可是在 React 的新版本里面，提供了 React.PureComponent，而不须要使用这个插件。 因此说一个较大的组件决定重渲染的时候，咱们能够在每个子组件中绑定（新的）shouldComponentUpdate方法，这样能够减小子组件从新渲染的次数。 

无状态组件和有状态组件有什么区别

无状态组件

    无状态组件的建立形式使代码的可读性更好，并且减小了大量冗余的代码，以致于只有一个render方法。

组件不会被实例化

组件不能访问this对象，也不能访问生命周期方法

无状态组件只能访问输入的props ，一样的props渲染一样的结果，并且没有反作用。

有状态组件

    React.Component建立的组件，其成员函数不会自动绑定this，若是咱们没有手动绑定this，就不能获取当前组件实例对象。

React.Component建立的组件，其状态state是在constructor中像初始化组件属性同样去声明。

补充：React.Component有三种手动绑定方法

1》constructor(props) {

       super(props);

       this.handleClick = this.handleClick.bind(this); //构造函数中绑定

  }

2》<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定

3》<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定

如何选择哪一种方式建立组件

只要有可能，尽可能使用无状态组件。

 

若是须要state、生命周期方法等，使用class的建立组件

 

react在哪一个生命周期作优化?

能够在shouldComponentUpdate这个方法进行优化，用来判断是否调用 render 方法重绘 dom。
由于 dom 的重绘很是消耗性能，因此能够在这个方法中去作dom的diff算法的优化，这样就能够极大的提升性能。

但对于咱们中级工程师来讲，通常我不会去修改shouldComponentUpdate这个方法。而是直接去使用。True/false

react组件间传值。（组件间通讯方式）

   （1）props传值，父组件经过props向子组件传值，子组件经过回调函数向父组件传值

   （2）redux跨级通讯。

   （3）经过prop-types的context实现跨级通讯

跨级组件间双向通讯：使用 context 对象，根组件和其余全部子孙通讯，

不太适合组件间通讯（能够实现，很差维护）

   （4）使用事件订阅实现非嵌套组件间通讯，也能够实现跨级组件间通讯

porps和state的区别？

props：通常用于父组件向子组件通讯，在组件之间通讯使用。

state：通常用于组件内部的状态维护，更新组件内部的数据状态，更新子组件的props等。

 

在react如何阻止冒泡事件?

阻止冒泡事件分两种状况

A、 阻止合成事件间的冒泡，用e.stopPropagation();

B、 阻止js原生事件的冒泡，用e.nativeEvent.stopPropagation();

 

补充：如何阻止事件冒泡、阻止默认动做？

 

  阻止事件冒泡:

e.stopPropagation(IE9+及其余浏览器),

window.e.cancelBubble = true(IE678)

 

  阻止默认事件:

e.preventDefault()-->IE9+及其余浏览器

window.e.returnValue = false   IE678

 

jQuery:

     阻止事件冒泡:e.stopPropagation()

     阻止默认事件:epreventDefault()

     同时阻止事件冒泡和默认事件: return false

 

对react中事件机制的理解

Reac事件是合成事件，不是原生事件。

合成事件和原生事件的区别：

（1）     写法不一样：合成事件是camal命名法，原生事件是所有小写

（2）     绑定位置不一样：合成事件所有委派到document上，原生事件绑定到真实dom上。因此通常是在componentDidMount中或者ref回调函数中绑定，在componentWillUnmount阶段进行解绑，防止内存泄漏。

（3）     执行顺序不一样：先执行原生事件，事件冒泡至document上，再执行合成事件。

react怎么从虚拟dom中拿出真实dom？

在React中如何获取真实dom？

经过refs得到 DOM 元素或者某个组件实例。

咱们能够为元素添加 ref 属性，在回调函数中接收该DOM元素，该DOM元素会做为回调函数的第一个参数返回。

或者能够给ref传字符串。经过this.refs获取dom。

例如：<input ref=((input)=>{return this.name=input}) />， this.name.value取值
或者 <input ref="name" />，this.refs.name取值。

为何虚拟DOM能够提升性能？

当数据变化的时候，无需总体的从新渲染，而是局部刷新。虚拟DOM它是以js的形式存在，计算性能会比较好。并且因为减小对真实DOM的操做次数。性能会有很大提高。

diff算法原理 / 什么是diff算法（diff算法的理解）

对新旧两棵DOM树进行同层比较。

给每层元素添加惟一的 key 值。提升diff算法效率。

React      只会匹配相同组件名字

调用组件setState 方法的时候, React 将它标记为 dirty.到每个事件循环结束, React 检查全部标记 dirty 的组件 从新渲染.这样就实现了局部刷新的效果。

react 中 keys 的做用是什么？

在开发过程当中，咱们须要保证某个元素的 key 在其同级元素中具备惟一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近建立的仍是被移动而来的元素，从而减小没必要要的元素重渲染。此外，React 还须要借助 Key 值来判断元素与本地状态的关联关系，所以咱们毫不可忽视转换函数中 Key 的重要性。