React組件性能提升實(shí)現(xiàn)方法詳解
react組件的性能優(yōu)化的核心是減少渲染真實(shí)DOM節(jié)點(diǎn)的頻率，減少Virtual DOM比對的頻率。
組件卸載前執(zhí)行清理操作
在組件中為window 注冊的全局事件，以及定時(shí)器，在組件卸載前要清理掉。防止組件卸載后繼續(xù)執(zhí)行影響應(yīng)用性能。
import React from 'react'
import { useEffect } from 'react'
import { observer } from 'mobx-react-lite'
function TestAdvance () {
useEffect(() => {
let timer = setInterval(() => {
console.log('定時(shí)器被觸發(fā)了')
}, 1000)
// 返回一個(gè)卸載時(shí)會被觸發(fā)的函數(shù)來對timer進(jìn)行清理
return () => clearInterval(timer)
}, [])
return <div>Test</div>
}
export default observer(TestAdvance)通過純組件提升組件性能(類組件)
什么是純組件（PureComponent）
純組件會對組件輸入的數(shù)據(jù)進(jìn)行淺層比較，如果當(dāng)前輸入數(shù)據(jù)和上次輸入數(shù)據(jù)相同，組件不會重新渲染。
什么是淺層比較
- 比較引用數(shù)據(jù)類型在內(nèi)存中的引用地址是否相同；
- 比較基本數(shù)據(jù)類型的值是否相同。
如何實(shí)現(xiàn)純組件
- 類組件集成 PureComponent 類
- 函數(shù)組件使用 memo 方法
import React from 'react'
class App extends React.Component {
constructor () {
super()
this.state = {
person: { name: '張三', age: 20, job: 'waiter' }
}
}
updateName () {
setInterval(() => {
this.setState({ person: { ...this.state.person, name: '張三' } })
}, 3000)
}
componentDidMount () {
console.log('componentDidMount')
this.updateName()
}
render () {
return (
<div>
<RegularComponent name={this.state.person.name} />
<PureComponent name={this.state.person.name} />
</div>
)
}
}
class RegularComponent extends React.Component {
render () {
console.log('RegularComponent')
return <div>{this.props.name}</div>
}
}
class PureComponent extends React.PureComponent {
render () {
console.log('PureComponent')
return <div>{this.props.name}</div>
}
}
export default App淺層比較和深度diff的性能對比，為什么需要先進(jìn)行淺層比較，而不直接進(jìn)行diff比較呢。
和進(jìn)行diff 比較相比，淺層比較將消耗更少的性能。diff 操作會重新遍歷整棵 Virtual DOM樹，而淺層比較只操作當(dāng)前組件的 state 和 props。
可以看到PureComponent 當(dāng)狀態(tài)值沒有改變時(shí)是不會被重新渲染的。
通過shouldComponentUpdate生命周期函數(shù)提升組件性能
shouldComponentUpdate是類組件當(dāng)中的一個(gè)生命周期函數(shù)，它允許我們在這個(gè)方法當(dāng)中通過返回true 或者 false，來決定是否要重新渲染組件。
純組件只能進(jìn)行淺層比較，要進(jìn)行深層比較的話，需要使用到shouldComponentUpdate，它用于編寫自定義比較邏輯。
函數(shù)的第一個(gè)參數(shù)時(shí)nextProps, 第二個(gè)參數(shù)是nextState。
在內(nèi)存中當(dāng)中有兩個(gè)對象，即使這兩個(gè)對象的長得一摸一樣，實(shí)際上它們有不同的引用地址，這個(gè)時(shí)候再怎么比較他們都不相同。
在我們的自定義邏輯中，如果返回true，則需要重新渲染組件；如果返回false，則不需要重現(xiàn)渲染組件了。
import React from 'react'
class App extends React.Component {
constructor () {
super()
this.state = {
person: { name: '張三', age: 20, job: 'waiter' }
}
}
updateName () {
setInterval(() => {
this.setState({ person: { ...this.state.person, job: 'Writer' } })
}, 3000)
}
componentDidMount () {
console.log('componentDidMount')
this.updateName()
}
/* shouldComponentUpdate (nextProps, nextState) {
if (
nextState.person.age !== this.state.person.age ||
nextState.person.name !== this.state.person.name
) {
return true
} else {
return false
}
} */
render () {
return (
<div>
<RegularComponent name={this.state.person.name} />
<PureComponent name={this.state.person.name} />
</div>
)
}
}
class RegularComponent extends React.Component {
render () {
console.log('RegularComponent')
return <div>{this.props.name}</div>
}
shouldComponentUpdate (nextProps, nextState) {
console.log(this.props, nextProps)
if (nextProps.name !== this.props.name) {
return true
} else {
return false
}
}
}
class PureComponent extends React.PureComponent {
render () {
console.log('PureComponent')
return <div>{this.props.name}</div>
}
}
export default App函數(shù)組件使用memo 減少渲染次數(shù)
memo的基本使用
將函數(shù)組件變?yōu)榧兘M件，將當(dāng)前props和上一次的props進(jìn)行淺層比較，如果相同就阻止組件重新渲染。
// 未使用memo方法包裹組件
import React, { useEffect, useState } from 'react'
function App () {
const [name] = useState('張三')
const [index, setIndex] = useState(0)
useEffect(() => {
let timer = setInterval(() => {
setIndex(prev => prev + 1)
}, 1000)
return () => {
clearInterval(timer)
}
}, [index])
return (
<div>
{index}
<ShowName name={name} />
</div>
)
}
function ShowName ({ name }) {
console.log('render...')
return <div>{name}</div>
}
export default App
使用memo封裝子組件，讓子組件減少不必要的渲染。
// 使用memo封裝子組件
import React, { memo, useEffect, useState } from 'react'
function App () {
const [name] = useState('張三')
const [index, setIndex] = useState(0)
useEffect(() => {
let timer = setInterval(() => {
setIndex(prev => prev + 1)
}, 1000)
return () => {
clearInterval(timer)
}
}, [index])
return (
<div>
{index}
<ShowName name={name} />
</div>
)
}
const ShowName = memo(function ({ name }) {
console.log('render...')
return <div>{name}</div>
})
export default App
可以看到僅初次渲染時(shí)，渲染了一次。
為memo 方法傳遞自定義比較邏輯
在memo方法內(nèi)部，其實(shí)也是進(jìn)行的淺層比較。這個(gè)淺層比較對于引用數(shù)據(jù)類型來說，比較的是數(shù)據(jù)的引用地址。所以如果遇到引用數(shù)據(jù)類型的話，我們需要去傳遞自定義比較邏輯。
memo方法是可以接收第二個(gè)參數(shù)的，第二個(gè)參數(shù)是一個(gè)函數(shù)，我們可以通過這個(gè)函數(shù)參數(shù)來編寫我們自定義比較邏輯。該函數(shù)參數(shù)接收兩個(gè)參數(shù)，分別是prevProps和nextProps。
與shouldComponentUpdate的返回值邏輯相反，返回true，則不重新渲染；返回false的話則需要重新渲染。如果想讓這個(gè)組件重新渲染的話就返回false，否則返回true。
// 給memo傳遞第二個(gè)參數(shù)，自定義比較邏輯
import React, { memo, useEffect, useState } from 'react'
function App () {
const [person, setPerson] = useState({ name: '張三', age: 20, job: 'waiter' })
const [index, setIndex] = useState(0)
useEffect(() => {
let timer = setInterval(() => {
setIndex(prev => prev + 1)
setPerson({ ...person, job: 'chef' })
}, 1000)
return () => {
clearInterval(timer)
}
}, [index, person])
return (
<div>
{index}
<ShowName person={person} />
</div>
)
}
function compare (prevProps, nextProps) {
if (
prevProps.person.name !== nextProps.person.name ||
prevProps.person.age !== nextProps.person.age
) {
return false
}
return true
}
const ShowName = memo(function ({ person }) {
console.log('render...')
return (
<div>
{person.name} {person.age}
</div>
)
}, compare)
export default App
通過組件懶加載提供應(yīng)用性能
使用組件懶加載，可以減少bundle 文件大小，加快組件呈遞速度。
路由組件懶加載
import React, { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
// import Home from './pages/Home'
// import List from './pages/List'
// import NotFound from './pages/NotFound'
const Home = lazy(() => import(/* webpackChunkName: "Home" */ './pages/Home'))
const List = lazy(() => import(/* webpackChunkName: "List" */ './pages/List'))
const NotFound = lazy(() => import('./pages/NotFound'))
function App () {
return (
<BrowserRouter>
<Link to='/'>首頁 </Link>
<Link to='/list'>列表頁</Link>
<Suspense fallback={<div>loading...</div>}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/list' element={<List />} errorElement={<NotFound />} />
</Routes>
</Suspense>
</BrowserRouter>
)
}
export default App
可以看到，List頁面chunk 只有在頁面被加載渲染時(shí)才被被請求下載。
根據(jù)條件進(jìn)行組件懶加載
適用于組件不會隨條件頻繁切換。
import React, { lazy } from 'react'
import { Suspense } from 'react'
function Test () {
let LazyComponent = null
if (false) {
LazyComponent = lazy(() =>
import(/* webpackChunkName: "Home-Test" */ './Home')
)
} else {
LazyComponent = lazy(() =>
import(/* webpackChunkName: "List-Test" */ './List')
)
}
return (
<Suspense fallback={<div>Test loading...</div>}>
<LazyComponent />
</Suspense>
)
}
export default Test通過使用占位符標(biāo)記提升React組件的渲染性能
使用Fragment 避免額外標(biāo)記
React組件中返回的jsx 如果有多個(gè)同級元素，多個(gè)同級元素必須要有一個(gè)共同的父級。
<div> ... </div> // 上面會多出一個(gè)無意義標(biāo)記 // 應(yīng)該改為 <fragment> ... </fragment> // 或者寫成下面這樣也是可以的 <> ... </>
為了滿足上面的條件，我們通常都會在最外層添加一個(gè)div，但是這樣的話就會多出一個(gè)無意義的標(biāo)記。如果每個(gè)組件都多出這樣的一個(gè)無意義標(biāo)記的話，瀏覽器渲染引擎的負(fù)擔(dān)就會加劇。
為了解決這個(gè)問題，react推出了fragment占位符標(biāo)記。使用占位符標(biāo)記，既滿足了擁有共同的父級的要求，又不會多出額外的無意義標(biāo)記。
另外，fragment標(biāo)記對也可以簡寫成 ：<></>
通過避免使用內(nèi)聯(lián)函數(shù)提升組件性能
因?yàn)樵谑褂脙?nèi)聯(lián)函數(shù)后，render 方法每次進(jìn)行時(shí)都會創(chuàng)建該函數(shù)的新實(shí)例，導(dǎo)致 React 在進(jìn)行Virtual DOM比對時(shí)，新舊函數(shù)比對不相等，導(dǎo)致總是為元素綁定新的函數(shù)實(shí)例，而舊的函數(shù)實(shí)例又要交給垃圾回收器處理。
正確的做法是：在組件中單獨(dú)定義函數(shù)，將函數(shù)綁定給事件。
render(){return(<input onChange={e => this.setState({inputValue: e.target.value})} />)}
// 在類組件中，應(yīng)該采用下面的方式來改寫從而避免該元素被重新渲染
setInputvalue = e => {
this.setState({inputValue: e.target.value})
}
render(){
return (<input onChange={this.setInputValue} />)
}這樣一來，無論render方法被重新執(zhí)行多少次，類的屬性是不會發(fā)生變化的，所以在這個(gè)地方即使render方法被重新執(zhí)行n次，那它每次都不會產(chǎn)生新的函數(shù)實(shí)例，所以它每次不會給onChange去添加新的函數(shù)。
在構(gòu)造函數(shù)中進(jìn)行this指向的更正
在類組件中如果使用fn(){}這種方式定義函數(shù)，函數(shù)this默認(rèn)指向 undefined 。也就是說函數(shù)內(nèi)部的 this 指向需要被更正。
可以在構(gòu)造函數(shù)中對函數(shù)的this 進(jìn)行更正，也可以在行內(nèi)進(jìn)行更正。兩者看起來沒有太大的區(qū)別，但是對性能的影響是不同的。
對于行內(nèi)更正來說，每一次render方法在執(zhí)行的時(shí)候它都會調(diào)用bind方法生成新的函數(shù)實(shí)例，也就是上邊提到的內(nèi)聯(lián)函數(shù)對性能的影響是一樣的。
因此比較推薦的是在構(gòu)造函數(shù)當(dāng)中去更正this的指向。因?yàn)闃?gòu)造函數(shù)只執(zhí)行一次，也就是函數(shù)的this 指向只更正一次，效率較高。
import React, { Component } from 'react'
export default class index extends Component {
constructor () {
super()
// 方法一：（推薦使用）
// 構(gòu)造函數(shù)只執(zhí)行一次，所以函數(shù)this 指向更正的代碼也只執(zhí)行一次。
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log(this)
}
handleClick2= () {
console.log(this)
}
render () {
// 方式二：跟內(nèi)聯(lián)函數(shù)類似，不推薦，應(yīng)避免使用
// 問題：render 放啊每次執(zhí)行時(shí)都會調(diào)用bind方法生成新的函數(shù)實(shí)例。
return <button onClick={this.handleClick.bind(this)}>按鈕</button>
}
}類組件中的箭頭函數(shù)
在類組件中使用箭頭函數(shù)不會存在this 指向問題。因?yàn)榧^函數(shù)本身并不綁定this.
handleClick2= ()=> console.log(this)
箭頭函數(shù)在this 指向問題上是比較占優(yōu)勢的，但是同時(shí)也有不利的一面。
當(dāng)使用箭頭函數(shù)時(shí)，該函數(shù)被添加為類的實(shí)例對象屬性，而不是原型對象屬性。如果組件被多次重用，每個(gè)組件實(shí)例對象中都會有一個(gè)相同的函數(shù)實(shí)例，降低了函數(shù)實(shí)例的可重用性，造成了資源浪費(fèi)。
綜上所述， 更正函數(shù)內(nèi)部this 指向的最佳做法是： 在構(gòu)造函數(shù)中使用 bind 方法進(jìn)行綁定。 10. 避免使用內(nèi)聯(lián)樣式屬性以提升組件性能
當(dāng)使用內(nèi)聯(lián)style 為元素添加樣式時(shí)，內(nèi)聯(lián)style 會被編譯成 JavaScript 代碼，通過JavaScript代碼將樣式規(guī)則映射到元素的身上，瀏覽器就會花費(fèi)更多的時(shí)間執(zhí)行腳本和渲染UI，從而增加了組件的渲染時(shí)間。
// 例如：這段代碼的樣式會涉及到腳本的執(zhí)行，效率低，資源開銷大
<div style={{background: 'red'}}>Style in line</div>// 例如：這段代碼的樣式會涉及到腳本的執(zhí)行，效率低，資源開銷大
<div style={{background: 'red'}}>Style in line</div>更好的辦法是：
將CSS 文件導(dǎo)入樣式組件，能通過CSS直接做的事情就不要通過JavaScript去做。因?yàn)镴avaScript操作DOM非常慢。而CSS默認(rèn)開啟了GPU的渲染加速，更加高效。
優(yōu)化條件渲染以提升組件性能
頻繁的掛載和卸載組件，是一項(xiàng)耗性能的操作。為了確保應(yīng)用程序的性能，應(yīng)該減少組件掛載和卸載的次數(shù)。
在react中，我們經(jīng)常會根據(jù)條件渲染不同的組件，條件渲染是一項(xiàng)必做的優(yōu)化操作。
import React from 'react'
import Home from './Home'
import List from './List'
import Test from './Test'
function App () {
if (true) {
return (
<>
<Test />
<Home />
<List />
</>
)
} else {
return (
<>
<Home />
<List />
</>
)
}
}
export default App在上面的代碼中，顯然這種大范圍的條件渲染不太合理，存在優(yōu)化的空間，整個(gè)頁面隨著判斷條件改變而變化的部分只有Test 組件，因此，可以僅對Test組件進(jìn)行條件渲染判斷，從而減少不必要的組件卸載和掛載的次數(shù)。
import React from 'react'
import Home from './Home'
import List from './List'
import Test from './Test'
function App () {
return (
<>
{true && <Test />}
<Home />
<List />
</>
)
}
export default App避免重復(fù)的無限渲染
當(dāng)應(yīng)用程序狀態(tài)發(fā)生更改時(shí)，react 就會調(diào)用render 方法，如果在render 方法中繼續(xù)更改應(yīng)用程序狀態(tài)，就會發(fā)生render 方法遞歸調(diào)用導(dǎo)致應(yīng)用報(bào)錯。
import React, { Component } from 'react'
export default class index extends Component {
constructor () {
super()
this.state = { name: '張三' }
// 方法一：（推薦使用）
// 構(gòu)造函數(shù)只執(zhí)行一次，所以函數(shù)this 指向更正的代碼也只執(zhí)行一次。
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log(this)
}
render () {
this.setState({ name: '李四' })
// 方式二：跟內(nèi)聯(lián)函數(shù)類似，不推薦，應(yīng)避免使用
// 問題：render 放啊每次執(zhí)行時(shí)都會調(diào)用bind方法生成新的函數(shù)實(shí)例。
return <button onClick={this.handleClick.bind(this)}>按鈕</button>
}
}
與其他生命周期函數(shù)不同，render方法應(yīng)該被作為純函數(shù)。
這意味著，在render方法中不要做以下的事情：
- 不要調(diào)用setState方法；
- 不要使用其他手段查詢更改原生DOM元素；
- 以及不要做其他更改應(yīng)用程序的任何操作。
render 方法對的執(zhí)行要根據(jù)狀態(tài)的改變，這樣可以保持組件的行為和渲染方式一致。
所以，在react當(dāng)中，不要在render方法當(dāng)中，不要在componentWillUpdate這個(gè)生命周期函數(shù)當(dāng)中，不要在componentDidUpdated這個(gè)生命周期函數(shù)當(dāng)中繼續(xù)調(diào)用setState方法去更新狀態(tài)。否則將導(dǎo)致重復(fù)的無限渲染，應(yīng)用程序崩潰。
為應(yīng)用程序創(chuàng)建錯誤邊界
默認(rèn)情況下，組件渲染錯誤會導(dǎo)致整個(gè)應(yīng)用程序的中斷，創(chuàng)建錯誤邊界可確保在特定組件發(fā)生錯誤時(shí)應(yīng)用程序不會中斷。從而增加應(yīng)用程序的健壯性（魯棒性）。
錯誤邊界是一個(gè)React組件，可以捕獲子級組件在渲染時(shí)發(fā)生的錯誤，當(dāng)錯誤發(fā)生時(shí)，可以將錯誤記錄下來，可以顯示備用UI界面。
錯誤邊界涉及兩個(gè)生命周期函數(shù)，分別為：getDerivedStateFromError 和 componentDidCatch.
getDerivedStateFromError: 是一個(gè)靜態(tài)方法，方法中返回一個(gè)對象，該對象會和state 對象進(jìn)行合并，用于更改應(yīng)用程序的狀態(tài)，從而給我們提供顯示備用UI界面的機(jī)會。
componentDidCatch：該方法用于記錄應(yīng)用程序的錯誤信息，該方法的參數(shù)就是錯誤對象。
import React, { Component } from 'react'
import ErrorTrigger from '../components/ErrorTrigger'
export default class ErrorBoundaries extends Component {
constructor () {
super()
this.state = {
hasError: false
}
}
componentDidCatch (error) {
// 可以將程序錯誤信息記錄到遠(yuǎn)端服務(wù)器
console.log('componentDidCatch')
}
static getDerivedStateFromError () {
console.log('getDerivedStateFromError')
return {
// 該返回對象會和state 對象進(jìn)行合并
hasError: true
}
}
render () {
if (this.state.hasError) {
return <>我是備用UI界面</>
}
return (
<>
<ErrorTrigger />
</>
)
}
}import React, { Component } from 'react'
export class ErrorTrigger extends Component {
render () {
throw new Error('錯誤邊界內(nèi)發(fā)生錯誤了')
return <div>ErrorTrigger</div>
}
}
export default ErrorTrigger注意??：錯誤邊界不能捕獲異步錯誤，例如點(diǎn)擊按鈕時(shí)發(fā)生的錯誤。
避免數(shù)據(jù)結(jié)構(gòu)突變
組件中的props和state 的數(shù)據(jù)結(jié)構(gòu)應(yīng)該保持一致，數(shù)據(jù)結(jié)構(gòu)突變會導(dǎo)致輸出不一致。
import React, { Component } from 'react'
export default class App extends Component {
constructor () {
super()
this.state = {
person: {
name: '張三',
age: 20,
job: 'waiter'
}
}
}
render () {
const { name, age, job } = this.state.person
return (
<>
<p>
{name} {age} {job}
</p>
<button
onClick={() =>
this.setState({
...this.state,
person: {
age: 30
}
})
}
>
更新信息
</button>
</>
)
}
}
點(diǎn)擊更新信息按鈕前
點(diǎn)擊更新信息按鈕后
這是因?yàn)閿?shù)據(jù)狀態(tài)在發(fā)生更改時(shí)，發(fā)生了數(shù)據(jù)結(jié)構(gòu)突變導(dǎo)致的數(shù)據(jù)丟失。
使用setState更改狀態(tài)代碼應(yīng)該修改為：
this.setState({
...this.state,
// 這里的person 數(shù)據(jù)結(jié)構(gòu)應(yīng)該和原來的保持一致，避免數(shù)據(jù)丟失
// person: {
// age: 30
// }
person: {
...this.state.person,
age: 30
}
})
修改更新數(shù)據(jù)保持結(jié)構(gòu)一致的代碼后點(diǎn)擊更新信息按鈕后的顯示
優(yōu)化依賴項(xiàng)大小
在程序應(yīng)用開發(fā)中，常常會依賴第三方包，但我們不想引用包中所有的代碼，我們只想用到哪些代碼就包含哪些代碼。
此時(shí)，可以使用插件對依賴項(xiàng)進(jìn)行優(yōu)化，優(yōu)化資源。
拿lodash舉例：
應(yīng)用基于create-react-app 腳手架創(chuàng)建：
下載依賴
npm install react-app-rewired customize-cra lodash babel-plugin-lodash
react-app-rewired: 覆蓋create-react-app的默認(rèn)配置
module.exports = function(oldConfig){
return newConfig
}
// 參數(shù)中的oldConfig 就是默認(rèn)的webpack configcustomize-cra: 導(dǎo)出了一些輔助方法，可以讓以上寫法更加簡潔。
const {override, useBabelRc} from 'customize-cra'
module.exports = override(
(oldConfig) => newConfig,
(oldConfig) => newConfig
)
// override 可以接收多個(gè)參數(shù)，每個(gè)參數(shù)都是一個(gè)配置函數(shù)，函數(shù)接收oldConfig，返回 newConfig
// useBabelRc 允許使用 .babelrc 文件進(jìn)行 babel 配置babel-plugin-lodash: 對應(yīng)用中的lodash 進(jìn)行精簡
在項(xiàng)目根目錄下新建 config-overrides.js 并加入配置代碼
const {override, useBabelRc} from 'customize-cra'
module.exports = override(useBabelRc())
// 這里使用 .babelrc 文件進(jìn)行 babel 配置修改package.json 中的文件構(gòu)建命令
把原來命令中的 react-scripts 改為 react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},創(chuàng)建 .babelrc 文件并加入配置
{
"plugins":["lodash"]
}
命令打包生成的生產(chǎn)環(huán)境下的三種js文件
main.[hash].chunk.js 主應(yīng)用程序代碼，App.js 等
1.[hash].chunk.js 第三方依賴包的代碼，包含在node_modules中導(dǎo)入的模塊
runtime~main.[hash].js webpack的運(yùn)行時(shí)代碼
優(yōu)化前后結(jié)果比對：
到此這篇關(guān)于React組件性能提升實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)React組件性能優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react koa rematch 如何打造一套服務(wù)端渲染架子
這篇文章主要介紹了react koa rematch 如何打造一套服務(wù)端渲染架子，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個(gè)自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個(gè) Hook,以下是一個(gè)完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下2024-12-12
React開發(fā)進(jìn)階redux saga使用原理詳解
這篇文章主要為大家介紹了React開發(fā)進(jìn)階redux saga使用原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會重新渲染。換句話說，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2022-10-10
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
React-redux?中useSelector使用源碼分析
在一個(gè) action 被分發(fā)(dispatch) 后，useSelector() 默認(rèn)對 select 函數(shù)的返回值進(jìn)行引用比較 ===，并且僅在返回值改變時(shí)觸發(fā)重渲染，，這篇文章主要介紹了React-redux?中useSelector使用,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了react中使用antd及immutable示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2024-01-01