react 相关面试题

梦里梦外; 2022-02-25 15:23 296阅读 0赞

### React面试题 ###

搜集了一波react的相关面试题，希望对大家有帮助，不喜勿喷，有错的请指正，谢谢！！！

##### 1.描述一下你对react 的理解？ #####

react是一个用于构建用户界面的JS库。  
react主要用于构建UI。很多人认为 React 是 MVC 中的 V（视图）。  
react起源于：Facebook的内部项目，用来架设instagram网站，于2013年5月。

##### 2.React的特点？ #####

生命式设计：react采用声明范式。  
高效：react通过对DOM的模拟，最大限度减少DOM交互。  
灵活：react可与已知的库和框架很好的配合。  
JSX：JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。  
组件：通过react构建组件，使得代码更加容易得到复用，能够很好应用在大项目开发中。  
单向页面的数据流：react实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

##### 3.React中如何定义初始状态？ #####

使用state和props  
State主要用于更新界面，组件的state在生命周期函数constructor中初始化，使用this.setState来改变state的时候，界面会重新渲染  
Props主要是用于组件之间传递数据

##### 4.Jsx有什么有点？ #####

Jsx执行更快，因为在编译为JavaScript代码后进行了优化  
使用jsx编写模板更加快速简单  
它是类型安全的，在编译过程中就能发现错误

##### 5.如何创建虚拟DOM、组件？ #####

class Xxx extends React.Component{
    Render(){
    retuen
    }
    }

##### 6.组件如何渲染到界面 #####

ReactDOM.render(
    <组件 />,
    Document.getElementById()
    )

##### 7.构建view视图用哪一个函数？ #####

Render()

##### 8.在render函数中，如果多个元素嵌套时需要注意什么？ #####

当有多个元素嵌套时，需要使用一个最外层的标签包含所有的元素

##### 9.什么是state？ #####

State是一个状态机，根据数据的改变更新视图

##### 10.Redux中间件 #####

中间件提供第三方插件的模式，自定义拦截action > reducer的过程，变为action > middleware s > reducer。这种机制可以让我们改变数据流，实现异步action，action过滤，日志输出，异常报告等功能。  
常见的中间件插件  
Redux-logger:提供日志输出  
redux-thunk ： 处理异步操作  
redux-promise ： 处理异步操作，actionCreator的返回值的promise

##### 11.Redux有什么缺点 #####

一个组件所需要的数据，必须全部有父组件传过来，而不能想flux直接从store中获取  
当一个组件的相关数据更新的时候，即使父组件不需要用到这个组件，父组件还是会重新render，可能有效率的影响，或者需要写更复杂的shouldComponentUpdate进行判断。

##### 12.React的生命周期 #####

初始化阶段：  
getDefaultProps获取实例的默认属性  
getInitialState获取每个实例的初始化状态  
componentWillMount 组件即将被装载、渲染到界面上  
Render 组件在这里生成虚拟DOM节点  
componentDidMount 组件真正被装载之后

运行状态中：  
componentWillReceiverProps 组件将要接收到属性的时候调用  
shouldComponentUpdate 组件接收到新属性或者新状态的时候（可以返回false，接受数据后不更新，阻止render调用，后面的函数就不会继续被执行）  
componentWillUpdate 组件即将更新不能修改属性和状态  
Render 组件重新描绘  
componentDidUpdate 组件已经更新

销毁阶段  
componentWillUnmount 组件即将被销毁

首次实例化：getDefaultProps > getInitialState > componentWillMount > render > componentDidMount  
实例化完成后的更新：getInitialState > componentWillMount > render > componentDidMount  
组件已存在时的状态改变：componentwillReceiveProps > shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate

##### 13.React性能优化在哪个周期函数？ #####

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom，因为描绘dom非常消耗性能，如果能在shouldComponentUpdate方法中写出更优化的dom diff算法，可以极大的提高性能

##### 14.reactJS和子组件如何通信？ #####

父组件传递给子组件：一般使用props来传递，还可以调用子组件的方法来传递  
子组件传递给父组件：通过调用父组件的方法来传递

##### 15.reactJS兄弟组件中如何通信？ #####

事件用DeviceEventEmitter、数据传递刷新等用redux、数据库

##### 16.传入setState函数得第二个参数的作用是什么？ #####

Set方法调用刷新完毕后回调

##### 17.reactJS生命周期中哪一部分调用ajax #####

componentDidMount

##### 18.reactJS的props.children.map函数来遍历会收到很多异常提示，为什么？该如何遍历？ #####

this.props.children的值有三种可能：  
如果当前组件没有子节点，它就是undefined；  
如果有一个子节点，数据类型就是object；  
如果有多个子节点，数据类型就是array。  
系统提供React.Children.map()方法安全地遍历子节点对象

##### 19.完成isNumber函数，返回Promise对象给调用者 #####

isNumber(num){
    Return new Promise((resolve,reject) =>{
    Resolve (typeof num ==’number’)
    })
    }

##### 20.使用async 、 await 以及Promise 实现调用asyncPrint函数后可以指定多少毫秒后打印传入地值 #####

asyncPrint = async(str,delay) =>{
    Await this.delayFunc(delay);
    Alert(str);
    };
    delayFunc(delay){
    retuen new Promise ((resolve) =>{
    setTimeout (()=>{
    resolve()
    },delay)
    })
    }

##### 21.重新渲染界面这个过程在生命周期中哪几步？ #####

componentwillReceiveProps > shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate

##### 22.React中key的作用是什么？ #####

React利用key来识别组件，它是一种身份的标识。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建

##### 23.什么是react的refs，为什么它们很重要？ #####

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

function CustomForm ({handleSubmit}) {
      let inputElement
      return (
        <form onSubmit={() => handleSubmit(inputElement.value)}>
          <input
            type='text'
            ref={(input) => inputElement = input} />
          <button type='submit'>Submit</button>
        </form>
      )
    }

##### 24.为什么虚拟dom会提高性能？ #####

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。  
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

##### 25.React diff原理 #####

把树形结构按照层级分解，只比较同级元素。  
给列表结构的每个单元添加唯一的 key 属性，方便比较。  
React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）  
合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.  
选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

##### 26.展示组件(Presentational component)和容器组件(Container component)之间有何不同 #####

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。  
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

##### 27.类组件(Class component)和函数式组件(Functional component)之间有何不同 #####

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态  
当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 ‘无状态组件(stateless component)’，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

##### 28.何为受控组件(controlled component) #####

在 HTML 中，类似 `<input>, <textarea> 和 <select>`这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 onChange 会更新 state，重新渲染组件。一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为"受控元素"。

##### 29.何为高阶组件(higher order component) #####

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

##### 30.(在构造函数中)调用 super(props) 的目的是什么 #####

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

##### 31.React 中有三种构建组件的方式 #####

React.createClass()、ES6 class 和无状态函数。

##### 32.react 组件的划分业务组件技术组件？ #####

根据组件的职责通常把组件分为 UI 组件和容器组件。  
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。  
两者通过 React-Redux 提供 connect 方法联系起来。

##### 33.React 项目用过什么脚手架 #####

create-react-app和 npx create-react-app

##### 34.了解redux么？说一下redux #####

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰  
新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们

##### 35.简述一下flux思想 #####

Flux 的最大特点，就是数据的"单向流动"。  
1.用户访问 View  
2.View 发出用户的 Action  
3.Dispatcher 收到 Action，要求 Store 进行相应的更新  
4.Store 更新后，发出一个"change"事件  
5.View 收到"change"事件后，更新页面

##### 36.setState第二个参数的作用 #####

因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数。

##### 37.React优化性能的方案 #####

（1）重写shouldComponentUpdate来避免不必要的dom操作。  
（2）使用 production 版本的react.js。  
（3）使用key来帮助React识别列表中所有子组件的最小变化。

##### 38.介绍一下webpack #####

webpack是一个前端模块化打包工具，主要由入口，出口，loader，plugins四个部分。

##### 39.React 中 Element 与 Component 的区别是？ #####

React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。  
典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为createElement的调用组合。  
而 React Component 则是可以接收参数输入并且返回某个 React Element 的函数或者类。  
在什么情况下你会优先选择使用 Class Component 而不是 Functional Component？  
在组件需要包含内部状态或者使用到生命周期函数的时候使用 Class Component ，否则使用函数式组件。

##### 40.Controlled Component 与 Uncontrolled Component 之间的区别是什么？ #####

React 的核心组成之一就是能够维持内部状态的自治组件，不过当我们引入原生的HTML表单元素时（input,select,textarea 等），我们是否应该将所有的数据托管到 React 组件中还是将其仍然保留在 DOM 元素中呢？这个问题的答案就是受控组件与非受控组件的定义分割。  
受控组件（Controlled Component）代指那些交由 React 控制并且所有的表单数据统一存放的组件。譬如下面这段代码中username变量值并没有存放到DOM元素中，而是存放在组件状态数据中。任何时候我们需要改变username变量值时，我们应当调用setState函数进行修改。

##### 41.createElement 与 cloneElement 的区别是什么？ #####

createElement 函数是 JSX 编译之后使用的创建 React Element 的函数，而 cloneElement 则是用于复制某个元素并传入新的 Props。

##### 42.React 的工作原理 #####

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM

##### 43.怎么阻止组件渲染？ #####

在render方法中返回null

##### 44.何为纯函数(pure function) #####

一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果。

##### 45.如何告诉react它应该是编译生产环境版本？ #####

通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE\_ENV 变量值设置为 production。编译版本中 React 会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息。

##### 46.概述一下react中的事件处理逻辑 #####

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

##### 47.当你调用setState的时候，发生了什么事？ #####

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。  
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。  
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。