react 高频面试题

目录

1、什么是虚拟DOM？

2、虚拟DOM实现的原理？

3、类组件和函数组件之间的区别是啥？

4、React 中 refs 干嘛用的？

5、在 React 中如何处理事件？

6、state 和 props 区别是啥？

7、如何创建 refs？

8、什么是高阶组件？

9、在构造函数调用 super 并将 props 作为参数传入的作用是啥？

10、什么是控制组件？

11、讲讲什么是 JSX ？

12、为什么不直接更新 state 呢 ?

13、React 组件生命周期有哪些不同阶段？

14、React 的生命周期方法有哪些？

15、使用 React Hooks 好处是啥？

16、什么是 React Hooks？

17、React 中的 useState() 是什么？

18、React 中的StrictMode(严格模式)是什么？

19、为什么类方法需要绑定到类实例？

20、受控组件和非受控组件区别是啥？

21、如何避免组件的重新渲染？

22、如何避免在React重新绑定实例(解决this指向)？

23、React组件通信如何实现?

24、React如何进行组件/逻辑复用?

25、redux的工作流程?

26、redux中如何进行异步操作?

---

1、什么是虚拟DOM？

    虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。

2、虚拟DOM实现的原理？

1)虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
2)状态变更时，记录新树和旧树的差异
3)最后把差异更新到真正的dom中

3、类组件和函数组件之间的区别是啥？

    类组件可以使用其他特性，如状态 state 和生命周期钩子。
    当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。
    函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。如果都能满足需求的情况下，为了提高性能，尽量使用函数组件。

4、React 中 refs 干嘛用的？

    Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。
    可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

5、在 React 中如何处理事件？

    为了解决跨浏览器的兼容性问题，SyntheticEvent(事件e) 实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

6、state 和 props 区别是啥？

    props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即
    1)state 是组件自己管理数据，控制自己的状态，可变；
    2)props 是外部传入的数据参数，不可变；
    3)没有state的叫做无状态组件，有state的叫做有状态组件；
    4)多用 props，少用 state，也就是多写无状态组件。

7、如何创建 refs？

    Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

8、什么是高阶组件？

    高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

9、在构造函数调用 super 并将 props 作为参数传入的作用是啥？

    在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。

10、什么是控制组件？

    在 HTML 中，表单元素如 <input>、<textarea>和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。
    而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。

11、讲讲什么是 JSX ？

    jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力
    当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。
    JSX中的标签可以是单标签，也可以是双标签，但必须保证标签是闭合的。

12、为什么不直接更新 state 呢 ?

    如果试图直接更新 state ，则不会重新渲染组件。
    需要使用setState()方法来更新 state。它调度对组件state对象的更新。当state改变时，组件通过重新渲染来响应。