React 理解

React 中 Element 与 Component 的区别？

简单而言，React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。而 React Component 则是可以接收参数输入并且返回某个 React Element 的函数或者类。

在什么情况下会优先使用 Class Component 而不是 Functional Component

在组件需要包含内部状态或者使用到生命周期函数的时候使用 Class Component ，否则使用函数式组件。

React 中 refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回.

在生命周期中的哪一步应该发起 AJAX 请求？

我们应该将 AJAX 请求放在 componentDidMount 函数中执行，主要原因是：

React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。

对于 `componentWillMount` 这个生命周期函数的调用次数会变得不确定，React 可以会多次频繁调用 `componentWillMount` 。如果我们将 AJAX 请求放在 `componentWillMount` 函数中，那么显而易见其会被触发多次，自然不是好选择。

如果我们将 AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了 setState 函数将数据添加到组件状态中，对于未挂载的组件则会报错。
而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。

React 生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 构造函数
Constructor()

// 在渲染前调用,在客户端也在服务端
componentWillMout()

// 渲染
render()

// 在第一次渲染后调用，只在客户端。
// 之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。
componentDidMout()

// 在组件接收到一个新的 prop (更新后)时被调用。
// 这个方法在初始化render时不会被调用。
componentWillReceiveProps()

// 返回一个布尔值。
// 在组件接收到新的props或者state时被调用。
// 在初始化时或者使用forceUpdate时不被调用。
// 可以在你确认不需要更新组件时使用
shouldComponentUpdate()

// 在组件接收到新的props或者state但还没有render时被调用。
// 在初始化时不会被调用
componentWillUpdate()

// 渲染
render()

// 在组件完成更新后立即调用。
// 在初始化时不会被调用。
componentDidUpdate()

// 在组件从 DOM 中移除的时候立刻被调用
componentWillUnmount

shouldComponentUpdate 的作用是啥以及为何它这么重要？

shouldComponentUpdate 允许我们手动的判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件封装为合成事件传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

createElement 与 cloneElement 的区别是什么？

createElement 函数是 JSX 编译之后使用的创建 React Element 的函数，而 cloneElement 则是用于复制某个元素并传入新的 Props 。

传入 setState 函数的第二个参数的作用是什么？

该函数会在 setState 函数调用完成并且组件开始重新渲染的时候被调用，我们可以用该函数来监听渲染是否完成。

前端 React 面试题

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！