目录immutable安装使用Map嵌套MapList实现个人修改案例immutable 它是一款代替传统拷贝方式的第三方库 优势: 在新对象上操作不会影响原对象的数据性能好 安装使
它是一款代替传统拷贝方式的第三方库
优势:
1.下载 npm i immutable
2.导入 import {Map} from 'immutable'
语法:Map(对象)
赋值:set("属性名","新值")
取值:get("属性名")
tojs()
转回普通对象
import React, { Component } from 'react';
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:{
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~
到此这篇关于React替换传统拷贝方法的Immutable使用的文章就介绍到这了,更多相关React Immutable内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React替换传统拷贝方法的Immutable使用
本文链接: https://www.lsjlt.com/news/194312.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0