1、redux中间件

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

常见的中间件:

redux-logger:提供日志输出

redux-thunk:处理异步操作

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

2、redux有什么缺点

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

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

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

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

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

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

具体使用可以参照如下链接:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

4、react生命周期函数

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

一、初始化阶段:

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

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

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

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

二、运行中状态:

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

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

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

render:组件重新描绘

componentDidUpdate:组件已经更新

三、销毁阶段:

componentWillUnmount:组件即将销毁

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

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

详细参考:

https//segmentfault.com/a/1190000006254212

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

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

具体实现步骤如下:

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

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

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

参考链接:

https://www.zhihu.com/question/29504639?sort=created

7、diff算法?

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

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

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

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

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

参考链接:

https//segmentfault.com/a/1190000000606216

8、react性能优化方案

(1)重写shouldComponentUpdate来避免不必要的dom操作。

(2)使用 production 版本的react.js。

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

参考链接:

https://segmentfault.com/a/1190000006254212

9、简述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

10、React项目用过什么脚手架?Mern? Yeoman?

Mern:MERN是脚手架的工具,它可以很容易地使用Mongo, Express, React and NodeJS生成同构JS应用。它最大限度地减少安装时间,并得到您使用的成熟技术来加速开发。

参考链接:http://www.open-open.com/lib/view/open1455953055292.html

react 面试题 高级_关于React面试题汇总相关推荐

  1. react 面试题 高级_常见 React 面试题

    (给前端大全加星标,提升前端技能) 作者:小胡 https://github.com/nanhupatar/FEGuide/blob/master/框架/react.md React 中 keys 的 ...

  2. react 面试题 高级_常见react面试题汇总(适合中级前端)

    转载自<原文> React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () {return( {th ...

  3. react 数字转字符_深入浅出 React -- JSX

    什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能 在 React 中,JSX 仅仅是 React.crea ...

  4. react 面试题 高级_高级前端面试题目大全(一)

    第 1 题:(滴滴.饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么? 1. 更准确 因为带key就不是就地复用了,在sameNode函数 a.key === b ...

  5. react调度时间原理_使用React,Twilio和Cosmic JS构建约会调度程序

    react调度时间原理 TL; DR 观看演示 安装应用 查看代码库 您的时间很宝贵,但您不能浪费一秒钟. 人们需要看到您,因为工作需要完成并且需要进行协作. 除了让人们直接与您交流以安排他们对您的时 ...

  6. 如何知道react对象的值_基于react怎么获取兄弟元素的对象或它的值?

    谢邀. 题主刚学前端的吧,刚用上用react,应该是了解了下DOM然后用起react有这样的疑问.不过没事,慢慢来. 怎么说呢,两个input框在彼此的事件绑定里获取对方的值,在react里是很容易做 ...

  7. 前段react技术架构图_基于 React 的可视化编辑平台实践

    前言 前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了. 正文从这开始-- 本文主要介绍了基于 React 构建可视化编辑平台的实践 ...

  8. react前端显示图片_在react里怎么引用图片

    在react里怎么引用图片 方法一:import引入 import引入图片相比引用public文件夹里的图片会经过webpack的处理,如果导入小于10,000字节的图像将返回数据URI而不是路径,这 ...

  9. react做h5 例子_使用React写一个网站的心得体会

    网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践. 网站最初前端使用vue开发,在前段时间由于项目的 ...

最新文章

  1. Apache 启动提示undefined symbol: libiconv_open
  2. BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
  3. Python学习笔记:常用内建模块5
  4. sql server php 案例,php连接sql server 2008案例
  5. Linux下Gcc 的编译过程
  6. mac安装mysql记录,使用zsh
  7. 腾讯视频怎么设置全速下载模式
  8. 通过Gogs部署git仓库
  9. 华为鸿蒙搭载哪些手机,华为鸿蒙系统支持哪些手机 可以装华为鸿蒙系统手机...
  10. Oracle中对象权限与系统权限revoke
  11. Elasticsearch的JavaAPI
  12. 计算机网络之数据通信基础知识
  13. 职称计算机怎么练,2017职称计算机windows操作训练题
  14. MUI APP关于页面之间的传值,plusready和自定义事件
  15. 超强wifi6路由器推荐!不强你打我!
  16. fid fopen MATLAB
  17. 尚融宝——阿里云短信验证功能(sms)
  18. 关于自动化测试的定位及一些思考
  19. 微信和淘宝扫码登录背后的实现原理
  20. php朋友圈九宫格怎么做,微信朋友圈九宫格视频怎么做 图片背景加九宫格视频随机播放的效果制作|微信九宫格视频...

热门文章

  1. 关闭弹窗代码java_弹出窗口代码
  2. 五分钟学GIS | 多进程切图
  3. Alinenware 17R4恢复原版OEM系统教程
  4. python软件测试面试题2020_【面试】2020软件测试面试题及答案汇总
  5. c rs232 mysql,[C#源代码]使用SCPI指令对通信端口(RS232/USB/GPIB/LAN)进行仪器编程
  6. 关于Editable的学习
  7. 南邮matlab实验报告,南邮matlab实验报告.doc
  8. 山东大学软件学院最优化方法考试复习笔记
  9. FRAM铁电存储器FM25W256编程实现存取数据
  10. 惠普战66系列拆机图文详解