網(wǎng)站首頁 編程語言 正文
1. 介紹
假設(shè)當(dāng)前 redux 的大小為 1G，現(xiàn)在要修改 redux 樹中的某個(gè)節(jié)點(diǎn)（節(jié)點(diǎn)的大小很小），我們就需要深復(fù)制整棵 redux 樹，只為了修改很少的數(shù)據(jù)，這樣對(duì)于性能的損耗是非常大的。于是我們使用 Immutable 來對(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)是共享的，來減少內(nèi)存占用。
- 持久化數(shù)據(jù)結(jié)構(gòu)：這里說的持久化是用來描述一種數(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)共享來解決性能問題，當(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ù)制帶來的復(fù)雜度
- 節(jié)省內(nèi)存
- 歷史追溯性
缺點(diǎn)
- 需要重新學(xué)習(xí)api
- 容易與原生對(duì)象混淆：由于api與原生不同，混用的話容易出錯(cuò)
- 第3方組件庫不支持，使用時(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ì)象和父組件傳過來的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 來合并 reducer 并初始化 state ，redux 自帶的 combineReducers 只支持 state 是原生 js 形式的，所以需要使用 redux-immutable 提供的 combineReducers 來替換原來的方法。
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({})
原文鏈接：https://blog.csdn.net/weixin_45605541/article/details/127097299
相關(guān)推薦
- 2022-08-25 C語言淺析指針的使用_C 語言
- 2023-06-17 Python利用plotly繪制正二十面體詳解_python
- 2022-03-15 跨域報(bào)錯(cuò)：Response to preflight request doesn‘t pass ac
- 2023-07-14 express token的一個(gè)用法
- 2023-01-01 Pytest使用logging模塊寫日志的實(shí)例詳解_python
- 2023-07-05 全局配置cnpm淘寶鏡像
- 2023-02-18 減少react組件不必要的重新渲染實(shí)現(xiàn)方法_React
- 2022-09-03 利用python合并csv文件的方式實(shí)例_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速