React 基础问题


1.React 中 keys 的作用是什么？
2.调用 setState 之后发生了什么？
3.react 生命周期函数-**

  • 初始化阶段：
  • 运行中状态：
  • 销毁阶段：

4.shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）
5.为什么虚拟 dom 会提高性能?(必考)
6.react diff 原理（常考，大厂必考）
7.React 中 refs 的作用是什么？
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()、ES6 class 和无状态函数。
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 (


type=’text’
ref={(input) => this.input = input} />


)
}
}
请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。
function CustomForm ({handleSubmit}) {
let inputElement
return (
handleSubmit(inputElement.value)}>
type=’text’
ref={(input) => inputElement = input} />


)
}

问题 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

;
}
}
或者这样用：
class UserForm extends Component {
handleSubmit = () => {
console.log(“Input Value is: “, this.input.value)
}
render () {
return (

type=’text’
ref={(input) => this.input = input} /> // Access DOM input in handle submit


)
}
}

问题 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 中，表单元素如 、