广西网站开发,百度一下 你就知道官方,微信网站开发软件,wordpress 去掉顶部工具栏1. 是什么
React凭借virtual DOM和diff算法拥有高效的性能#xff0c;但是某些情况下#xff0c;性能明显可以进一步提高 在前面文章中#xff0c;我们了解到类组件通过调用setState方法#xff0c;就会导致render ,父组件一旦发生render渲染#xff0c;子组件一定也会执…1. 是什么
React凭借virtual DOM和diff算法拥有高效的性能但是某些情况下性能明显可以进一步提高 在前面文章中我们了解到类组件通过调用setState方法就会导致render ,父组件一旦发生render渲染子组件一定也会执行render渲染
2. 如何做
在React中如何避免不必要的render中我们了解到如何避免不必要的render来应付上面的问题主要手段是通过shouldComponentUpdate、PureComponent 、React.memo ,这三种形式这里就不再复述 除此之外常见性能优化常见的手段有如下
避免使用内联函数使用React Fragments避免额外标记使用Immutable懒加载组件事件绑定方式服务端渲染
2.1 避免使用内联函数
如果我们使用内联函数则每次调用render函数时都会创建一个新的函数实例如下
import React from react;
export default class InlineFunctionComponent extends React.Component {render() {return ( div h1Welcome RUI /h1 input typebutton onClick{(e) { this.setState({inputValue: e.target.value}) }} valueClick For Inline Function //div ) }
}我们应该在组件内部创建一个函数并将事件绑定到该函数本身。这样每次调用render时就不会创建单独的函数实例如下
import React from react;
export default class InlineFunctionComponent extends React.Component {setNewStateData (event) {this.setState({inputValue: e.target.value}) }render() {return ( div h1Welcome Guest/h1 input typebutton onClick{this.setNewStateData} valueClick For Inline Function //div ) }
}2.2 使用React Fragments避免额外标记
用户创建新组件时每个组件应具有单个父标签。父级不能有两个标签所以顶部要有一个公共标签所以我们经常在组件顶部添加额外标签div 这个额外标签除了充当父标签之外并没有其他作用这时候则可以使用fragement 其不会向组件引入任何额外标记但它可以作为父级标签的作用
2.3 事件绑定方式
在事件绑定方式中我们了解到四种事假绑定的方式 从性能方面考虑在render方法中使用bind和render方法中使用箭头函数这两种形式在每次组件render的时候都会生成新的方法实例性能欠缺 而constructor中bind事件与定义阶段使用箭头函数绑定这两种形式只会生成一个方法实例性能方面会有所改善
2.4 使用Immutable
我们了解到使用Immutable可以给React应用带来性能的优化主要体现在减少渲染的次数在做react性能优化的时候为了避免重复渲染我们会在shouldComponentUpdate()中做对比当返回true执行render方法Immutable通过is方法则可以完成对比而无需像一样通过深度比较的方式比较
2.5 懒加载组件
从工程方面考虑webpack存在代码拆分能力可以为应用创建多个包并在运行时动态加载减少初始包的大小 而在react中使用到了Suspense和lazy组件实现代码拆分功能基本使用如下
const johanComponent React.lazy(() import(/* webpackChunkName: johanC
omponent */ ./myAwesome.component));
export const johanAsyncComponent props ( React.Suspense fallback{Spinner /} johanComponent {...props} //React.Suspense
);2.6 服务端渲染
采用服务端渲染端方式可以使用户更快的看到渲染完成的页面 服务端渲染需要起一个node服务可以使用express、koa等调用react的renderToString方法将根组件渲染成字符串再输出到响应中
2.7 其他
除此之外还存在的优化手段有组件拆分、合理使用hooks等性能优化手段…
3. 总结
通过上面初步学习我们了解到react常见的性能优化可以分成三个层面
代码层面工程层面框架机制层面
通过这三个层面的优化结合能够使基于react项目的性能更上一层楼
