immutable.js笔记

最新推荐文章于 2023-08-20 21:11:14 发布
最新推荐文章于 2023-08-20 21:11:14 发布
阅读量226 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fghyibib/article/details/117821181
版权

Immutable.js原理分析

Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

Immutable.js的使用

安装

cnpm i immutable --save

Map的操作

import React from 'react';
import ReactDOM from 'react-dom';
import {Map} from 'immutable';

//声明一个对象，这个对象要设置为不可被修改的对象
const state = {
  value: 'hello',
  list: ['html','css','js']
}

//将要设置不可更改的对象，传入到Map()方法中，会返回一个新的state对象
const imState = Map(state)

//将state对象设置为不可被修改的对象后，使用 get('key') 方法取值
console.log(imState.get('value'))

//使用set()方法修改值，修改后会返回一个新的对象，原来的对象数据没有变化
const newImState = imState.set('value','world')

console.log(imState.get('value'))
console.log(newImState.get('value'))


ReactDOM.render(
  <div>
    hello
  </div>
  ,document.getElementById('root'));

List的操作

import React from 'react';
import ReactDOM from 'react-dom';
import {List} from 'immutable';

//声明一个数据，要将该数组设置为不可更改的数组
const arry = [1,2,3]

//将数组传入 List() 中即可设置不可更改的数组对象
const imList = List(arry)

//对imList做追加操作，不会对原数组做修改，会返回一个新的数组对象
const newImList = imList.push(4)

console.log(imList.size,newImList.size)


ReactDOM.render(
  <div>
    hello
  </div>
  ,document.getElementById('root'));

fromJS的操作

import React from 'react';
import ReactDOM from 'react-dom';
import {fromJS} from 'immutable';

//声明一个不可更改的对象
const state = {
  value: 'hello',
  list: ['html','css','js'],
  obj: {
    x: 1,
    y: {
      z: 2
    }
  }
}

//把state传入的fromJS()中
const imState = fromJS(state)

//获取imState中的值
console.log(imState.get('value'))

//修改imState中的值，修改对象中的第一层属性的值，可以使用 set() 方法
const newState = imState.set('value','world')
console.log(newState.get('value'))

//修改imState中更深层次的数据，需要使用 setIn() 或 updateIn() 方法
//setIn() 可以直接赋值，参数1为对象属性的层级结构，按照层级顺序编写到数组中；参数2为要赋的值
const newState1 = imState.setIn(['obj','y','z'],100)
//updateIn() 可以对原始值做修改后再返回新的值，参数1同上，参数2为修改值时用的回调函数，回调函数的参数为对象原始值
const newState2 = imState.updateIn(['obj','y','z'], val => val + 1)

//获取深层对象结构的值，使用 getIn() 方法
console.log(newState1.getIn(['obj','y','z']))
console.log(newState2.getIn(['obj','y','z']))


ReactDOM.render(
  <div>
    hello
  </div>
  ,document.getElementById('root'));

在redux中使用immutable

使用Map操作

第1步：创建store

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

第2步：创建reducer

import {Map} from 'immutable'

//使用Map()来创建原始对象，创建的原始对象为不可更改的对象
const defaultState = Map({
    value: ''
})

const reducer = (state = defaultState, action)=>{

    //在执行修改state的代码中，使用 set() 方法完成修改操作，返回一个新的对象
    if(action.type === 'change_value'){
        return state.set('value',action.value)
    }

    return state
}

export default reducer

第3步：创建App.js文件，用于修改redux中的数据

import React, { Component } from 'react'
import store from './store'
import Son from './Son'

export default class App extends Component {

    constructor() {
        super()
        this.state = store.getState()
        store.subscribe(()=>{
            this.setState(store.getState())
        })
    }

	//文本框输入事件
    handleInput(e){
        let action = {
            type: 'change_value',
            value: e.target.value
        }
        store.dispatch(action)
    }

    render() {
        return (
            <div>
                <input value={this.state.value} onChange={this.handleInput.bind(this)}></input>
                <Son></Son>
            </div>
        )
    }
}

第4步：创建Son.js用于实时显示redux中的数据

import React, { Component } from 'react'
import store from './store'

export default class Son extends Component {

    constructor(){
        super()

        //此时使用store.getState()获取的数据为immutable处理后的对象，要使用get()方法获取具体值
        this.state = {
            value:  store.getState().get('value')
        }

        store.subscribe(()=>{
            this.setState({
                value: store.getState().get('value')
            })
        })
    }

    render() {
        return (
            <div>
                Son组件：{this.state.value}
            </div>
        )
    }
}

使用fromJS操作

App.js代码

import React, { Component } from 'react'
import store from './store'
import Son from './Son'

export default class App extends Component {


    constructor() {
        super()

        this.state = {
            value: '',
            name: '',
            age: 0,
            h1: ''
        }
    }

    //提交事件
    handleSubmit(){
        let action = {
            type: 'reg_user',
            value: this.state.value,
            name: this.state.name,
            age: this.state.age,
            h1: this.state.h1
        }
        store.dispatch(action)
    }


    render() {

        return (
            <div>
                <div>
                    普通值：<input value={this.state.value} onChange={(e)=>{
                        this.setState({value: e.target.value})
                    }}></input>
                </div>

                <div>
                    姓名：<input value={this.state.name} onChange={(e)=>{
                        this.setState({
                            name: e.target.value
                        })
                    }}></input>
                </div>

                <div>
                    年龄：<input value={this.state.age} onChange={(e)=>{
                        this.setState({
                            age: e.target.value
                        })
                    }}></input>
                </div>

                <div>
                    爱好：<input value={this.state.h1} onChange={(e)=>{
                        this.setState({
                            h1: e.target.value
                        })
                    }}></input>
                </div>

                <button onClick={this.handleSubmit.bind(this)}>提交</button>
                
                
                <hr />
                
                <Son></Son>
            </div>
        )
    }
}

store.js代码

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

reducer.js代码

import {fromJS} from 'immutable'

//使用Map()来创建原始对象，创建的原始对象为不可更改的对象
const defaultState = fromJS({
    value: '',
    user: {
        name: '',
        age: 0,
        hobby: {
            h1: ''
        }
    }
})

const reducer = (state = defaultState, action)=>{

    //使用fromJS中的 setIn() 方法修改数据
    if(action.type === 'reg_user'){

        return  state.setIn(['user','name'],action.name)
      .setIn(['user','age'],action.age)
      .setIn(['user','hobby','h1'],action.h1)
      .set('value',action.value)
    }

    return state
}

export default reducer

Son.js代码

import React, { Component } from 'react'
import store from './store'

export default class Son extends Component {

    constructor(){
        super()

        //此时store.getState()获取到数据为复杂类型，要使用getIn()方法
        const storeState = store.getState();
        this.state = {
            value:  storeState.get('value'),
            user: {
                name: storeState.getIn(['user','name']),
                age: storeState.getIn(['user','age']),
                hobby: {
                    h1: storeState.getIn(['user','hobby','h1'])
                }
            }
        }

        //监听store中的数据更新
        store.subscribe(()=>{
            const storeState2 = store.getState();
            this.setState({
                value:  storeState2.get('value'),
                user: {
                    name: storeState2.getIn(['user','name']),
                    age: storeState2.getIn(['user','age']),
                    hobby: {
                        h1: storeState2.getIn(['user','hobby','h1'])
                    }
                }
            })
        })
    }

    render() {
        let {value,user} = this.state
        return (
            <div>
                Son组件：{value}
                <p>姓名：{user.name}</p>
                <p>年龄：{user.age}</p>
                <p>爱好：{user.hobby.h1}</p>
            </div>
        )
    }
}
涔溪
关注
Immutable.js 原理与源码解析
purpose的博客
04-15 2752
Immutable.js 原理与源码解析前言参考资料 本文主要对于 Immtable.js 的一些基本原理并以其中的 Map 数据结构为例，结合代码对具体的实现进行分析。 实际上，各色博客、专栏中关于 Immutable.js 的各种相关资料已经介绍的相当详尽了，本文不过是拾人牙慧而已。 前言 “不可变（Immutable）数据”是什么？ 不可变数据是指一旦创建就不可再被修改的数据。看到这一定义，...
6.Draftjs 学习笔记-聊聊自定义样式
03-27 3134
draft对于一些简单的文本加点样式就能搞定的提供了集中自定义的方式，分为两种情况，块级样式，行内样式，块级之间不可叠加!!!!，其他都可以叠加。 1. 块级样式自定义首先呢，分几种情况，一种覆盖已存在的块级样式，一种完全创造个新的自己定义的，这里就演示完全捏造一个，覆盖的话只要用已有的名字标签就行，其实没必要，自定义就行。我这定义一个suibian 的块级样式，红色的大字体。先要添加这个块级的名称
Immutable.js学习笔记
sdasadasds的博客
09-16 313
JavaScript数据修改的问题 看一段大家熟悉的代码 const state = { str: '教育', obj: { y: 1 }, arr: [1, 2, 3] } const newState = state console.log(newState === state) // true 由于js的对象和数组都是引用类型。所以newState的state实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。 尝试修改一下数据 const s
JS中的Immutable
QD的博客
05-23 1065
Persistent Data Structure（持久化数据结构） 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。 Immutable 详解及 Reac
浅谈Immutable.js
JiaPeng366的博客
05-31 1346
最近在学习Immutable.js，正好遇见公司的每周技术分享会，把自己的一些总结和学到的记录下来，分享给大家。 Immutable.js 简介 Immutable.js是由 Facebook 工程师（ Lee Byron） 花费 3 年时间打造，与 React 同期出现，虽然没有被默认放到 React工具集里，但是它的价值还是非常大的。它内部实现了一套完整的持久化数据结构（ Persistent Data Structure ），还有很多易用的数据类型（像 List、Map）。有非常全面的函数式操作方法（
immutable.js理解
最新发布
m0_73292513的博客
08-20 220
Immutable
5.Draftjs 学习笔记-自定义控件（多媒体）
12-21 6140
偷个懒先贴上两个文档1.block-render主要用来自定义渲染的，一般是通过css，或者更换标签，当然也可以用自定义组件 在处理粘贴进来的内容时，有着映射，粘贴这块我没试过，render的实验在第2篇中最后那个例子中有。2.block-component 用来做一些复杂的组件比如多媒体组件和一些有交互事件的组件。 这个就不想洗赘述了，贴上一个多媒体组件的，在2中例子基础上加的，添加了左中右
3.Draftjs 学习笔记-Entities
12-08 3642
本章讨论实体(Entities)系统,Draft用来注解文本的元数据类型，图片链接，视频在Draft这里都算是实体。原文如下： This article discusses the Entity system, which Draft uses for annotating ranges of text with metadata. Entities enable engineers to int
4.Draftjs 学习笔记-Decorators
12-08 2919
draft.js 中的装饰器功能介绍，主要是策略和渲染组件，本节讲述装饰器的原理和使用方法
200个微信小程序案例源码可运行.zip
06-09
使用第三方模块Underscore.js, Immutable.js, UUID 推荐研究demo:豆瓣电影:代码中有大量注释 微信下程序demo:电影麻辣烫 微信小程序模仿拉钩招聘APP源代码 微信小程序24点计算游戏 微信小程序24点计算游戏(2) 微信小...
immutable.js中文文档
热门推荐
神经佳的博客
11-22 2万+
Immutable 是什么？ 关于Immutable的定义，官方文档是这样说的： Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional ...
immutable.js
u012125579的专栏
08-07 1403
ReactJs 性能React.js是一个UI = f(states)的框架，为了解决更新的问题，React.js使用了virtual dom，virtual dom通过diff修改dom，来实现高效的dom更新。对于react的来说，如果父组建有多个子组建。当父组建render。下面的子组建都得跟着render。可是很多子组建里面是冤枉的啊！！很多子组建的props 和 state 然而并没有改变
Immutable-js简介
小枫哥的博客
01-29 340
本篇只是对Immutable.js的简单介绍 什么是Immutable Data？ Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from function...
ImmutableJS
anke5248的博客
06-29 132
引用大神的一句话：（具体是谁自己问度娘） Shared mutable state is the root of all evil（共享的可变状态是万恶之源） -- Pete Hunt JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。 如foo={a: 1}; bar=f...
Immutable.js
落枫秋歌
05-07 295
ImmutableJs出现背景 JavaScript中的Plain Object，一般是以引用形式存在的可变数据（Mutable Data），这样设计的目的可能是为了节省CPU与内存的开销；每次进行对象修改时直接改变对象本身（changed in-place rather than return a new object） 一般mutable data进行数据操作时比较简单，但是当在一些大型复杂应用中使用mutable data时可能会导致数据无法溯源，因为很多地方都可以修改这个数据，导致难以调试与维护；
关于Immutable.js
weixin_43801564的博客
01-10 348
前言 在javascript中，对象之间的相互赋值，一般都是对内存地址引用的赋值，也就是不同的变量名可能指向同一块内存区域。 这样的优点就是可以节省内存空间，但是一旦项目趋于复杂，给我们带来的弊端远远大于它的优点。因此，大部分情况下，我们可能会采用深拷贝或者浅拷贝的方式给一个变量赋值，然后改变其内容，但同样这样又会导致内存和性能的浪费。 Immutable.js 通过Immutable.js创建的...
immutable.js 意义何在，使用场景？
Cool的博客
12-14 5004
最近项目中频繁用到所以回答一下。首先，它虽然和React同期出现且跟React配合很爽，但它可不是React工具集里的（它的光芒被掩盖了），它是一个完全独立的库，无论基于什么框架都可以用它。意义在于它弥补了Javascript没有不可变数据结构的问题。不可变数据结构是函数式编程中必备的。前端工程师被OOP洗脑太久了，组件根本上就是函数用法，FP的特点更适用于前端开发。 Javascript...
immutable.js学习笔记（一）----- Immutable简介
保持清醒
04-24 442
一、Immutable.js 介绍 Immutable.js 官方文档 ： https://immutable-js.github.io/immutable-js/ 关于Immutable的定义，官方文档是这样说的： Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoiz
immutable.js 怎么使用
05-28
Immutable.js是一个JavaScript库，用于创建不可变的数据结构。它提供了一组用于创建、操作和查询这些数据结构的API。以下是使用Immutable.js的一些常见步骤： 1. 安装Immutable.js 可以使用npm或yarn安装Immutable.js： ```bash npm install immutable ``` ```bash yarn add immutable ``` 2. 导入Immutable.js 在需要使用Immutable.js的文件中，导入Immutable.js的核心模块： ```js import Immutable from 'immutable'; ``` 3. 创建不可变的数据结构 使用Immutable.js的函数来创建不可变的数据结构，例如： ```js const data = Immutable.fromJS({ foo: { bar: 1 } }); ``` 这将创建一个不可变的Map对象，其中包含一个名为`foo`的键，它的值是包含一个`bar`键和值为1的对象。 4. 操作不可变的数据结构 使用Immutable.js的方法来对不可变数据结构进行操作，例如： ```js const newData = data.setIn(['foo', 'bar'], 2); ``` 这将返回一个新的Immutable对象，其中`foo.bar`的值已经被更新为2。需要注意的是，原始的数据结构并没有被修改，而是返回了一个新的对象来代表更新后的值。 5. 查询不可变的数据结构 使用Immutable.js的方法来查询不可变数据结构，例如： ```js const value = data.getIn(['foo', 'bar']); ``` 这将返回`foo.bar`的值，即1。 以上就是使用Immutable.js的基本步骤。需要注意的是，由于Immutable.js创建的数据结构是不可变的，因此在对其进行操作时需要使用Immutable.js提供的方法，而不是原生的JavaScript方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值