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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 7,931评论 0 24
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,858评论 1 18
  • 1、redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 ac...
    董董董董董董董董董大笨蛋阅读 11,826评论 0 16
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,699评论 1 33
  • 1.react的生命周期 2.调用 setState 之后发生了什么? 在代码中调用setState函数之后,Re...
    三寸日光_阅读 4,608评论 0 0

友情链接更多精彩内容