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中列表渲染的局部刷新相关推荐

ArcGIS engine中Display类库（局部刷新）
转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...
React的列表渲染
//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id: ...
Vue3中如何进行页面局部刷新，组件刷新
前言今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态但是数据已经传送给后端,后端也完成了响应的处理这个时候我想到了局部刷新,我想vue3是vue ...
在React中解析渲染markdown文件
解决办法安装marked对md文件进行解析 npm install marked --save 基本使用 import { marked } from 'marked';const renderer ...
react入门-列表渲染（动态获取数据）
注意:动态获取的是我自定义的后台数据,使用的时候请修改:componentDidMount中url 使用的数据如下: {"data": [{"author": ...
前端学习（2236）：react的列表渲染二
import React from 'react'; import ReactDOM from 'react-dom';class Welcome extends React.Component {c ...
前端学习（2235）：react的列表渲染
import React from 'react'; import ReactDOM from 'react-dom';class Welcome extends React.Component {c ...
React教程(二)——jsx语法、条件渲染、列表渲染
1.JSX 语法在react中,就是使用jsx的语法,来实现DOM元素的展示.一个基本的jsx语法的react模板如下: <div>{this.props.title}</div& ...
jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）
一简介和实现效果这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了 ...

react中列表渲染的局部刷新

react中列表渲染的局部刷新相关推荐

最新文章

热门文章