关于react中列表渲染的局部刷新问题.docxVIP

第

关于react中列表渲染的局部刷新问题

目录react中列表渲染的局部刷新react实现实时/局部刷新初始做法示例增加数据修改数据删除数据

react中列表渲染的局部刷新

最近在写demo的时候遇到一个更新列表中某个的对象的某个值，最期待的结果肯定是局部刷新，但是我们往往在改变值之后会遇到全局都刷新的问题，以下为个人实验出来的一个小技巧。

首先我有以下数据需要通过react的列表方法渲染：

letlist=[

??{

????id:1,

????show:false

??},

??{

????id:2,

????show:false

??},

??{

????id:3,

????show:false

??}

]

我们通过以下react方法进行渲染：

render(){

??return(

????{list.map((val)={

??????DemoComponentval={val}/

????})}

??)

}

在这里我们需要重新写一个DemoComponent的组件：

importReact,{Component}fromreact;

exportclassDemoComponentextendsComponent{

??render(){

????div

?????divps.val.id/div

?????button()=this.toggleDialog()}toggle/button?

????/div

??}

??toggleDialog(){

????//更改val.showDialog相关操作。

??}

??shouldComponentUpdate(nextProps){

????returnJSON.stringify(nextProps)!==JSON.stringify(ps);

??}

}

当我们点击第一个button，这个时候就能达到局部刷新，只刷新第一个DemoComponent组件的效果了。

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

首先，大家平时都推荐使用的PureComponent不能在这里使用,因为这个组件没有shouldComponentUpdate这个钩子函数，虽然PureComponent也有对比props和nextProps并自行判断当前组件是否需要重新渲染的功能，但是这个对比对对象是没有用的，因为{}==={}是返回false的（对这个知识点不理解的朋友可以去看看堆栈相关的知识），数组同理。

那么为了让其他列表组件没有必要多去render一次，所以我在shouldComponentUpdate中取了个巧，直接JSON.stringify，将两个对象转换成字符串进行比较，这样就方便的多。

当然这里也是自己为了不去写一个isEqual方法而偷懒的做法，这样做的好处是简单方便，也节省时间（isEqual方法必然会for-in循环，对于更复杂的情况甚至需要递归，在内存消耗和时间复杂度上肯定会比JSON.stringify严重），缺点在于可拓展性不高，如果是个数组，就比较头疼。

react实现实时/局部刷新

在React项目中，经常会遇到诸如：删除某一行的同时同时刷新表格展示最新的表格，而不是删除后，手动刷新。

原先是在删除时再次调用生命周期函数中展示表格列表的函数，但会影响性能。

总结：通过JS数组修改usestate中的状态。

初始做法示例

useEffect(()={

????httpOffer()

??},[])

//获取列表

??consthttpOffer=()={

????offerList()

??????.then(res={

????????//console.log(offer,res)

????????if(res.status===200){

??????????if(res.data.code===0){

????????????constdata=res.data.data

????????????data.length0data.forEach(el={

??????????????el.key=