zoukankan      html  css  js  c++  java
  • web 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

  • 相关阅读:
    表单数据源控制器笔记
    方法汇总1
    Persistence.beans
    数据库外键理解
    SQL语句缺少
    树型结构需要绑定的字段
    模型绑定替换
    乱码
    表单的验证:客户端验证和服务器端验证
    表单
  • 原文地址:https://www.cnblogs.com/jiayeyuan/p/10154434.html
Copyright © 2011-2022 走看看