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.statereturn (<div>Son組件：{value}<p>姓名：{user.name}</p><p>年齡：{user.age}</p><p>愛好：{user.hobby.h1}</p></div>)} }

總結

以上是生活随笔為你收集整理的immutable.js笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。