Immutable.js原理分析

Immutable Data 就是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。對(duì) Immutable 對(duì)象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的 Immutable 對(duì)象。Immutable 實(shí)現(xiàn)的原理是 Persistent Data Structure（持久化數(shù)據(jù)結(jié)構(gòu)），也就是使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時(shí)，要保證舊數(shù)據(jù)同時(shí)可用且不變。同時(shí)為了避免 deepCopy 把所有節(jié)點(diǎn)都復(fù)制一遍帶來(lái)的性能損耗，Immutable 使用了 Structural Sharing（結(jié)構(gòu)共享），即如果對(duì)象樹(shù)中一個(gè)節(jié)點(diǎn)發(fā)生變化，只修改這個(gè)節(jié)點(diǎn)和受它影響的父節(jié)點(diǎn)，其它節(jié)點(diǎn)則進(jìn)行共享。

Immutable.js的使用

安裝

cnpm i immutable --save

Map的操作

import React from 'react'; import ReactDOM from 'react-dom'; import {Map} from 'immutable';//聲明一個(gè)對(duì)象，這個(gè)對(duì)象要設(shè)置為不可被修改的對(duì)象 const state = {value: 'hello',list: ['html','css','js'] }//將要設(shè)置不可更改的對(duì)象，傳入到Map()方法中，會(huì)返回一個(gè)新的state對(duì)象 const imState = Map(state)//將state對(duì)象設(shè)置為不可被修改的對(duì)象后，使用 get('key') 方法取值 console.log(imState.get('value'))//使用set()方法修改值，修改后會(huì)返回一個(gè)新的對(duì)象，原來(lái)的對(duì)象數(shù)據(jù)沒(méi)有變化 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';//聲明一個(gè)數(shù)據(jù)，要將該數(shù)組設(shè)置為不可更改的數(shù)組 const arry = [1,2,3]//將數(shù)組傳入 List() 中即可設(shè)置不可更改的數(shù)組對(duì)象 const imList = List(arry)//對(duì)imList做追加操作，不會(huì)對(duì)原數(shù)組做修改，會(huì)返回一個(gè)新的數(shù)組對(duì)象 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';//聲明一個(gè)不可更改的對(duì)象 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中的值，修改對(duì)象中的第一層屬性的值，可以使用 set() 方法 const newState = imState.set('value','world') console.log(newState.get('value'))//修改imState中更深層次的數(shù)據(jù)，需要使用 setIn() 或 updateIn() 方法 //setIn() 可以直接賦值，參數(shù)1為對(duì)象屬性的層級(jí)結(jié)構(gòu)，按照層級(jí)順序編寫(xiě)到數(shù)組中；參數(shù)2為要賦的值 const newState1 = imState.setIn(['obj','y','z'],100) //updateIn() 可以對(duì)原始值做修改后再返回新的值，參數(shù)1同上，參數(shù)2為修改值時(shí)用的回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)為對(duì)象原始值 const newState2 = imState.updateIn(['obj','y','z'], val => val + 1)//獲取深層對(duì)象結(jié)構(gòu)的值，使用 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步：創(chuàng)建store

import {createStore} from 'redux' import reducer from './reducer'const store = createStore(reducer)export default store

第2步：創(chuàng)建reducer

import {Map} from 'immutable'//使用Map()來(lái)創(chuàng)建原始對(duì)象，創(chuàng)建的原始對(duì)象為不可更改的對(duì)象 const defaultState = Map({value: '' })const reducer = (state = defaultState, action)=>{//在執(zhí)行修改state的代碼中，使用 set() 方法完成修改操作，返回一個(gè)新的對(duì)象if(action.type === 'change_value'){return state.set('value',action.value)}return state }export default reducer

第3步：創(chuàng)建App.js文件，用于修改redux中的數(shù)據(jù)

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步：創(chuàng)建Son.js用于實(shí)時(shí)顯示redux中的數(shù)據(jù)

import React, { Component } from 'react' import store from './store'export default class Son extends Component {constructor(){super()//此時(shí)使用store.getState()獲取的數(shù)據(jù)為immutable處理后的對(duì)象，要使用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>愛(ài)好：<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()來(lái)創(chuàng)建原始對(duì)象，創(chuàng)建的原始對(duì)象為不可更改的對(duì)象 const defaultState = fromJS({value: '',user: {name: '',age: 0,hobby: {h1: ''}} })const reducer = (state = defaultState, action)=>{//使用fromJS中的 setIn() 方法修改數(shù)據(jù)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()//此時(shí)store.getState()獲取到數(shù)據(jù)為復(fù)雜類(lèi)型，要使用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'])}}}//監(jiān)聽(tīng)store中的數(shù)據(jù)更新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>愛(ài)好：{user.hobby.h1}</p></div>)} }

總結(jié)

以上是生活随笔為你收集整理的immutable.js笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。