它是一款代替传统拷贝方式的第三方库
优势:
1.下载 npm i immutable
2.导入 import {Map} from 'immutable'
语法: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的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;
可以使用数组的属性方法
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~
