react中 state的数据不可变准则,为什么这么设计呢？
因为react的生命周期中每次调用ComponentShouldUpdate()会将state现有的数据跟将要扭转的数据进行比拟,更新发生变化的数据，最大限度缩小不必要的更新，达到性能的优化。所以不倡议间接更改state外面的数据，而是通过setState去扭转
对于state中间接扭转援用类型数据,视图无奈更新的问题
小案例1
class TheState extends Component { constructor(props){ super(props) this.state={ lists:[ {name:'dabai',age:18}, {name:'xhh',age:20}, {name:'ali',age:25} ], num:0 } } render() { return ( <div> { this.state.lists.map((item,index)=>{ return( <ul key={item+index}> <li> {item.name}---{item.age} </li> </ul> ) }) } <button onClick={this.addListsData.bind(this)}>增加数据</button> </div> ); } addListsData(){ let data3={name:'xiaohui',age:22} this.state.lists.push(data3) //间接push原state外面的lists不会引起视图更新 console.log(this.state.lists) } }如图
再看另一个场景：
class TheState extends Component { constructor(props){ super(props) this.state={ lists:[ {name:'dabai',age:18}, {name:'xhh',age:20}, {name:'ali',age:25} ] } } render() { return ( <div> { this.state.lists.map((item,index)=>{ return( <ul key={item+index}> <li> {item.name}---{item.age} <button onClick={this.addAge.bind(this,index)} style={{marginLeft:'20px'}}>减少年龄 </button> </li> </ul> ) }) } <button onClick={this.addListsData.bind(this)}>增加数据</button> </div> ); } addListsData(){ let data3={name:'xiaohui',age:22} let newArr1=[...this.state.lists]//浅拷贝一份数据 newArr1.push(data3) //往拷贝的数组里push数据 console.log(newArr1) this.setState({ lists:newArr1 //将扭转后的数据从新赋值给原有的对象 这时react外部会调用render刷新数据 }) //**** 留神 间接push原state外面的lists不会引起视图更新 稍后图解 */ } addAge(index){ let newArr2=[...this.state.lists]//浅拷贝一份数据 newArr2[index].age+=1 //批改拷贝后的数据 this.setState({ lists:newArr2 //从新赋值 调用render渲染页面 }) }} 效果图
上面是图解
图解小结：
对lists进行push数据尽管产生了扭转，然而其内存中存储的url不会产生扭转，所以不会触发render对视图进行更新
浅拷贝后的newArr1和lists数据是齐全一样的，然而内存地址变了，所以会触发视图更新，咱们操作newArr后将它赋值给list，在componentShouldUpdate()周期的时候会比对新旧url，当检测到url变动时会调用render函数，从新渲染咱们的视图
看到这里咱们就明确啦,间接改state里的援用数据类型基本不会触发视图更新的起因就是它~~~~