常见面试题 react

react生命周期

componentWillMount：组件即将被装载、渲染到页面上
componentDidMount:组件真正在被装载之后
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候
componentWillUpdate:组件即将更新不能修改属性和状态
componentWillUnmount:组件即将销毁

shouldComponentUpdate 是做什么的？

用来判断是否需要调用 render 方法重新描绘 dom。
如果能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

diff算法简介

• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每个单元添加唯一的 key 属性，方便比较。
• React 只会匹配相同 class 的 component（这里面的class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

React 中 keys 的作用

元素的 key 在其同级元素中具有唯一性；在 React Diff 算法中借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
React 还需要借助 Key 值来判断元素与本地状态的关联关系。

react性能优化方案

• 重写shouldComponentUpdate来避免不必要的dom操作
• 使用 production 版本的react.js。
• 使用key来帮助React识别列表中所有子组件的最小变化

react优点

• React 速度很快：不直接对 DOM 进行操作，引入虚拟dom。通过diff算法判断出变化的地方进行修改。
• 跨浏览器兼容
• 组件化：代码更加模块化，重用代码更容易，可维护性高
• 单向数据流

react render 在生命周期哪里执行

componentWillMount之后，componentDidMount之前执行；
componentWillUpdate之后，componentDidUpdate之前执行

setState何时异步何时同步

由React控制的事件处理程序，以及生命周期函数调用 setState不会同步更新state 。大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。

变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false。React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true。

setState的流程

setState的流程：过程包括更新state，创建新的VNode，再经过diff算法比对差异，决定渲染哪一部分以及怎么渲染，最终形成最新的UI。
这一过程包含组件的四个生命周期函数：shouleComponentUpdate、
componentWillUpdate、render、componentDidUpdate。

setState 和 replaceState 的区别

setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，
不会减少原来的状态
replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了

什么操作会触发render

初始化
setState()在任何情况下都会导致组件的重新渲染，即使state未发生变化
只要父组件重新渲染了，那么子组件就会重新渲染

React 中 refs 的作用是什么

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

react中父子组件传值

父传子：
将父组件的值以属性的形式传递子组件，子组件通过this.props接收。
子传父：
子组件通过this.props.event()向父组件传递参数，父组件通过这个event的事件名接收到数据。

React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

应该在 React 组件的何处发起 Ajax 请求

在 componentDidMount 中发起网络请求，这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。

componentWillMount：不能保证在组件挂载之前 Ajax 请求已经完成，那么在一个未挂载的组件上调用 setState，这将不起作用。

简述mvc模式和mvvm模式

mvvm：
M：Model（数据模型），V：View（视图层），
VM：ViewModel 是一个同步View 和 Model的对象，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来。开发者只需关注业务逻辑。
mvc
MVC模式，即是Model-View-Controller模式，MVC体现的是应用程序设计中的分层思想。
流程：用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）

React的协议

React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，如果你的产品跟facebook没有竞争关系，你可以自由的使用react，但是如果有竞争关系，你的react的使用许可将会被取消。