react面试题（一）

• react 生命周期函数

初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每一个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上（在整个生命周期中只会触发一次）
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载以后（在整个生命周期中只会触发一次）

运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（能够返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件从新描绘
componentDidUpdate:组件已经更新

销毁阶段：
componentWillUnmount:组件即将销毁

• 为何虚拟 dom 会提升性能?

虚拟 dom 至关于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操做，从而提升性能。

用 JavaScript 对象结构表示 DOM 树的结构；而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变动的时候，从新构造一棵新的对象树。

而后用新的树和旧的树进行比较，记录两棵树差别把 2 所记录的差别应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

• react diff 原理

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

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

React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）。

合并操做，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每个事件循环结束, React 检查全部标记 dirty 的 component 从新绘制.

选择性子树渲染。开发人员能够重写 shouldComponentUpdate 提升 diff 的性能。

•  (组件的)状态(state)和属性(props)之间的区别

  Props是一个属性值，里面数据是不能改变的；

  State是一个状态机，根据数据的改变动改视图。

• refs 是什么?

Refs是能访问DOM元素或组件实例的一个函数；

• React 的工做原理

React 会建立一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会经过 "diffing" 算法来标记虚拟 DOM 中的改变；
第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

• 什么是redux？

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，
工做流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操做，view 经过 store 提供的 getState 获取最新的数据。

新增 state,对状态的管理更加明确，经过 redux，流程更加规范了，减小手动编码量，提升了编码效率，
同时缺点时当数据更新时有时候组件不须要，可是也要从新绘制，有些影响效率。
通常状况下，咱们在构建多交互，多数据流的复杂项目应用时才会使用它们。

•  react-redux的实现原理

react-redux是一个轻量级的封装库，它主要经过两个核心方法实现：
Provider：从最外部封装了整个应用，并向connect模块传递store。
Connect： 
    1、包装原组件，将state和action经过props的方式传入到原组件内部。
    二、监听store tree变化，使其包装的原组件能够响应state变化

• redux-thunk

背景：Redux 的基本作法，是用户发出 Action，Reducer 函数马上算出新的 State，View 从新渲染，但这是作同步。
而若是有异步请求时，那就不能知道何时获取的数据有存进store里面，所以此时须要在请求成功时返回一个标识或状态，并在此时再触发action给reducer传值。
所以，为了解决异步的问题，就引入了中间件的概念。
redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 中解决。

• 对webpack的理解

webpack是一个预编译模块方案，它会分析你的项目结构将其打包成适合浏览器加载的模块。
打包原理：把全部依赖打包成一个bundle.js文件，经过代码分割成单元片断并按需加载。

• 调用 setState 以后发生了什么

在代码中调用setState函数以后，React 会将传入的参数对象与组件当前的状态合并，而后触发所谓的调和过程（Reconciliation）。
通过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树而且着手从新渲染整个UI界面。
在 React 获得元素树以后，React 会自动计算出新的树与老树的节点差别，而后根据差别对界面进行最小化重渲染。
在差别计算算法中，React 可以相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是所有从新渲染。

• React 中 keys 的做用

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程当中，咱们须要保证某个元素的 key 在其同级元素中具备惟一性。渲染同类型元素不带key只会产生性能问题，若是渲染的是不一样类型的状态性组件，组件将会被替换，状态丢失