react 面试题 高级_关于React面试题汇总
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面试题汇总相关推荐
- react 面试题 高级_常见 React 面试题
(给前端大全加星标,提升前端技能) 作者:小胡 https://github.com/nanhupatar/FEGuide/blob/master/框架/react.md React 中 keys 的 ...
- react 面试题 高级_常见react面试题汇总(适合中级前端)
转载自<原文> React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () {return( {th ...
- react 数字转字符_深入浅出 React -- JSX
什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能 在 React 中,JSX 仅仅是 React.crea ...
- react 面试题 高级_高级前端面试题目大全(一)
第 1 题:(滴滴.饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么? 1. 更准确 因为带key就不是就地复用了,在sameNode函数 a.key === b ...
- react调度时间原理_使用React,Twilio和Cosmic JS构建约会调度程序
react调度时间原理 TL; DR 观看演示 安装应用 查看代码库 您的时间很宝贵,但您不能浪费一秒钟. 人们需要看到您,因为工作需要完成并且需要进行协作. 除了让人们直接与您交流以安排他们对您的时 ...
- 如何知道react对象的值_基于react怎么获取兄弟元素的对象或它的值?
谢邀. 题主刚学前端的吧,刚用上用react,应该是了解了下DOM然后用起react有这样的疑问.不过没事,慢慢来. 怎么说呢,两个input框在彼此的事件绑定里获取对方的值,在react里是很容易做 ...
- 前段react技术架构图_基于 React 的可视化编辑平台实践
前言 前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了. 正文从这开始-- 本文主要介绍了基于 React 构建可视化编辑平台的实践 ...
- react前端显示图片_在react里怎么引用图片
在react里怎么引用图片 方法一:import引入 import引入图片相比引用public文件夹里的图片会经过webpack的处理,如果导入小于10,000字节的图像将返回数据URI而不是路径,这 ...
- react做h5 例子_使用React写一个网站的心得体会
网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践. 网站最初前端使用vue开发,在前段时间由于项目的 ...
最新文章
- Apache 启动提示undefined symbol: libiconv_open
- BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
- Python学习笔记:常用内建模块5
- sql server php 案例,php连接sql server 2008案例
- Linux下Gcc 的编译过程
- mac安装mysql记录,使用zsh
- 腾讯视频怎么设置全速下载模式
- 通过Gogs部署git仓库
- 华为鸿蒙搭载哪些手机,华为鸿蒙系统支持哪些手机 可以装华为鸿蒙系统手机...
- Oracle中对象权限与系统权限revoke
- Elasticsearch的JavaAPI
- 计算机网络之数据通信基础知识
- 职称计算机怎么练,2017职称计算机windows操作训练题
- MUI APP关于页面之间的传值,plusready和自定义事件
- 超强wifi6路由器推荐!不强你打我!
- fid fopen MATLAB
- 尚融宝——阿里云短信验证功能(sms)
- 关于自动化测试的定位及一些思考
- 微信和淘宝扫码登录背后的实现原理
- php朋友圈九宫格怎么做,微信朋友圈九宫格视频怎么做 图片背景加九宫格视频随机播放的效果制作|微信九宫格视频...
热门文章
- 关闭弹窗代码java_弹出窗口代码
- 五分钟学GIS | 多进程切图
- Alinenware 17R4恢复原版OEM系统教程
- python软件测试面试题2020_【面试】2020软件测试面试题及答案汇总
- c rs232 mysql,[C#源代码]使用SCPI指令对通信端口(RS232/USB/GPIB/LAN)进行仪器编程
- 关于Editable的学习
- 南邮matlab实验报告,南邮matlab实验报告.doc
- 山东大学软件学院最优化方法考试复习笔记
- FRAM铁电存储器FM25W256编程实现存取数据
- 惠普战66系列拆机图文详解