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算法?
把树形结构按照层级分解,只比较同级元素。
给列表结构的每个单元添加唯_的key属性,方便比较。
React只会匹配相同class的component (这里面的class指的是组件的名字)
合并操作,调用component的setState方法的时候,React将其标记为dirty.到每—个事件循环 结束,React检查所有标记dirty的component重新绘制.
选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。
参考链接:https://segmentfault.com/a/1190000000606216
# 九、react性能优化方案
重写shouldComponentUpdate来避免不必要的dom操作0
使用 production 版本的react.js0
使用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)