React面试题收集（持续更新中...）

1.为什么浏览器无法读取JSX？

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

2.React 的 refs 是什么，有什么作用

refs 是 React 中引用的简写。它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。

3.React 中 render() 的目的

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

4.React 组件的生命周期方法

• componentWillMount —— 在渲染之前执行，在客户端和服务端都会执行。
• componentDidMount —— 仅在第一次渲染后在客户端执行
• componentWillReceiveProps —— 当从父类接收到 props 并且在调用另一个渲染器之前调用
• shouldComponentUpdate —— 根据特定条件返回 true 或 false。
• componentWillUpdate —— 在 DOM 中进行渲染前调用
• componentDidUpdate —— 在渲染发生后立即调用
• componentWillUnmount —— 从 DOM 卸载组件后调用。

5.React 的工作原理

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

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

1. 单一事实来源：整个应用的状态存储在单个store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
2. 状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通JS对象，就像是state是数据的最小表示一样，该操作是对数据更改的最小表示。
3. 使用纯函数进行更改：为了指定状态树如何通过操作进行转换，需要纯函数。

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

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

8.什么是单一事实来源？

Redux 使用 store 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并从 store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。

9.什么是高阶组件（HOC）？它可以做什么？

高阶组件是重用组件逻辑的高级方法，是一种源于React的组件模式。HOC是自定义组件，在它之内包含另一个组件。它可以接收子组件提供的任何动态，但不会修改或复制输入组件中的任何行为。

HOC可用于许多任务：

• 代码重用，逻辑和引导抽象
• 渲染劫持
• 状态抽象和控制
• Props控制

10.简述 VirtualDOM 及其工作原理

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

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

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

11.类组件和函数组件之间的区别是什么？

• 类组件可以使用其他特性，如状态和生命周期，有this
• 函数组件只能接收props渲染到页面，无状态组件，没有this，不能使用生命周期。需要引入hook等来使用
• 函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件。

12.state和props区别是什么？

相同点：都是普通的js对象，包含着渲染输出的信息
不同点：state是组件自己管理的数据，控制自己的状态，可变，props是外部传入的数据参数，不可变
没有state的叫做无状态组件，有state的叫有状态组件
多用props，少用state

13.为什么不直接更新state？

如果直接更新state，就不会重新渲染组件。
需要使用setState方法来更新state，它对state对象进行更新，当state改变时，组件通过重新渲染来实现响应

14.什么是受控组件？

在 HTML 中，表单元素如input、textarea等通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述的元素的值将随表单一起发送。

而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。

15.使用 React Hooks 好处是啥？

Hooks 是 React16.8 中的新添加内容，允许在不编写类的情况下使用 state 和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。

hools 解决了什么问题》
在函数组件中可以使用类组件中的特性的问题