React替换传统拷贝方法的Immutable使用
碰磕 人气:0immutable
它是一款代替传统拷贝方式的第三方库
优势:
- 在新对象上操作不会影响原对象的数据
- 性能好
安装使用
1.下载 npm i immutable
2.导入 import {Map} from 'immutable'
Map
语法:Map(对象)
赋值:set("属性名","新值")
取值:get("属性名")
toJS()
转回普通对象
import React, { Component } from 'react'; /** * 1.下载 npm i immutable * 2.导入 import {Map} from 'immutable' */ import {Map} from 'immutable' var obj={ name:"碰磕", age:20 } var objImmu=Map(obj); var newobjImmu=objImmu.set("name","pengkeStudy"); // console.log(objImmu,newobjImmu) //get('属性')获取值 console.log(objImmu.get("name"),newobjImmu.get("name")); //toJS转回普通对象 console.log(objImmu.toJS(),newobjImmu.toJS()); /* //写法一 class Immu02 extends Component { state={ info:Map({ name:"碰磕", age:20 }) } render() { return ( <div> Immu02 <button onClick={()=>{ this.setState({ info:this.state.info.set('name',"pengkeStudy").set('age',1000) }) }}>修改它们的值</button> {this.state.info.get("name")}---- {this.state.info.get("age")} </div> ); } }*/ //写法二 class Immu02 extends Component { state={ info:{ name:"碰磕", age:20 } } render() { return ( <div> Immu02 <button onClick={()=>{ let old=Map(this.state.info) let newImmu=old.set("name","pengkeStudy").set("age",10000) this.setState({ info:newImmu.toJS() }) }}>修改它们的值</button> {this.state.info.name}---- {this.state.info.age} </div> ); } } export default Immu02;
嵌套Map
Map中对象中的对象还要套上Map
可以通过map的get
方法获取值向组件传值.,从而完美的解决了组件的无效刷新
shouldComponentUpdate
进行判断决定是否需要刷新
import React, { Component } from 'react'; import {Map} from 'immutable' class Immu03 extends Component { state={ info:Map({ name:"碰磕", age:20, hobbit:Map({ likeone:"运动", liketwo:"学习" }) }) } render() { return ( <div> Immu03 <button onClick={()=>{this.setState({ info:this.state.info.set("name","学习啊啊啊") })}}>修改</button> {this.state.info.get("name")} <Child hobbit={this.state.info.get("hobbit")} ></Child> </div> ); } } class Child extends Component{ shouldComponentUpdate(nextProps,nextState){ //判断hobbit的值是否更新 if(this.props.hobbit===nextProps.hobbit){ return false; } return true; } render(){ return( <div>Child</div> ); } componentDidUpdate(){ console.log("子组件更新了"); } } export default Immu03;
List
可以使用数组的属性方法
import React, { Component } from 'react'; import {List} from 'immutable' var arr=List([1,231,1]) let arr2=arr.push(4)//不会影响原对象结构 let arr3=arr2.concat([12,323,123]) console.log(arr,arr2,arr3); class Immu04 extends Component { state={ favor:List(['吃饭','睡觉','学习','运动']) } render() { return ( <div> Immu04 { this.state.favor.map(item=>{ return <li key={item}>{item}</li> }) } </div> ); } } export default Immu04;
实现个人修改案例
import { List,Map } from 'immutable'; import React, { Component } from 'react'; class Immu05 extends Component { state={ info:Map({ name:"碰磕", location:Map({ province:"江西", city:"吉安" }), hobbit:List(['睡觉','学习','敲键盘']) }) } render() { return ( <div> <h1>编辑个人信息</h1> <div> <button onClick={()=>{ this.setState({ info:this.state.info.set("name","爱学习").set("location",this.state.info.get("location").set("city","南昌")) }) }}>修改</button> {this.state.info.get("name")} <br /> {this.state.info.get("location").get("province")}- {this.state.info.get("location").get("city")} { this.state.info.get("hobbit").map((item,index)=><li key={item}>{item}<button onClick={()=>{ // console.log(index); this.setState({ info:this.state.info.set("hobbit",this.state.info.get("hobbit").splice(index,1)) }) }}>删除</button></li>) } </div> </div> ); } } export default Immu05;
通过fromJS、setIn、updateIn进行改进
fromJS
将普通对象转换为ImmutablesetIn()
深度赋值,参数一为数组形式填写需要修改的,参数二为修改后的值updateIn()
深度修改,参数一为数组形式填写需要修改的,参数二为回调函数(参数为原对象)
import { fromJS } from 'immutable'; import React, { Component } from 'react'; class Immu06 extends Component { state={ info:fromJS({ name:"碰磕", location:{ province:"江西", city:"吉安" }, hobbit:['睡觉','学习','敲键盘'] }) } render() { return ( <div> <h1>编辑个人信息</h1> <div> <button onClick={()=>{ this.setState({ info:this.state.info.setIn(["name"],"爱学习").setIn(["location","city"],"南昌")//setIn("参数一为数组","修改后的值") }) }}>修改</button> {this.state.info.get("name")} <br /> {this.state.info.get("location").get("province")}- {this.state.info.get("location").get("city")} { this.state.info.get("hobbit").map((item,index)=><li key={item}>{item}<button onClick={()=>{ // console.log(index); // this.setState({ // info:this.state.info.setIn(["hobbit",index],"") // }) //updateIn(需要修改的对象,回调函数(参数为原对象)) this.setState({ info:this.state.info.updateIn(["hobbit"],(list)=>list.splice(index,1)) }) }}>删除</button></li>) } </div> </div> ); } } export default Immu06;
这样就学费了Immutable~
加载全部内容