1. react 生命周期
- 挂载
constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。
注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。
componentWillMount() => componentDidMount() => render => componentWillUnmount () - 卸载
componentWillUnmount () - 更新
componentWillReceiveProps (nextProps) => shouldComponentUpdate(nextProps,nextState) 返回true=>componentWillUpdate (nextProps,nextState) => render => componentDidUpdate(prevProps,prevState)
2. react 性能优化
- 绑定函数时在constructor里面使用bind绑定,只会执行一次。
- React中,组件嵌套是十分常见的,在父组件往子组件传递对象时,应先声明再传递,不然每一次使用子组件时都会生成新的对象进行传递。
- 多组件优化 ( 在父组件因状态的变化更改,而子组件并没有状态变化时,若子组件随着父组件一起更新,会造成比较大的性能浪费,为减少子组件额外渲染而浪费性能,可使用:)
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前端性能优化
- 提取React、jQuery等库文件。它们很少变化,并且到处被复用,应该被提取出来,并且得到长时间的缓存。
WebPack.optimize.CommonsChunkPlugin(WebPack内建插件)。 - 代码压缩。图片转base64.
- 组件异步加载,webpack import 语法。