react性能优化二

react性能优化二

使用React Fragments 避免额外标记

• 将没有意义和无用的
  标签嵌套变为<></>

不使用内联函数定义

• 内联函数需要做额外的垃圾回收和绑定到DOM的新函数的工作

避免使用内联样式

• 使用内联样式是浏览器需要花更多的时间来处理脚本和渲染，因此它必须映射传递给实际css属性的所有样式规则
• 添加的内联样式是javaScript对象，不是css样式，需要额外的处理javaScript对象。

使用条件渲染

• 我们可能根据用户角色来渲染或不渲染特定元素，这时可以用条件渲染。

不在render方法中导出数据

• 应该将render作为纯函数。
• render 函数应保持纯净，以确保组件以一致的方式运行和渲染。

事件的防抖和节流

使用css动画代替javaScript动画