react 组件编码规范

1. 把import Button from ‘xxx’ 的引入方式，变成import {Button} from ‘xxx’ 的方式引入，以利于按需打包。
2. 原生监听事件、定时器等，必须在componentWillUnmount中清除，大型项目会发生内存泄露，极度影响性能。
3. 使用PureComponent代替React.component，这样React机制会自动在shouldComponentUpdate中进行浅比较，决定是否更新，减少渲染次数。
4. 对于有性能瓶颈的组件多结合 React.memo ,immetable.js 对shouldComponentUpdate ,PureComponent 进行助力调优。
5. React的JSX语法要求必须包裹一层根标签，为了减少不必要的DOM层级，我们使用Fragment标签代替，这样渲染时候不会渲染多余的DOM节点，让DIFF算法更快遍历，减少渲染性能损耗。
6. 绑定事件不要使用匿名箭头函数，例如：onClick={(event)=>{…}} 应该改写为 onClick = {this.handleClick} 形式，减少函数的构建次数及内测占用。
7. DOM子节点的事件，优先绑定到父节点上，使用事件代理模式，避免事件内存占用随着子节点数量等比增长。
8. 多利用React的key属性进行优化，减少渲染dom次数，避免错误用法一：用index做key、错误用法
9. 用index拼接其他的字段、正确用法：用唯一id作为key。
10. html 通过 html-webpack-plugin 插件配置 minify 开启压缩。
11. JS 通过 terser-webpack-plugin 插件配置 开启压缩。
12. CSS 通过 mini-css-extract-plugin 插件提取为独立css文件，不要使用内嵌style样式，通过optimize-css-assets-webpack-plugin 插件配置 开启压缩。
13. 图片在渲染前指定大小， img 元素是内联元素，在加载图片后会改变宽高，会导致整个页面重排，验证影响渲染性能，所以最好在渲染前就指定其大小，或者让其脱离文档流。
14. 对于脚本与DOM/其它脚本的依赖关系很强：