Proxy的不可变数据优点及使用介绍

本是古典何须时尚 2024-03-24 21:31 79阅读 0赞

![981d54b87edb69ae63f65da0966ec7c5.jpeg][]

本文主要为大家介绍了Proxy的不可变数据优点及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助。

### 可变数据 ###

*  对象被赋值后，更改对象，两个都会改变，因为其引用着相同的地址，我们称这为可变对象
 *  所以这会造成意想不到的修改
 *  React 要求本地组件的状态保持不可变性，Redux 同样要求全局状态保持不可变

### 不可变数据（Immutable Data） ###

*  Immutable.js 中 对 Immutable 对象 增删改查都会返回一个全新的 Immutable 对象，保证旧数据的可用不变
 *  Immutable 使用了结构共享，即对象树中的节点改变只会影响自己和其父节点，其他节点共享

#### 优点 ####

*  保护数据意外更改，减少bug
 *  方便跟踪数据变更，便于排错

#### 实现一：独立方法 ####

*  调用麻烦

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>function</code> <code>updateData(obj, key, value) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>...obj,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>[key]: value</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>const obj = { </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>"云牧"</code> <code>};</code> <code>const newObj = updateData(obj, </code><code>"name"</code><code>, </code><code>"黛玉"</code><code>);</code> <code>console.log(newObj); </code><code>// { name: '黛玉' }</code> <code>console.log(obj); </code><code>// { name: '云牧' }</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 实现二：自定义对象 ####

*  自定义新的对象类型，对其操作细节封装在其内部
 *  著名的 `immutable-js`，就是这个思路，定义了`List`、 `Stack`、 `Map`、`OrderedMap`、`Set`、`OrderedSet` 和 `Record`这么多对象

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>class MyObject { </code> <code>&nbsp;&nbsp;</code><code>constructor(obj = {}) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.obj = { ...obj };</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>get(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.obj[name];</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>set(name, value) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>new</code> <code>MyObject({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>...</code><code>this</code><code>.obj,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>[name]: value</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const obj = </code><code>new</code> <code>MyObject({ </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>"云牧"</code> <code>});</code> <code>const newObj = obj.set(</code><code>"name"</code><code>, </code><code>"黛玉"</code><code>);</code> <code>console.log(newObj); </code><code>// MyObject { obj: { name: '黛玉' } }</code> <code>console.log(obj); </code><code>// MyObject { obj: { name: '云牧' } }</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 实现三：函数 + 复制 ####

*  函数调用产生新对象，对其新对象操作之后返回
 *  性能损耗比较大

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>function</code> <code>produce(obj, recipe) { </code> <code>&nbsp;&nbsp;</code><code>const newObj = { ...obj };</code> <code>&nbsp;&nbsp;</code><code>recipe(newObj);</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>newObj;</code> <code>}</code> <code>const obj = { </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>"云牧"</code> <code>};</code> <code>const newObj = produce(obj, draft =&gt; { </code> <code>&nbsp;&nbsp;</code><code>draft.name = </code><code>"黛玉"</code><code>;</code> <code>});</code> <code>console.log(newObj); </code><code>// { name: '黛玉' }</code> <code>console.log(obj); </code><code>// { name: '云牧' }</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 实现四：Proxy代理 ####

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 </td> 
 <td> <code>function</code> <code>produce(obj, recipe) { </code> <code>&nbsp;&nbsp;</code><code>const state = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>base: obj, </code><code>// 基础对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>copy: {}, </code><code>// 被更改后的对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>draft: {}, </code><code>// 代理对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>currentKey: 0 </code><code>// 当前操作的key</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>const handlerItem = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>get(target, property, receiver) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 如果更改后的对象存在则使用copy</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(state.copy[state.currentKey]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>state.copy[state.currentKey][property];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>state.base[state.currentKey][property];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>set(target, property, value, receiver) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Reflect.set(state.copy[state.currentKey], property, value);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>const handler = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>get(target, property, receiver) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>state.currentKey = property;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(!state.draft[property]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const val = { ...state.base[property] };</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const proxy = </code><code>new</code> <code>Proxy(val, handlerItem);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>state.draft[property] = proxy;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>state.copy[property] = val;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>state.draft[property];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>set(target, property, value, receiver) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>Reflect.set(state.copy, property, value);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>const proxyObj = </code><code>new</code> <code>Proxy(obj, handler);</code> <code>&nbsp;&nbsp;</code><code>recipe(proxyObj);</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>proxyObj;</code> <code>}</code> <code>const arrObj = Array.from({ length: 100 }, (v, index) =&gt; ({ name: </code><code>"云牧"</code> <code>+ index }));</code> <code>const newObj = produce(arrObj, draft =&gt; { </code> <code>&nbsp;&nbsp;</code><code>draft[50].name = </code><code>"黛玉"</code><code>;</code> <code>});</code> <code>console.log(newObj[50].name); </code><code>// 黛玉</code> <code>console.log(arrObj[50].name); </code><code>// 云牧50</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 实现五：第三方不可变对象 ####

*  JS没有不可变结构，我们一般可以使用 `Immutable.js` 和 `immerjs`
 *  `Immutable.js` 需要学习他的数据格式操作，且其不可变数据需要 `toJS` 才能得到原生对象，心智负担大
 *  `immerjs` 则没有这方面的问题，且体积更为小巧
 *

以上就是Proxy的不可变数据优点及使用详解的详细内容，希望可以帮到你！

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[981d54b87edb69ae63f65da0966ec7c5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/37520315a4614326a6c25cb19b6ed5d0.png
[Link 1]: https://www.weidianyuedu.com