react前端面试汇总

1. react 生命周期

1. 挂载
   constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
   注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。
   componentWillMount() => componentDidMount() => render => componentWillUnmount ()
2. 卸载
   componentWillUnmount ()
3. 更新
   componentWillReceiveProps (nextProps) => shouldComponentUpdate(nextProps,nextState) 返回true=>componentWillUpdate (nextProps,nextState) => render => componentDidUpdate(prevProps,prevState)

2. react 性能优化

1. 绑定函数时在constructor里面使用bind绑定，只会执行一次。
2. React中，组件嵌套是十分常见的，在父组件往子组件传递对象时，应先声明再传递，不然每一次使用子组件时都会生成新的对象进行传递。
3. 多组件优化 （ 在父组件因状态的变化更改，而子组件并没有状态变化时，若子组件随着父组件一起更新，会造成比较大的性能浪费，为减少子组件额外渲染而浪费性能，可使用：）
   shouldComponentUpdate(nextProps, nextState)，进行数据比较。
   React.PureComponent 替换 React.Component适用于单层数据结构。

3. redux

1.Redux 数据流的流程
组件或actionCreators派发action，交给reducer处理，改变state。
2.Redux 中异步的请求怎么处理.
使用中间件redux-thunk 或者redux-saga。

4. react-router

1.react-router 还是 react-router-dom？
react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。
2. react-router实现原理
监听浏览器的hashchange事件和h5的state改变事件popstate。

5. webpack前端性能优化

1. 提取React、jQuery等库文件。它们很少变化，并且到处被复用，应该被提取出来，并且得到长时间的缓存。
   WebPack.optimize.CommonsChunkPlugin（WebPack内建插件）。
2. 代码压缩。图片转base64.
3. 组件异步加载,webpack import 语法。