前言
React是近几年来前端项目开发非常火的一个框架，其背景是Facebook团队的技术支持，市场占有率也很高。很多初学者纠结一开始是学react还是vue。个人觉得，有时间的话，最好两个都掌握一下。
react全家桶
（1）运用jsx语法
（2）React生命周期
（3）前后端交互用到的fetch/axios
（4）React-router路由
（5）数据流解决方案redux
（6）React-redux
（7）中间件
（8）Dva框架
（9）Umi框架
react的优缺点以及特点
优势：
1. 引入了虚拟DOM和diff算法，提高了Web性能。
2. 组件化，模块化开发。便于我们后期维护性。
3. 单向数据流，比较有序，便于数据管理。
不足：
1. react中只是MVC模式的View部分，所以在react开发中要依赖很多其他模块。
2. 当父组件进行重新渲染时，即使子组件的props或state没有任何改变，也会同样进行重新渲染。（react如何避免重复渲染）
特点：
1. 声明式设计（React采用声明式，可以轻松描述应用。）
2. 高性能（React通过对DOM的模拟，最大限度地减少与DOM的交互。）
3. 灵活（React可以与已知的库或框架很好地配合。）
在React如何做性能优化？
1. 给DOM的遍历上加上唯一的key。提高diff算法效率。
尽量不要用index,如果说在DOM中删了某一个节点，index也就会发生变化，这时候就会重新渲染，所以key值最好使用id。
2. 能用const声明的就用const。
在render里面尽量减少新变量的创建以及函数的指向改变问题。
3. 减少对真实DOM的操作。
4. 如果是用webpack搭建环境的话，当一个包过大加载过慢时，可分成多个包来优化。
5. 使用react-loadable，按需加载路由
6. 定时器，超时器使用过后在unmount中清除。
7. immutable对象管理状态 让状态不能被更改
8. 把component更换成pureComponent 也可以进行优化
你对pureComponent的理解
1.当更新时，如果组件的props或者state都没有改变，render函数就不会触发。
2.省去虚拟DOM的生成和对比过程，达到提升性能的目的。
3.具体原因是因为react自动帮我们做了一层浅比较
简述react项目的开发过程？
答：
安装node环境
使用creat-react-app创建项目
通过npm start运行项目
查看生产环境的项目目录及结构
开始写自己的组件 然后拼装组件
然后在查看项目 没问题了
在通过webpack打包到生产环境中
然后提交到公司git服务器上
然后链条测试
上线
react生命周期及相关用法
react生命周期分为mount阶段、update阶段、unmount阶段。
(1) mount阶段：
componentWillMount：实例挂载之前。进行初始化数据的交互。
Render：渲染组件
componentDidMount：实例挂载完成。在这个函数中，实现前后端数据交互。
(2) update阶段：
componentWillReceiveProps：父组件改变时调用。
sholudComponentUpdate：是否重新渲染组件，一般在这个函数中做组件的性能优化。
componentWillUpdate：组件数据更新前调用
componentDidUpdate：组件数据更新完成时调用
(3) unmount阶段：
componentWillUnmount：一般用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。
对前后state浅层比较
react如何避免重复渲染
React 官方提供了 PureRenderMixin 插件，它的功能就是在不需要重新渲染的情况下让shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染，性能得到也得到一些提升。
但是在 React 的新版本里面，提供了 React.PureComponent，而不需要使用这个插件。 所以说一个较大的组件决定重渲染的时候，我们可以在每一个子组件中绑定（新的）shouldComponentUpdate方法，这样可以减少子组件重新渲染的次数。
无状态组件和有状态组件有什么区别
无状态组件
无状态组件的创建形式使代码的可读性更好，而且减少了大量冗余的代码，以至于只有一个render方法。
组件不会被实例化
组件不能访问this对象，也不能访问生命周期方法
无状态组件只能访问输入的props ，同样的props渲染同样的结果，而且没有副作用。
有状态组件
React.Component创建的组件，其成员函数不会自动绑定this，如果我们没有手动绑定this，就不能获取当前组件实例对象。
React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样去声明。
补充：React.Component有三种手动绑定方法
1》constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}
2》<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定
3》<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定
如何选择哪种方式创建组件
只要有可能，尽量使用无状态组件。
如果需要state、生命周期方法等，使用class的创建组件
react在哪个生命周期做优化?
可以在shouldComponentUpdate这个方法进行优化，用来判断是否调用 render 方法重绘 dom。
因为 dom 的重绘非常消耗性能，所以可以在这个方法中去做dom的diff算法的优化，这样就可以极大的提高性能。
但对于我们中级工程师来说，一般我不会去修改shouldComponentUpdate这个方法。而是直接去使用。True/false
react组件间传值。（组件间通信方式）
（1）props传值，父组件通过props向子组件传值，子组件通过回调函数向父组件传值
（2）redux跨级通信。
（3）通过prop-types的context实现跨级通信
跨级组件间双向通信：使用 context 对象，根组件和其他所有子孙通信，
不太适合组件间通信（可以实现，不好维护）
（4）使用事件订阅实现非嵌套组件间通信，也可以实现跨级组件间通信
porps和state的区别？
props：一般用于父组件向子组件通信，在组件之间通信使用。
state：一般用于组件内部的状态维护，更新组件内部的数据状态，更新子组件的props等。
在react如何阻止冒泡事件?
阻止冒泡事件分两种情况
A、 阻止合成事件间的冒泡，用e.stopPropagation();
B、 阻止js原生事件的冒泡，用e.nativeEvent.stopPropagation();
补充：如何阻止事件冒泡、阻止默认动作？
阻止事件冒泡:
e.stopPropagation(IE9+及其他浏览器),
window.e.cancelBubble = true(IE678)
阻止默认事件:
e.preventDefault()-->IE9+及其他浏览器
window.e.returnValue = false IE678
jQuery:
阻止事件冒泡:e.stopPropagation()
阻止默认事件:epreventDefault()
同时阻止事件冒泡和默认事件: return false
对react中事件机制的理解
Reac事件是合成事件，不是原生事件。
合成事件和原生事件的区别：
（1） 写法不同：合成事件是camal命名法，原生事件是全部小写
（2） 绑定位置不同：合成事件全部委派到document上，原生事件绑定到真实dom上。所以一般是在componentDidMount中或者ref回调函数中绑定，在componentWillUnmount阶段进行解绑，防止内存泄漏。
（3） 执行顺序不同：先执行原生事件，事件冒泡至document上，再执行合成事件。
react怎么从虚拟dom中拿出真实dom？
在React中如何获取真实dom？
通过refs获得 DOM 元素或者某个组件实例。
我们可以为元素添加 ref 属性，在回调函数中接收该DOM元素，该DOM元素会作为回调函数的第一个参数返回。
或者可以给ref传字符串。通过this.refs获取dom。
例如：<input ref=((input)=>{return this.name=input}) />， this.name.value取值
或者 <input ref="name" />，this.refs.name取值。
为什么虚拟DOM可以提高性能？
当数据变化的时候，无需整体的重新渲染，而是局部刷新。虚拟DOM它是以js的形式存在，计算性能会比较好。而且由于减少对真实DOM的操作次数。性能会有很大提升。
diff算法原理 / 什么是diff算法（diff算法的理解）
对新旧两棵DOM树进行同层比较。
给每层元素添加唯一的 key 值。提高diff算法效率。
React 只会匹配相同组件名字
调用组件setState 方法的时候, React 将它标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的组件 重新渲染.这样就实现了局部刷新的效果。
react 中 keys 的作用是什么？
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。
