日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

關于react中列表渲染的局部刷新問題_React

作者：ConanZzz_ ? 更新時間： 2022-09-30 編程語言

react中列表渲染的局部刷新

最近在寫demo的時候遇到一個更新列表中某個的對象的某個值，最期待的結果肯定是局部刷新，但是我們往往在改變值之后會遇到全局都刷新的問題，以下為個人實驗出來的一個小技巧。

首先我有以下數據需要通過react的列表方法渲染：

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

我們通過以下react方法進行渲染：

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

在這里我們需要重新寫一個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相關操作。
? ? }
? ? shouldComponentUpdate(nextProps){
? ? ? ? return JSON.stringify(nextProps) !== JSON.stringify(this.props);
? ? }
}

當我們點擊第一個button，這個時候就能達到局部刷新，只刷新第一個DemoComponent組件的效果了。

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

首先，大家平時都推薦使用的PureComponent不能在這里使用,因為這個組件沒有shouldComponentUpdate這個鉤子函數，雖然PureComponent也有對比props和nextProps并自行判斷當前組件是否需要重新渲染的功能，但是這個對比對對象是沒有用的，因為{} === {}是返回false的（對這個知識點不理解的朋友可以去看看堆棧相關的知識），數組同理。

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

當然這里也是自己為了不去寫一個isEqual方法而偷懶的做法，這樣做的好處是簡單方便，也節省時間（isEqual方法必然會for-in循環，對于更復雜的情況甚至需要遞歸，在內存消耗和時間復雜度上肯定會比JSON.stringify嚴重），缺點在于可拓展性不高，如果是個數組，就比較頭疼。?

react實現實時/局部刷新

在React項目中，經常會遇到諸如：刪除某一行的同時同時刷新表格展示最新的表格，而不是刪除后，手動刷新。

原先是在刪除時再次調用生命周期函數中展示表格列表的函數，但會影響性能。

總結：通過JS數組修改usestate中的狀態。

初始做法示例

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) {
? ? ? ? ? ? ? ? ? ? ? ? //之前的做法，刷新頁面
? ? ? ? ? ? ? ? ? ? ? ? httpOffer()
? ? ? ? ? ? ? ? ? ? ? ? message.info(res.data.msg)
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? message.error(res.data.msg)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? message.error('Network failed!')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? throw err
? ? ? ? ? ? })
? ? }

目前可以使用JS數組和usestate進行同樣的操作。

增加數據

addOffer(params)
? ? ? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? ? ? if (res.status === 200) {
? ? ? ? ? ? ? ? ? ? ? ? if (res.data.code === 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? let data = res.data.data
? ? ? ? ? ? ? ? ? ? ? ? ? ? //重點
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? })

修改數據

editOffer(params)
? ? ? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? ?? ??? ??? ?//重點
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? })

刪除數據

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

原文鏈接：https://blog.csdn.net/ConanZzz_/article/details/90114736

欄目分類
最近更新