React基础编码规范

1. 少用语法糖，如 for in 循环
2. 禁止在JS代码中操作DOM
3. 把import Button from ‘xxx’这种写法，改写为 import {Button} from ‘xxx’ , 以利于打包
4. 原生监听事件、定时器等，必须在componentWillUnmount中清除，防止内存泄漏
5. 禁止使用setTimeout(fn,0)，因为setTimeout(fn,0)会阻塞浏览器渲染，导致页面卡顿
6. 使用PureComponent代替React.component,这样React机制会自动在shouldcomponentUpdate中进行浅比较，决定是否更新，减少渲染次数。
7. 禁止使用arguments
8. 对于有性能瓶颈的组件多结合 React.memo,immetable,js 对shouldComponentUpdate,PureComponent 进行助力调优
9. 绑定事件不要使用匿名箭头函数，例如:onclick=l(event)=>{…}应该改写为 onCick = {this.handlecick} 形式，减少函数的构建次数及内测占用
10. 使用React.Fragment，代替div包裹，减少dom层级，让DIF算法更快遍历，提升渲染性能
11. 使用React.createContext，代替window.xxx，减少全局变量污染，方便维护
12. DOM子节点的事件，优先绑定到父节点上，使用事件代理模式，避免事件内存占用随着子节点数量等比增长
13. 使用React.memo包裹的组件，如果其props没有变化，则不会重新渲染，从而避免不必要的渲染，提升性能
14. 多利用React的key属性进行优化，减少渲染dom次数，避免错误用法-:用index做key、错误用法二:用index拼接其他的字段、正确用法:用唯-id作为key
15. 使用React.lazy、React.Suspense进行路由懒加载，避免首屏加载慢，提升用户体验
16. HTML 通过 html-webpack-plugin 插件配置 minify 开启压缩
17. JS 通过 terser-webpack-plugin 插件配置 开启压缩
18. css 通过 mini-cs-extract-plugin 插件提取为独立css文件，不要使用内嵌style样式，通过optimize-css-assets-webpack-plugin 插件配置 开启压缩
19. 图片在渲染前指定大小，img 元素是内联元素，在加载图片后会改变宽高，会导致整个页面重排，验证影响渲染性能，所以最好在渲染前就指定其大小，或者让其脱离文档流
20. 对于脚本与DOM/其它脚本的依赖关系很强:script引入 设置defer属性(即脚本会立即下载，但会延迟到页面DOM渲染后再执行，执行有序)(例如:事件类、垫片类、DOM类)
21. 对于脚本与DOM/其它脚本的依赖关系不强:script引入 设置async属性(即当前脚本不必等待其他脚本，也不会阻塞文档呈现，执行无序)(例如:采集类、帮助类、聊天类)
22. JS防抖操作，对指定时间内执行的连续事件，应只执行最先的一次
23. JS节流操作，对指定时间内执行的连续事件，应只执行最后的一次
24. 避免出现超过三层嵌套的CSS规则，尽量保证css选择器层级扁平
25. 使用ID选择器后就不要添加多余类选择器
26. 不要使用标签选择器，而是用类选择器代替
27. 避免滥用float模式、避免声明过多font-size
28. 将元素设为不可见:visibility: hidden，这样可以减小重绘的压力，必要的时候再将元素显示。
29. 控制DOM节点的嵌套深度，能少一层就少一层。
30. 切换样式要提前定义好class，通过class的切换批量修改样式，避免多次重绘重排。
31. React下直接DOM操作能避免则避免，避免不了也要将多次的append的DOM操作可以先插入到一个新生成的元素中，再一次性插入到页面中，减少页面重绘重排
32. 能不定义全局变量就不定义全局变量，使用局部变量代替全局变量，减少内存占用，提高查找速度。
33. includes、indexOf等API入参中不允许传入未计算好的变量、计算函数、需要转大小写但未提前转好在入参中通过toLowercase等API转换等参数，需要提前将需要的内容计算好传入参数中