React面试题

react面试题

本篇文章是小白自己对面试题的一个记录与积累。

如若发下不对或则不完善的地方，望指出我好及时改正。谢谢

react生命周期面试题

1.react 生命周期函数

1) 初始化阶段：
componentWillMount：实例挂载之前
Render：渲染组件
componentDidMount：实例挂载完成。一般在这个函数中与后台进行初始化数据交互。

2)运行阶段：
componentWillReceiveProps：父组件改变时调用。
sholudComponentUpdate：主要是用来手动阻止组件渲染，一般在这个函数中做组件的性能优化。
componentWillUpdate：组件数据更新前调用
componentDidUpdate：组件数据更新完成时调用

3)销毁阶段：
componentUnmount：销毁阶段。一般用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。

2.react生命周期中，最适合与服务端进行数据交互的是哪个函数

componentDidMount：在这个阶段，实例和dom已经挂载完成，可以进行相关的dom操作。

componentWillMount：因为加载阶段，不一定只加载一次

3.运行阶段生命周期调用顺序

componentWillReceiveProps
–>shouldComponentUpdate
–> componentWillupdate
–> componentDidUpdate

4.shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

询问组件是否需要更新的一个钩子函数，判断数据是否需要重新渲染，返回一个布尔值。默认的返回值是true，需要重新render()。若如果返回值是false则不触发渲染,利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能。
这个方法用来判断是否需要调用 render 方法重新描绘 dom。
因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

5.指出(组件)生命周期方法的不同

componentWillMount – 多用于根组件中的应用程序配置

componentDidMount – 在这可以完成所有没有 DOM 就不能做的所有配置，并开始获取所有你需要的数据；如果需要设置事件监听，也可以在这完成

componentWillReceiveProps – 这个周期函数作用于特定的 prop 改变导致的 state 转换

shouldComponentUpdate – 如果你担心组件过度渲染，shouldComponentUpdate 是一个改善性能的地方，因为如果组件接收了新的 prop， 它可以阻止(组件)重新渲染。shouldComponentUpdate 应该返回一个布尔值来决定组件是否要重新渲染

componentWillUpdate – 很少使用。它可以用于代替组件的 componentWillReceiveProps 和 shouldComponentUpdate(但不能访问之前的 props)

componentDidUpdate – 常用于更新 DOM，响应 prop 或 state 的改变

componentWillUnmount – 在这你可以取消网络请求，或者移除所有与组件相关的事件监听器

react 基础面试题

1.React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

我们需要保证某个元素的 key 在其同级元素中具有唯一性。

在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染；
此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

2.React 中 refs 的作用是什么？

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

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

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

组件不会被实例化，整体渲染性能得到提升

组件不能访问this对象

组件无法访问生命周期的方法

无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

2. es5原生方式React.createClass定义的组件

• React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
• React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components–HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃

3. es6形式的extends React.Component定义的组件

其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象

三种方法绑定this

//1. 构造函数中绑定
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); 
}
//2. 使用bind来绑定
<div onClick={this.handleClick.bind(this)}></div> 
//3. 使用箭头函数绑定
<div onClick={()=>this.handleClick()}></div> 

4.调用 setState 之后发生了什么？

setState是异步的

（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

5.react diff 原理（常考，大厂必考）

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

(2) 列表结构的每个单元添加唯一的 key 属性，方便比较。

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

(4) 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

(5) 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

6.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。

7.除了在构造函数中绑定 this，还有其它方式吗

• 你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。
• 在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

8.setState第二个参数的作用

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

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

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

10.简述 flux 思想

Flux 的最大特点，就是数据的"单向流动"。

• 用户访问 View
• View 发出用户的 Action
• Dispatcher 收到 Action，要求 Store 进行相应的更新
• Store 更新后，发出一个"change"事件
• View 收到"change"事件后，更新页面

11.在 React 当中 Element 和 Component 有何区别？

• React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。
  典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。
• React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element

12.描述事件在 React 中的处理方式。

• 为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。
• 这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。

13.createElement 和 cloneElement 有什么区别？

• React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。
• 它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。
• React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。
• 新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。

14.如何告诉 React 它应该编译生产环境版本？

通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。

编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息

15.为什么虚拟 dom 会提高性能?(必考)

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

16.你了解 Virtual DOM 吗？解释一下它的工作原理

Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。

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

1. 每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
2. 然后计算之前 DOM 表示与新表示的之间的差异。
3. 完成计算后，将只用实际更改的内容更新 real DOM。

17.什么是JSX，有什么特点？为什么浏览器无法读取JSX？

JSX 是JavaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。

react组件面试题

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

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

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

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

3.(组件的)状态(state)和属性(props)之间有何不同

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

4.何为受控组件(controlled component)

受控组件是React控制的组件，也是表单数据的唯一真理来源。

不受控制组件( uncontrolled component )是您的表单数据由 DOM 处理，而不是您的 React 组件。

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

一个函数返回一个React组件，指的就是一个React组包裹着另一个React组件。可以理解为一个生产React组件的工厂。

function ppHOC(WrappedComponent) {  
return class PP extends React.Component {    
 render() {      
   return <WrappedComponent {...this.props}/>    
 }  
} 

6.应该在 React 组件的何处发起 Ajax 请求

应该在 componentDidMount 中发起网络请求

7.react中组件传值

1、父组件给子组件传值

2、子组件给父组件传值

3、兄弟组件之前的传值

4、状态管理工具

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

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

redux面试题

1.组件

Redux 由以下组件组成：
1、Action – 这是一个用来描述发生了什么事情的对象。
2、Reducer – 这是一个确定状态将如何变化的地方。
3、Store – 整个程序的状态/对象树保存在Store中。
4、View – 只显示 Store 提供的数据。

2.redux中间件

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

3.redux有什么缺点

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

4.了解 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，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们

5.Redux遵循的三个原则是什么

1、单一事实来源： (所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。)

整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。

2、状态是只读的：

改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。

3、使用纯函数进行更改：

为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

6.解释 Reducer 的作用

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

7.Redux 有哪些优点

• 结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。

• 可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。

• 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。

• 开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。

• 社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。

• 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。

• 组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。

react性能比较面试题

1.vue和react的区别

1、react严格上针对的是mvc模式的view层，vue则是mvvm模式。

2、操作dom的方式不同，vue使用的是指令操作dom，react是通过js进行操作。

3、数据绑定不同，vue实现的是双向绑定，react的数据流动是单向的。

4、react中state是不能直接改变的，需要使用setState改变。vue中的state不是必须的，数据主要是由data属性在vue对象中管理的。

2.react性能优化的方案

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

3.介绍一下webpack webpack

webpack是一个前端模块化打包工具，主要由入口，出口，loader，plugins四个部分。前端的打包工具还有一个gulp，不过gulp侧重于前端开发的过程，而webpack侧重于模块，例如他会将css文件看作一个模块，通过css-loader将css打包成符合css的静态资源。

4.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？

因为this.props.children的值有三种可能：

如果当前组件没有子节点，它的值就是undefined

如果当前组件只有一个子节点，它的值就是我object

如果当前组件有多个子节点，它的值就是array

当this.props.children的值不是数组时，使用js的map会报错，React提供了工具方法React.Children来处理this.props.children,它已经将this.props.children的所有情况考虑在内了。
React.Children.map 遍历子元素，执行回调函数，返回结果。

React.Children.forEach 类似于React.Children.map()，但不返回对象。

React.Children.count 返回子元素总数，和传递给 map 或 forEach 的回调函数的调用次数一致。

React.Children.only 返回 children 中仅有的子元素。否则抛出异常。only方法接受的参数只能是一个对象，不能是数组。