快捷導(dǎo)航

關(guān)于react中列表渲染的局部刷新問(wèn)題

更新時(shí)間：2022年08月04日 14:34:10 作者：ConanZzz_

這篇文章主要介紹了關(guān)于react中列表渲染的局部刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react中列表渲染的局部刷新

最近在寫(xiě)demo的時(shí)候遇到一個(gè)更新列表中某個(gè)的對(duì)象的某個(gè)值，最期待的結(jié)果肯定是局部刷新，但是我們往往在改變值之后會(huì)遇到全局都刷新的問(wèn)題，以下為個(gè)人實(shí)驗(yàn)出來(lái)的一個(gè)小技巧。

首先我有以下數(shù)據(jù)需要通過(guò)react的列表方法渲染：

let list=[
? ? {
? ? ? ? id:1,
? ? ? ? show:false
? ? },
? ? {
? ? ? ? id:2,
? ? ? ? show:false
? ? },
? ? {
? ? ? ? id:3,
? ? ? ? show:false
? ? }
]

我們通過(guò)以下react方法進(jìn)行渲染：

render(){
? ? return (
? ? ? ? {list.map((val)=>{
? ? ? ? ? ? <DemoComponent val={val}/>
? ? ? ? })}
? ? )
}

在這里我們需要重新寫(xiě)一個(gè)DemoComponent的組件：

import React,{Component} from 'react';
export class DemoComponent extends Component{
? ? render(){
? ? ? ? <div>
? ? ? ? ? <div>this.props.val.id</div>
? ? ? ? ? <button onClick={()=>this.toggleDialog()}>toggle</button> ?
? ? ? ? </div>
? ? }
? ? toggleDialog(){
? ? ? ? // 更改val.showDialog相關(guān)操作。
? ? }
? ? shouldComponentUpdate(nextProps){
? ? ? ? return JSON.stringify(nextProps) !== JSON.stringify(this.props);
? ? }
}

當(dāng)我們點(diǎn)擊第一個(gè)button，這個(gè)時(shí)候就能達(dá)到局部刷新，只刷新第一個(gè)DemoComponent組件的效果了。

但以上操作是什么原理呢？

首先，大家平時(shí)都推薦使用的PureComponent不能在這里使用,因?yàn)檫@個(gè)組件沒(méi)有shouldComponentUpdate這個(gè)鉤子函數(shù)，雖然PureComponent也有對(duì)比props和nextProps并自行判斷當(dāng)前組件是否需要重新渲染的功能，但是這個(gè)對(duì)比對(duì)對(duì)象是沒(méi)有用的，因?yàn)閧} === {}是返回false的（對(duì)這個(gè)知識(shí)點(diǎn)不理解的朋友可以去看看堆棧相關(guān)的知識(shí)），數(shù)組同理。

那么為了讓其他列表組件沒(méi)有必要多去render一次，所以我在shouldComponentUpdate中取了個(gè)巧，直接JSON.stringify，將兩個(gè)對(duì)象轉(zhuǎn)換成字符串進(jìn)行比較，這樣就方便的多。

當(dāng)然這里也是自己為了不去寫(xiě)一個(gè)isEqual方法而偷懶的做法，這樣做的好處是簡(jiǎn)單方便，也節(jié)省時(shí)間（isEqual方法必然會(huì)for-in循環(huán)，對(duì)于更復(fù)雜的情況甚至需要遞歸，在內(nèi)存消耗和時(shí)間復(fù)雜度上肯定會(huì)比JSON.stringify嚴(yán)重），缺點(diǎn)在于可拓展性不高，如果是個(gè)數(shù)組，就比較頭疼。

react實(shí)現(xiàn)實(shí)時(shí)/局部刷新

在React項(xiàng)目中，經(jīng)常會(huì)遇到諸如：刪除某一行的同時(shí)同時(shí)刷新表格展示最新的表格，而不是刪除后，手動(dòng)刷新。

原先是在刪除時(shí)再次調(diào)用生命周期函數(shù)中展示表格列表的函數(shù)，但會(huì)影響性能。

總結(jié)：通過(guò)JS數(shù)組修改usestate中的狀態(tài)。

初始做法示例

useEffect(() => {
? ? ? ? httpOffer()
? ? }, [])
//獲取列表
? ? const httpOffer = () => {
? ? ? ? offerList()
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? // console.log('offer', res)
? ? ? ? ? ? ? ? if (res.status === 200) {
? ? ? ? ? ? ? ? ? ? if (res.data.code === 0) {
? ? ? ? ? ? ? ? ? ? ? ? const data = res.data.data
? ? ? ? ? ? ? ? ? ? ? ? data.length > 0 && data.forEach(el => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? el.key = el.id
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? setOffers(data)
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? message.error(res.data.msg)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? message.info('network failed')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? setLoading(false)
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? setLoading(false)
? ? ? ? ? ? ? ? throw err
? ? ? ? ? ? })
? ? }
const showModalDel = (id) => {
? ? ? ? delOffer({ id })
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? if (res.status === 200) {
? ? ? ? ? ? ? ? ? ? if (res.data.code === 0) {
? ? ? ? ? ? ? ? ? ? ? ? //之前的做法，刷新頁(yè)面
? ? ? ? ? ? ? ? ? ? ? ? httpOffer()
? ? ? ? ? ? ? ? ? ? ? ? message.info(res.data.msg)
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? message.error(res.data.msg)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? message.error('Network failed!')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? throw err
? ? ? ? ? ? })
? ? }

目前可以使用JS數(shù)組和usestate進(jìn)行同樣的操作。

增加數(shù)據(jù)

addOffer(params)
? ? ? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? ? ? if (res.status === 200) {
? ? ? ? ? ? ? ? ? ? ? ? if (res.data.code === 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? let data = res.data.data
? ? ? ? ? ? ? ? ? ? ? ? ? ? //重點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? setOffers([...offers, { key: data.id, id: data.id, ...params}])
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? message.info(res.data.msg)
? ? ? ? ? ? ? ? ? ? ? ? ? ? setVisible(false)
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? message.error(res.data.msg)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? message.error('Network failed!')
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? ? ? })

修改數(shù)據(jù)

editOffer(params)
? ? ? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? ?? ??? ??? ?//重點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? setOffers(offers.map(item => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item.id === params.id){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.id = params.id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.adv_id = params.adv_id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return item
? ? ? ? ? ? ? ? ? ? ? ? ? ? }))
? ? ? ? ? ? ? ? ? ? ? ? ? ? setVisible(false)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? ? ? })

刪除數(shù)據(jù)

const showModalDel = (id) => {
? ? ? ? delOffer({ id })
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? ?//重點(diǎn)
? ? ? ? ? ? ? ? ?setOffers(offers.filter(item => item.id != id ))
? ? ? ? ? ? ? ? ?message.info(res.data.msg)
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? throw err
? ? ? ? ? ? })
? ? }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: