React?Immutable使用方法詳細(xì)介紹
更新時間：2022年09月29日 09:12:32 作者：月光曬了很涼快
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用
1. 介紹
假設(shè)當(dāng)前 redux 的大小為 1G，現(xiàn)在要修改 redux 樹中的某個節(jié)點（節(jié)點的大小很小），我們就需要深復(fù)制整棵 redux 樹，只為了修改很少的數(shù)據(jù)，這樣對于性能的損耗是非常大的。于是我們使用 Immutable 來對這一現(xiàn)象進(jìn)行優(yōu)化，Immutable 只會深復(fù)制發(fā)生改變的節(jié)點及其祖先節(jié)點，然后修改后返回新數(shù)據(jù)。
Immutable.js 出自 Facebook，是非常流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用。
- 持久化數(shù)據(jù)結(jié)構(gòu)：這里說的持久化是用來描述一種數(shù)據(jù)結(jié)構(gòu)，指一個數(shù)據(jù)，在被修改時，仍然能夠保持修改前的狀態(tài)，即不可變類型。
- 結(jié)構(gòu)共享：Immutable 使用先進(jìn)的 tries (字典樹)技術(shù)實現(xiàn)結(jié)構(gòu)共享來解決性能問題，當(dāng)我們對一個 Immutable 對象進(jìn)行操作的時候， ImmutableJS 會只 clone 該節(jié)點以及它的祖先節(jié)點，其他保持不變，這樣可以共享相同的部分，大大提高性能。
- 惰性操作：創(chuàng)建的對象時其實代碼塊沒有被執(zhí)行，只是被聲明了，代碼在獲取或修改的時候才會實際被執(zhí)行
Immutable 的安裝：
yarn add immutable
2. 優(yōu)缺點
優(yōu)點
- 降低對象深復(fù)制帶來的復(fù)雜度
- 節(jié)省內(nèi)存
- 歷史追溯性
缺點
- 需要重新學(xué)習(xí)api
- 容易與原生對象混淆：由于api與原生不同，混用的話容易出錯
- 第3方組件庫不支持，使用時，還需要轉(zhuǎn)換
3. 對象處理
使用 Map 和 formJS 方法將 js 對象轉(zhuǎn)化為 immutable 對象，并獲取數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 是方法也是類型
// Map方法，可以把json對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象或數(shù)組，自動轉(zhuǎn)為對象的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)一層,這時候使用 fromJS 方法
const state1 = { id: 1, name: { username: '李四' } }
const imState1 = fromJS(state1)
console.log(imState)
console.log(imState1.get('name').get('username'))
// getIn 獨特寫法
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對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象或數(shù)組，自動轉(zhuǎn)為對象的immutable類型
import { Map, List, fromJS } from 'immutable'
// 修改數(shù)據(jù) set/setIn update/updateIn 修改數(shù)據(jù)后會返回一個新的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對象轉(zhuǎn)為js對象
// 這里能獲取新舊數(shù)據(jù),體現(xiàn)出 immutable 歷史可追溯的優(yōu)點
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對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象或數(shù)組，自動轉(zhuǎn)為對象的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對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象或數(shù)組，自動轉(zhuǎn)為對象的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ù)組處理
查看長度和獲取數(shù)據(jù)：
import React, { Component } from 'react'
// Map, List 方法也是類似
// Map方法，可以把json對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象可數(shù)組，自動轉(zhuǎn)為對象的immutable類型
import { Map, List, fromJS } from 'immutable'
// ------------ 數(shù)組轉(zhuǎn)為List
// { name: '張三' } 轉(zhuǎn)為了map
const state = [1, 2, { name: '張三' }]
const imState = fromJS(state)
// 查看當(dā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對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象可數(shù)組，自動轉(zhuǎn)為對象的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個元素修改為10
const newImState1 = imState.set(0, 10)
console.log(newImState1.toJS())
// 把第2個元素中的arr中的第0個改為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對象第1層轉(zhuǎn)為immutable對象中的Map類型
// List方法，可以把數(shù)組第1層轉(zhuǎn)為 immutable對象中的List類型
// fromJS方法，可以自動遞歸所以有對象可數(shù)組，自動轉(zhuǎn)為對象的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 中有一個 is 方法，可以比較兩個immutable對象值是否一致,如果一致則返回true 否則為false。
import React, { Component } from 'react'
import _ from 'lodash'
// is 比較兩個immutable對象值是否一致,如果一致則返回true 否則為false
import { Map, List, fromJS, is } from 'immutable'
// 比較兩個對象的值是否一樣
// const obj1 = { id: 1 }
// const obj2 = { id: 1 }
// 我們知道這種情況下，輸出一定為 false，如何只比較值該怎么做？
// console.log(obj1 == obj2)
// console.log(obj1 === obj2)
// 方案1：值它是一樣的 使用此方法,它會進(jìn)行值的比對,如果對象它的層級深,比對的速度就慢
// 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利用這個方法，我們可以優(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 />
{/* 此時子組件不會渲染 */}
{/* <button onClick={() => this.setState({ user: { num: 100 } })}>+++++</button> */}
{/* 此時子組件會重新渲染 */}
<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對象和父組件傳過來的props對象不一致，則更新子組件，否則子組件不更新
// 這樣可以優(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 來合并 reducer 并初始化 state ，redux 自帶的 combineReducers 只支持 state 是原生 js 形式的，所以需要使用 redux-immutable 提供的 combineReducers 來替換原來的方法。
yarn add redux-immutable
使用：
它的合并是支持immutable對象合并：
import { combineReducers } from 'redux-immutable'
把所有的reducer數(shù)據(jù)轉(zhuǎn)換為immutable對象：
import {fromJS} from 'immutable'
const defaultState = fromJS({})
到此這篇關(guān)于React Immutable使用方法詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React Immutable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react如何獲取URL中參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
react循環(huán)數(shù)據(jù)(列表)的實現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過程源碼2022-11-11
npx create-react-app xxx創(chuàng)建項目報錯的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項目報錯的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了React18?中的?Suspense?API使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12