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>
    }
    tog