Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • 前端框架面试题汇总

  • 基本面试题

    • HTML
    • CSS
    • JavaScript
    • 网络基础
    • Vue
    • React
      • 一、有了解过React.js吗?
      • 二、redux中间件
      • 三、redux有什么缺点
      • 四、react组件的划分业务组件技术组件?
      • 五、react生命周期函数
      • 六、react性能优化是哪个周期函数?
      • 七、为什么虚拟dom会提高性能?
      • 八、diff算法?
      • 九、react性能优化方案
      • 十、简述flux思想
      • 十一、 React项目用过什么脚手架? Mern? Yeoman?
    • Angular
    • 框架底层
  • 进阶面试题

  • 其它

  • 面试
  • 基本面试题
ctrlwin
2021-03-29

React

# 一、有了解过React.js吗?

React.js 只是—个视图库

(1)声明式设计

(2)高效:通过对DOM的模拟,最大限度的减少与DOM的交互。

(3)灵活:可以与已知的框架或库很好的配合。

(4)JSX:是js语法的扩展,不—定使用,但建议用。

(5)组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。

(6)单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。

# 二、redux中间件

中间件提供第三方插件的模式,自定义拦截action—> reducer的过程。变为action—〉 middlewares —> reducer。这种机制可以让我们改变数据流,实现如异步action, action过滤,日志输出,异常报告等功能。

常见的中间件:

redux—logger:提供日志输出

redux—thunk:处理异步操作

redux—promise:处理异步操作,actionCreator的返回值是promise

# 三、redux有什么缺点

1.—个组件所需要的数据,必须甶父组件传过来,而不能像flux中直接从store取。

2.当—个组件相关数据更新吋,即使父组件不需要用到这个组件,父组件还是会重新render,可能会 有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。

# 四、react组件的划分业务组件技术组件?

根据组件的职责通常把组件分为UI组件和容器组件。

UI组件负责UI的呈现,容器组件负责管理数据和逻辑。

两者通过React—Redux提供connect方法联系起来。

具体使用可以参照如下链接:

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react—redux.html (opens new window)

# 五、react生命周期函数

这个问题要考察的是组件的生命周期

1.初始化阶段:

Constructor初始化状态

componentWillMount:组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的DOM节点

componentDidMount:组件真正在被装载之后

2.运行中状态:

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻止render调用,后面的函数不会被继续执行了)

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

3.销毁阶段:

componentWillUnmount:组件即将销毁

# 六、react性能优化是哪个周期函数?

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的domdiff算法,可以极大的提高性能。

详细参考:https://segmentfault.com/a/1190000006254212

# 七、为什么虚拟dom会提高性能?

虚拟dom相当于在js和真实dom中间加了—个缓存,利用dom diff算法避免了没有必要的dom操作,从而提髙性能。

具体实现步骤如下:

1.用JavaScript对象结构表示DOM树的结构;然后用这个树构建—个真正的DOM树,插到文档当中

2.当状态变更的时候,重新构造—棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异

3.把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。

参考链接:https://www.zhihu.com/question/29504639?sort=created

# 八、diff算法?

  1. 把树形结构按照层级分解,只比较同级元素。

  2. 给列表结构的每个单元添加唯_的key属性,方便比较。

  3. React只会匹配相同class的component (这里面的class指的是组件的名字)

  4. 合并操作,调用component的setState方法的时候,React将其标记为dirty.到每—个事件循环 结束,React检查所有标记dirty的component重新绘制.

  5. 选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。

参考链接:https://segmentfault.com/a/1190000000606216

# 九、react性能优化方案

  1. 重写shouldComponentUpdate来避免不必要的dom操作0

  2. 使用 production 版本的react.js0

  3. 使用key来帮助React识别列表中所有子组件的最小变化。

参考链接:

https://segmentfault.com/a/1190000006254212http://blog.csdn.net/limm33/article/details/50948869

# 十、简述flux思想

Flux的最大特点,就是数据的"单向流动"。

1.用户访问View

2.View发出用户的Action

3.Dispatcher收到Action,要求Store进行相应的更新

4.Store更新后,发出—个"change"事件

5.View收到"change"事件后,更新页面

参考链接:http://www.ruanyifeng.com/blog/2016/01/flux.html

# 十一、 React项目用过什么脚手架? Mern? Yeoman?

Mern: MERN是脚手架的工具,它可以很容易地使用Mongo, Express, ReactandNodeJS生成

同构JS应用。它最大限度地减少安装时间,并得到您使用的成熟技术来加速开发。

参考链接:http://www.open—open.com/lib/view/open1455953055292.html (opens new window)

在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM

← Vue Angular→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×