react 面试

react

redux (所有数据都放入redux管理)

1、redux中间件原理(middleware)

  • 中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。

  • 变为 action -> middlewares -> reducer。

  • 这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能

  • 常见的中间件:

redux-logger:提供日志输出

redux-thunk(async/await):处理异步操作

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

  • middleware作用:
    改装dispatch

2、redux有什么缺点

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

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

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

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

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

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

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

react生命周期函数

1. react性能优化是哪个周期函数?

  • shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。

  • 因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法,可以极大的提高性能。

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

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

具体实现步骤如下:

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

  • 状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

react性能优化方案

  • key值相同, 就直接复用, 不用再创建虚拟DOM对象

jsx

什么是 JSX 和我们怎样在 JavaScript 代码中书写它 —— 浏览器是如何识别它的?

  • JSX 只是一种 Facebook 普及的标记语法,受益于 Babel/TSC 这些工具

  • 我们能够以一种更令赏心悦目的方式书写 React.createElement 调用。

JSX 的技术原理以及随之而来的限制;为什么甚至在我们的代码并没有使用 React 的情况下,也需要在文件顶部 import React from 'react';

为什么JSX中的组件名要以大写字母开头?

React 如何知道要渲染的是组件还是 HTML 元素就够了。

解释下“状态提升(Context)”理念吗?

  • 它允许你在兄弟组件间传递数据
  • 它允许你拥有更多纯展示组件,更易复用

如果不能在组件间传递数据,你怎样给多级组件传递数据:

简述flux 思想

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

1.用户访问 View

2.View 发出用户的 Action

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

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

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

受控组件与非受控组件 :

受控组件:

在HTML中,标签