脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Immutable

React替换传统拷贝方法的Immutable使用

 更新时间：2023年02月06日 10:04:58   作者：碰磕  
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用

immutable

它是一款代替传统拷贝方式的第三方库

优势:

  • 在新对象上操作不会影响原对象的数据
  • 性能好

安装使用

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将普通对象转换为Immutable
  • setIn()深度赋值,参数一为数组形式填写需要修改的，参数二为修改后的值
  • 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • antd+react中upload手动上传单限制上传一张

    antd+react中upload手动上传单限制上传一张

    本文主要介绍了antd+react中upload手动上传单限制上传一张，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 详解前端路由实现与react-router使用姿势

    详解前端路由实现与react-router使用姿势

    本篇文章主要介绍了详解前端路由和react-router使用姿势，详细的介绍了react-router的用法，有兴趣的可以了解一下
    2017-08-08
  • 如何创建自己的第一个React 页面

    如何创建自己的第一个React 页面

    React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • React简便获取经纬度信息的方法详解

    React简便获取经纬度信息的方法详解

    在现代的Web应用程序中,获取用户的地理位置信息是一项常见的需求,本文我们将介绍如何在React应用程序中简便地获取用户的经纬度信息,需要的可以参考下
    2023-11-11
  • 用react实现一个简单的scrollView组件

    用react实现一个简单的scrollView组件

    这篇文章主要给大家介绍一下如何用 react 实现一个简单的 scrollView组件，文中有详细的代码示例，具有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • react的严格模式和解决react useEffect执行两次问题

    react的严格模式和解决react useEffect执行两次问题

    文章总结：本文详细探讨了React中useEffect执行两次的问题,主要归因于React的严格模式,严格模式在开发模式下会故意重复调用一些生命周期方法,以帮助开发者发现潜在的问题,包括不安全的生命周期、过时的ref API、废弃的findDOMNode方法、意外的副作用等
    2025-01-01
  • 三分钟搞懂react-hooks及实例代码

    三分钟搞懂react-hooks及实例代码

    React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，请抽出点时间阅读下此文
    2022-03-03
  • React使用api的方式封装弹窗的示例代码

    React使用api的方式封装弹窗的示例代码

    在现代开发中的弹窗样式,经常会是底部一个叉号样式的弹窗,但是目前组件库中并无类似弹窗组件,本文小编给大家介绍了React使用api的方式封装弹窗的示例,感兴趣的小伙伴跟着小编一起来看看吧
    2024-09-09
  • 2个奇怪的react写法

    2个奇怪的react写法

    大家好，我卡颂。虽然React官网用大量篇幅介绍最佳实践，但因JSX语法的灵活性，所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪（但在某些场景下有意义）的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法
    2023-03-03
  • react-beautiful-dnd 实现组件拖拽功能

    react-beautiful-dnd 实现组件拖拽功能

    这篇文章主要介绍了react-beautiful-dnd 实现组件拖拽功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08

最新评论