React相关面试经典问题

React相关面试经典问题

A.react中setState以后发生了什么

在调用setState以后，

1、react会将传入的参数对象跟当前的state合并，触发调和过程。

2、调和以后，react会高效的根据新的状态构建react元素树。

3、生成react元素树以后，通过diff算法可以得到新树和老树的节点差异。

4、根据这些差异，可以精确的实现按需更新

B.React 中 Element 与 Component 的区别是？

react Element是所见内容的数据结构，是对UI的描述，是通过jsx构建的声明式代码片段。

React Component 是接收参数输入返回某个 React Element 的函数或者类。

C.使用 Class Component 和 Functional Component的时机，即什么时候使用无状态组件？

在组件需要

1、内部状态

2、需要使用到生命周期函数的时候

使用 Class Component ，否则使用函数式组件。

D.React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。

1、React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被 

移动而来的元素，从而减少不必要的元素重渲染。

2、React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

E.react中的回调渲染模式

1、这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以        props.children进行调用：2、这种模式的优势在于将父组件与子组件解耦和，        父组件可以直接访问子组件的内部状态而不需要再通过Props传递，        这样父组件能够更为方便地控制子组件展示的UI界面

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

在 componentDidMount 函数中发起ajax请求1、保证请求仅在组件挂载完毕后才会要求响应2、调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到        componentWillMount 的触发次数。React 可能会多次频繁调用        componentWillMount。

G.React 中的事件处理逻辑

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

转自：https://blog.csdn.net/running_shuai/article/details/82667644