react前端面试题整合

一、基础知识

什么是 React?

React 是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中，之后于 2012 年被应用到 Instagram 上。

React 的主要特点是什么?

1. 考虑到真实的 DOM 操作成本很高，它使用 VirtualDOM 而不是真实的 DOM。
2. 支持服务端渲染。
3. 遵循单向数据流或数据绑定。
4. 使用可重用/可组合的 UI 组件开发视图。

如何在 React 中创建组件?

有两种可行的方法来创建一个组件：

1. Function Components: 这是创建组件最简单的方式。这些是纯 JavaScript 函数，接受 props 对象作为第一个参数并返回 React 元素：

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>
}

2. Class Components: 你还可以使用 ES6 类来定义组件。上面的函数组件若使用 ES6 的类可改写为：

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

何时使用类组件和函数组件?

如果组件需要使用状态或生命周期方法，那么使用类组件，否则使用函数组件。
React 中的 props 是什么?
Props 是组件的输入。它们是单个值或包含一组值的对象，这些值在创建时使用类似于 HTML 标记属性的命名约定传递给组件。它们是从父组件传递到子组件的数据。

Props 的主要目的是提供以下组件功能：

1. 将自定义数据传递到组件。
2. 触发状态更改。
3. 在组件的 render() 方法中通过 this.props.reactProp 使用。

状态和属性有什么区别?

state 和 props 都是普通的 JavaScript 对象。虽然它们都保存着影响渲染输出的信息，但它们在组件方面的功能不同。Props 以类似于函数参数的方式传递给组件，而状态则类似于在函数内声明变量并对它进行管理。

	States	Props
可从父组件接收初始值	是	是
可在父组件中改变其值	否	是
在组件内设置默认值	是	是
在组件内可改变	是	否
可作为子组件的初始值	是	是

我们为什么不能直接更新状态?

如果你尝试直接更新状态，则不会重新渲染组件?

this.state.message = 'Hello world' //Wrong

而是使用 setState() 方法。它调度组件状态对象的更新。当状态更改时，组件通过重新渲染来响应。

this.setState({ message: 'Hello World' })//Correct

注意： 你可以在 constructor 中或使用最新的 JavaScript 类属性声明语法直接设置状态对象。

回调函数作为 setState() 参数的目的是什么?

当 setState 完成和组件渲染后，回调函数将会被调用。由于 setState() 是异步的，回调函数用于任何后续的操作。

什么是 JSX?

JSX 是 ECMAScript 一个类似 XML 的语法扩展。
基本上，它只是为 React.createElement() 函数提供语法糖，从而让在我们在 JavaScript 中，使用类 HTML 模板的语法，进行页面描述。

为什么虚拟dom会提高性能?

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

具体实现步骤如下：

用 Java 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中，当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异，把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

什么是 “key” 属性，在元素数组中使用它们有什么好处?

key 是一个特殊的字符串属性，你在创建元素数组时需要包含它。Keys 帮助 React 识别哪些项已更改、添加或删除。

refs 有什么用?

ref 用于返回对元素的引用。但在大多数情况下，应该避免使用它们。当你需要直接访问 DOM 元素或组件的实例时，它们可能非常有用。

React 的优点是什么?

1. 使用 Virtual DOM 提高应用程序的性能。
2. JSX 使代码易于读写。
3. 它支持在客户端和服务端渲染。
4. 易于与框架（Angular，Backbone）集成，因为它只是一个视图库。
5. 使用 Jest 等工具轻松编写单元与集成测试。

React 的局限性是什么?

1. React 只是一个视图库，而不是一个完整的框架。
2. 对于 Web 开发初学者来说，有一个学习曲线。
3. 将 React 集成到传统的 MVC。
4. 框架中需要一些额外的配置。
5. 代码复杂性随着内联模板和 JSX 的增加而增加。
6. 太多较小的组件导致过度工程化或样板文件。

diff算法?

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

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

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

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

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

react性能优化方案

（1）重写shouldComponentUpdate来避免不必要的dom操作。

（2）使用 production 版本的react.js。

（3）使用key来帮助React识别列表中所有子组件的最小变化。

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

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

二、生命周期

react性能优化是哪个周期函数？

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

二、redux

什么是 Flux?

Flux 是应用程序设计范例，用于替代更传统的 MVC 模式。它不是一个框架或库，而是一种新的体系结构，它补充了 React 和单向数据流的概念。在使用 React 时，Facebook 会在内部使用此模式。

什么是 Redux?

Redux 是基于 Flux设计模式 的 JavaScript 应用程序的可预测状态容器。Redux 可以与 React 一起使用，也可以与任何其他视图库一起使用。它很小（约2kB）并且没有依赖性。

Redux 的核心原则是什么？?

Redux 遵循三个基本原则：

1. 单一数据来源： 整个应用程序的状态存储在单个对象树中。单状态树可以更容易地跟踪随时间的变化并调试或检查应用程序。
2. 状态是只读的：改变状态的唯一方法是发出一个动作，一个描述发生的事情的对象。这可以确保视图和网络请求都不会直接写入状态。
3. 使用纯函数进行更改：要指定状态树如何通过操作进行转换，您可以编写reducers。Reducers只是纯函数，它将先前的状态和操作作为参数，并返回下一个状态。

我可以在 reducer 中触发一个 Action 吗?

在 reducer 中触发 Action 是反模式。您的 reducer 应该没有副作用，只是接收 Action 并返回一个新的状态对象。在 reducer 中添加侦听器和调度操作可能会导致链接的 Action 和其他副作用。

如何在组件外部访问 Redux 存储的对象?

是的，您只需要使用createStore()从它创建的模块中导出存储。此外，它不应污染全局窗口对象。

store = createStore(myReducer)
export default store

MVW 模式的缺点是什么?

1. DOM 操作非常昂贵，导致应用程序行为缓慢且效率低下。
2. 由于循环依赖性，围绕模型和视图创建了复杂的模型。
3. 协作型应用程序（如Google Docs）会发生大量数据更改。
4. 无需添加太多额外代码就无法轻松撤消（及时回退）。

1、对redux中间件的理解

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

• redux-logger：提供日志输出
• redux-thunk：处理异步操作
• redux-promise：处理异步操作，actionCreator的返回值是promise

2、redux有什么缺点

1. 组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。

2. 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

参考：https://blog.csdn.net/sinat_17775997/article/details/88826033?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2