React?Immutable使用方法詳細(xì)介紹
更新時(shí)間：2022年09月29日 09:12:32 作者：月光曬了很涼快
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用
1. 介紹
假設(shè)當(dāng)前 redux 的大小為 1G，現(xiàn)在要修改 redux 樹中的某個(gè)節(jié)點(diǎn)（節(jié)點(diǎn)的大小很?。覀兙托枰顝?fù)制整棵 redux 樹，只為了修改很少的數(shù)據(jù)，這樣對(duì)于性能的損耗是非常大的。于是我們使用 Immutable 來(lái)對(duì)這一現(xiàn)象進(jìn)行優(yōu)化，Immutable 只會(huì)深復(fù)制發(fā)生改變的節(jié)點(diǎn)及其祖先節(jié)點(diǎn)，然后修改后返回新數(shù)據(jù)。
Immutable.js 出自 Facebook，是非常流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用。
- 持久化數(shù)據(jù)結(jié)構(gòu)：這里說的持久化是用來(lái)描述一種數(shù)據(jù)結(jié)構(gòu)，指一個(gè)數(shù)據(jù)，在被修改時(shí)，仍然能夠保持修改前的狀態(tài)，即不可變類型。
- 結(jié)構(gòu)共享：Immutable 使用先進(jìn)的 tries (字典樹)技術(shù)實(shí)現(xiàn)結(jié)構(gòu)共享來(lái)解決性能問題，當(dāng)我們對(duì)一個(gè) Immutable 對(duì)象進(jìn)行操作的時(shí)候， ImmutableJS 會(huì)只 clone 該節(jié)點(diǎn)以及它的祖先節(jié)點(diǎn)，其他保持不變，這樣可以共享相同的部分，大大提高性能。
- 惰性操作：創(chuàng)建的對(duì)象時(shí)其實(shí)代碼塊沒有被執(zhí)行，只是被聲明了，代碼在獲取或修改的時(shí)候才會(huì)實(shí)際被執(zhí)行
Immutable 的安裝：
yarn add immutable
2. 優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
- 降低對(duì)象深復(fù)制帶來(lái)的復(fù)雜度
- 節(jié)省內(nèi)存
- 歷史追溯性
缺點(diǎn)
- 需要重新學(xué)習(xí)api
- 容易與原生對(duì)象混淆：由于api與原生不同，混用的話容易出錯(cuò)
- 第3方組件庫(kù)不支持，使用時(shí)，還需要轉(zhuǎn)換
3. 對(duì)象處理
使用 Map 和 formJS 方法將 js 對(duì)象轉(zhuǎn)化為 immutable 對(duì)象，并獲取數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 是方法也是類型
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象或數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
console.log("============ Map方法 ==============")
const state = { id: 1, name: '張三' }
const imState = Map(state)
console.log(imState)
// 獲取數(shù)據(jù) get / getIn 沒有值就返回undefined
console.log(imState.get('name'))
console.log(imState.getIn(['name']))
console.log("========== formJs方法 ============")
// Map方法只轉(zhuǎn)一層,這時(shí)候使用 fromJS 方法
const state1 = { id: 1, name: { username: '李四' } }
const imState1 = fromJS(state1)
console.log(imState)
console.log(imState1.get('name').get('username'))
// getIn 獨(dú)特寫法
console.log(imState1.getIn(['name', 'username']))
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
修改數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 是方法也是類型
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象或數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 修改數(shù)據(jù) set/setIn update/updateIn 修改數(shù)據(jù)后會(huì)返回一個(gè)新的state數(shù)據(jù)
// set 相關(guān)方法，不關(guān)心原數(shù)據(jù)，直接賦值
// update 相關(guān)方法，在原數(shù)據(jù)基礎(chǔ)上修改
const state = { id: 1, name: { username: '李四', age: 10 } }
const imState = fromJS(state)
const newImState = imState.set('id', 3)
// toJS 把immutable對(duì)象轉(zhuǎn)為js對(duì)象
// 這里能獲取新舊數(shù)據(jù),體現(xiàn)出 immutable 歷史可追溯的優(yōu)點(diǎn)
console.log('newImState:',newImState.toJS(), imState.toJS())
const newImState1 = imState.setIn(['name', 'age'], 20)
console.log('newImState1:',newImState1.toJS())
const newImState2 = imState.update('id', val => val + 1)
console.log('newImState2:',newImState2.toJS())
const newImState3 = imState.updateIn(['name', 'age'], val => val + 1)
console.log('newImState3:',newImState3.toJS())
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
刪除數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 是方法也是類型
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象或數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 刪除 remove/removeIn/delete/deleteIn 別名
const state = { id: 1, name: { username: '李四', age: 10 } }
const imState = fromJS(state)
const newImState = imState.remove('id')
console.log(newImState.toJS())
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
合并數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 是方法也是類型
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象或數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 合并
const id = fromJS({ id: 1 })
const name = fromJS({ name: '張三' })
const imState1 = name.merge(id)
const imState2 = name.concat(id)
console.log(imState1.toJS())
console.log(imState2.toJS())
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
4. 數(shù)組處理
查看長(zhǎng)度和獲取數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 方法也是類似
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象可數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// ------------ 數(shù)組轉(zhuǎn)為L(zhǎng)ist
// { name: '張三' } 轉(zhuǎn)為了map
const state = [1, 2, { name: '張三' }]
const imState = fromJS(state)
// 查看當(dāng)前長(zhǎng)度
console.log(imState.size);
// 獲取 get/getIn
console.log(imState.get(2).get('name'))
console.log(imState.getIn([2, 'name']))
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
修改數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 方法也是類似
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象可數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 操作 push/pop/unshift/shift/splice/concat
// set/setIn update/updateIn
const state = [1, 2, { name: '張三', arr: [20] }]
const imState = fromJS(state)
// 把第0個(gè)元素修改為10
const newImState1 = imState.set(0, 10)
console.log(newImState1.toJS())
// 把第2個(gè)元素中的arr中的第0個(gè)改為10
const newImState2 = imState.setIn([2,'arr',0], 10)
console.log(newImState2.toJS())
//
const newImState3 = imState.update(0, val => val + 1)
console.log(newImState3.toJS())
const newImState = imState.updateIn([2, 'arr', 0], v => v + 1)
console.log(newImState.toJS())
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
刪除元素：
import React, { Component } from 'react'
// Map, List 方法也是類似
// Map方法，可以把json對(duì)象第1層轉(zhuǎn)為immutable對(duì)象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對(duì)象中的List類型
// fromJS方法，可以自動(dòng)遞歸所以有對(duì)象可數(shù)組，自動(dòng)轉(zhuǎn)為對(duì)象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 刪除
const imState = fromJS([1, 2, { name: '張三', arr: [20] }])
const newImState = imState.remove(1)
console.log(newImState.toJS())
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App
5. 優(yōu)化組件渲染
immutable 中有一個(gè) is 方法，可以比較兩個(gè)immutable對(duì)象值是否一致,如果一致則返回true 否則為false。
import React, { Component } from 'react'
import _ from 'lodash'
// is 比較兩個(gè)immutable對(duì)象值是否一致,如果一致則返回true 否則為false
import { Map, List, fromJS, is } from 'immutable'
// 比較兩個(gè)對(duì)象的值是否一樣
// const obj1 = { id: 1 }
// const obj2 = { id: 1 }
// 我們知道這種情況下，輸出一定為 false，如何只比較值該怎么做？
// console.log(obj1 == obj2)
// console.log(obj1 === obj2)
// 方案1：值它是一樣的 使用此方法,它會(huì)進(jìn)行值的比對(duì),如果對(duì)象它的層級(jí)深,比對(duì)的速度就慢
// console.log(_.isEqual(obj1, obj2))
const obj1 = fromJS({ id: 1 })
const obj2 = fromJS({ id: 1 })
// false
console.log(obj1 == obj2)
// true
console.log(is(obj1, obj2))
class App extends Component {
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí)</h3>
</div>
)
}
}
export default App利用這個(gè)方法，我們可以優(yōu)化組件渲染，例如下面這種情況：
App.jsx：
import React, { Component } from 'react'
import Child from './components/Child'
class App extends Component {
state = {
user: { num: 100 }
}
render() {
return (
<div>
<h3>App組件之immutablejs學(xué)習(xí) -- {this.state.user.num}</h3>
<hr />
<Child user={this.state.user} />
<hr />
{/* 此時(shí)子組件不會(huì)渲染 */}
{/* <button onClick={() => this.setState({ user: { num: 100 } })}>+++++</button> */}
{/* 此時(shí)子組件會(huì)重新渲染 */}
<button onClick={() => this.setState({ user: { num: Date.now() } })}>+++++</button>
</div>
)
}
}
export default App子組件：
import React, { Component } from 'react'
import { fromJS, is } from 'immutable'
class Child extends Component {
shouldComponentUpdate(nextProps, nextState) {
// 如果最新的props對(duì)象和父組件傳過來(lái)的props對(duì)象不一致，則更新子組件，否則子組件不更新
// 這樣可以優(yōu)化性能
return !is(fromJS(nextProps), fromJS(this.props))
}
render() {
console.log('child -- render')
return (
<div>
<h3>child組件</h3>
</div>
)
}
}
export default Child
6. immutable和redux集合使用
安裝：
redux 中利用 combineReducers 來(lái)合并 reducer 并初始化 state ，redux 自帶的 combineReducers 只支持 state 是原生 js 形式的，所以需要使用 redux-immutable 提供的 combineReducers 來(lái)替換原來(lái)的方法。
yarn add redux-immutable
使用：
它的合并是支持immutable對(duì)象合并：
import { combineReducers } from 'redux-immutable'
把所有的reducer數(shù)據(jù)轉(zhuǎn)換為immutable對(duì)象：
import {fromJS} from 'immutable'
const defaultState = fromJS({})
到此這篇關(guān)于React Immutable使用方法詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React Immutable內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React?組件權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了React?組件權(quán)限控制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React、Vue中key的作用詳解 (key的內(nèi)部原理解析)
key是虛擬DOM對(duì)象的標(biāo)識(shí),當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時(shí),Vue會(huì)根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM],本文給大家介紹React、Vue中key的作用詳解 (key的內(nèi)部原理解析),感興趣的朋友一起看看吧2023-10-10
如何不使用eject修改create-react-app的配置
許多剛開始接觸create-react-app框架的同學(xué)，不免都會(huì)有個(gè)疑問：如何在不執(zhí)行eject操作的同時(shí)，修改create-react-app的配置。2021-04-04
React antd tabs切換造成子組件重復(fù)刷新
這篇文章主要介紹了React antd tabs切換造成子組件重復(fù)刷新,需要的朋友可以參考下2021-04-04
這篇文章主要介紹了淺談React碰到v-if,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-11-11
使用React實(shí)現(xiàn)一個(gè)簡(jiǎn)單的待辦任務(wù)列表
這篇文章主要給大家介紹了使用React和Ant Design庫(kù)構(gòu)建的待辦任務(wù)列表應(yīng)用,它包含了可編輯的表格,用戶可以添加、編輯和完成任務(wù),以及保存任務(wù)列表數(shù)據(jù)到本地存儲(chǔ),文中有相關(guān)的代碼示例,需要的朋友可以參考下2023-08-08
React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案
這篇文章主要介紹了React中使用Echarts無(wú)法顯示title、tooltip等組件的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
redux持久化之redux-persist結(jié)合immutable使用問題
這篇文章主要為大家介紹了redux持久化之redux-persist結(jié)合immutable使用問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08