2020年Web前端面试题之React相关（最全，最详细）
React相关
第一部分
1.React 中keys 的作用是什么？
Keys 是React在操作列表中元素被修改,添加,或者删除的辅助标识.
https://www.jianshu.com/p/5efa10d71051
2.调用setState 之后发生了什么？
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。
3.react 生命周期函数
·
初始化阶段：getDefaultProps==> constructor ==> componentWillMount ==> render ==> componentDidMount
·
运行中状态：componentWillReceiveProps=>shouldComponentUpdate==>componentWillUpdate==> render==>componentDidUpdate
·
销毁阶段：
componentWillUnmount
生命周期的顺序：defaultProps==> constructor ==> componentWillMount ==> render ==> componentDidMount==> componentWillUnmount
4.shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）
shouldComponentUpdate
询问组件是否需要更新的一个钩子函数，判断数据是否需要重新渲染，返回一个布尔值。默认的返回值是true，需要重新render()。若如果返回值是false则不触发渲染,利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能。
这个方法用来判断是否需要调用 render 方法重新描绘 dom。
因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接受父组件的数据没有变动。子组件render的执行会影响性能，这时就可以使用shouldComponentUpdate来解决这个问题。
shouldComponentUpdate 这是一个需要返回布尔值的生命周期，可以理解为疑问句 "组件本身需要被重新渲染吗?"
例如：
shouldComponentUpdate (){
if(子组件原数据 == 子组件现在接收的数据){
return false;
}else{
retuen true;
}
}
从而达到没必要重新渲染的子组件，阻塞掉父子render变化引起的子组件render的变动，提升性能！
5.为什么虚拟 dom 会提高性能?(必考)
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
采用虚拟DOM的话，当数据变化的时候，只需要局部刷新变化的位置就好了。
虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染,优化性能.
6.react diff 原理（常考，大厂必考）
(1) 把树形结构按照层级分解，只比较同级元素。
(2) 列表结构的每个单元添加唯一的 key 属性，方便比较。
(3) React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
(4) 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
(5) 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
7.React 中refs 的作用是什么？
https://segmentfault.com/a/1190000020247827?utm_source=tag-newest
8.如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？
9.展示组件(Presentational component)和容器组件(Container
component)之间有何不同
10.容器组件则更关心组件是如何运作的。
11.类组件(Class component)和函数式组件(Functional
component)之间有何不同
12. (组件的)状态(state)和属性(props)之间有何不同
13.何为受控组件(controlled component)
14.何为高阶组件(higher order component)
15.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
16.除了在构造函数中绑定 this，还有其它方式吗
17.应该在 React 组件的何处发起 Ajax 请求
18.描述事件在 React 中的处理方式。
19.createElement 和cloneElement 有什么区别？
20.React 中有三种构建组件的方式
21.React.createClass()、ES6class 和无状态函数。
22.react 组件的划分业务组件技术组件？
23.简述flux 思想
24.Flux 的最大特点，就是数据的"单向流动"。
25.React 项目用过什么脚手架（本题是开放性题目）
26.了解redux 么，说一下 redux 的作用和运用流程，redux有什么缺点
第二部分
- 35道咱们必须要清楚的 React 面试题
第三部分
问题1：什么是虚拟DOM？
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
问题2：类组件和函数组件之间的区别是啥？
- 类组件可以使用其他特性，如状态
state和生命周期钩子。 - 当组件只是接收
props渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
| 区别 | 函数组件 | 类组件 |
|---|---|---|
是否有 this |
没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
是否有状态 state |
没有 | 有 |
问题 3：React 中 refs 干嘛用的？
Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。
咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。
function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}
问题 4：在 React 中如何处理事件
为了解决跨浏览器的兼容性问题，SyntheticEvent 实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。
问题 5：state 和 props 区别是啥？
props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即
state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；- 没有
state的叫做无状态组件，有state的叫做有状态组件； - 多用
props，少用state，也就是多写无状态组件。
问题 6：如何创建 refs
Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
或者这样用：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}
问题 7：什么是高阶组件？
高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC 可以用于以下许多用例
- 代码重用、逻辑和引导抽象
- 渲染劫持
- state 抽象和操作
- props 处理
问题 8：在构造函数调用 super 并将 props 作为参数传入的作用是啥？
在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。
传递 props
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: 'sudheer',age: 30 }
}
}
没传递 props
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
// 但是 Props 参数仍然可用
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// 构造函数外部不受影响
console.log(this.props) // { name: 'sudheer',age: 30 }
}
}
上面示例揭示了一点。props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。
问题 9：什么是控制组件？
在 HTML 中，表单元素如 、