想自己做微信网站的工作,discuz和wordpress并发,网站开发的重要性,php做自己的网站React 组件性能优化的核心是减少渲染真实 DOM 节点的频率#xff0c;减少 Virtual DOM 比对的频率。
1. 组件卸载前进行清理操作
window 注册的全局事件, 以及定时器
useEffect((){return (){// do somethingclearTimeout(tiemr)window.removeEventListener(xxx, c…React 组件性能优化的核心是减少渲染真实 DOM 节点的频率减少 Virtual DOM 比对的频率。
1. 组件卸载前进行清理操作
window 注册的全局事件, 以及定时器
useEffect((){return (){// do somethingclearTimeout(tiemr)window.removeEventListener(xxx, calback)}
},[])2. PureComponent
什么是纯组件 纯组件会对组件输入数据进行浅层比较如果当前输入数据和上次输入数据相同组件不会重新渲染。什么是浅层比较 比较引用数据类型在内存中的引用地址是否相同比较基本数据类型的值是否相同。如何实现纯组件 类组件继承 PureComponent 类函数组件使用 memo 方法为什么不直接进行 diff 操作, 而是要先进行浅层比较浅层比较难道没有性能消耗吗? 和进行 diff 比较操作相比浅层比较将消耗更少的性能。diff 操作会重新遍历整颗 virtualDOM 树, 而浅层比较只操作当前组件的 state 和 props。
3. shouldComponentUpdate
纯组件只能进行浅层比较要进行深层比较使用 shouldComponentUpdate它用于编写自定义比较逻辑。
返回 true 重新渲染组件返回 false 阻止重新渲染。
函数的第一个参数为 nextProps, 第二个参数为 nextState. shouldComponentUpdate(nextProps, nextState) {if (this.state.name ! nextState.name || this.state.age ! nextState.age) {return true}return false}4. React.memo
为 memo 传递比较逻辑
使用 memo方法自定义比较逻辑用于执行深层比较。
比较函数的第一个参数为上一次的 props, 比较函数的第二个参数为下一次的 props, 比较函数返回 true, 不进行渲染, 比较函数返回 false, 组件重新渲染. const ShowPersonMemo memo(ShowPerson, comparePerson)function comparePerson(prevProps, nextProps) {if (prevProps.person.name ! nextProps.person.name ||prevProps.person.age ! nextProps.person.age) {return false}return true}5. 使用组件懒加载
使用组件懒加载可以减少 bundle 文件大小, 加快组件呈递速度.
路由组件懒加载 import React, { lazy, Suspense } from reactimport { BrowserRouter, Link, Route, Switch } from react-router-dom// 打包时生成对应名字的chunkconst Home lazy(() import(/* webpackChunkName: Home */ ./Home))const List lazy(() import(/* webpackChunkName: List */ ./List))function App() {return (BrowserRouterLink to/Home/LinkLink to/listList/LinkSwitch// 组件未加载完成展示loadingSuspense fallback{divLoading/div}Route path/ component{Home} exact /Route path/list component{List} //Suspense/Switch/BrowserRouter)}export default App根据条件进行组件懒加载 适用于组件不会随条件频繁切换 import React, { lazy, Suspense } from reactfunction App() {let LazyComponent nullif (true) {LazyComponent lazy(() import(/* webpackChunkName: Home */ ./Home))} else {LazyComponent lazy(() import(/* webpackChunkName: List */ ./List))}return (Suspense fallback{divLoading/div}LazyComponent //Suspense)
}export default App6. 使用 Fragment 避免额外标记
7. 不要使用内联函数定义
8. 在构造函数中进行函数this绑定
9. 类组件中的箭头函数
10. 避免使用内联样式属性
11. 优化条件渲染
12. 为组件创建错误边界
错误边界涉及到两个生命周期函数, 分别为 getDerivedStateFromError 和 componentDidCatch. – getDerivedStateFromError 为静态方法, 方法中需要返回一个对象, 该对象会和state对象进行合并, 用于更改应用程序状态.
– componentDidCatch 方法用于记录应用程序错误信息. 该方法的参数就是错误对象. ErrorBoundaries.js
import React from react
import App from ./App
export default class ErrorBoundaries extends React.Component {constructor() {super()this.state {hasError: false}}componentDidCatch(error) {console.log(componentDidCatch)}static getDerivedStateFromError() {console.log(getDerivedStateFromError)return {hasError: true}}render() {if (this.state.hasError) {return div发生了错误/div}return App /}
}App.js
import React from react
export default class App extends React.Component {render() {// throw new Error(lalala)return divApp works/div}
}index.js
import React from react
import ReactDOM from react-dom
import ErrorBoundaries from ./ErrorBoundaries
ReactDOM.render(ErrorBoundaries /, document.getElementById(root))注意: 错误边界不能捕获异步错误, 比如点击按钮时发生的错误.
13. 避免数据结构突变
14. 依赖优化
主要是对包进行优化 参考重构之路webpack打包体积优化超详细
