关于最佳实践的问题：React Native 的不变性和重新渲染

Posted 2023-02-19

【中文标题】关于最佳实践的问题：React Native 的不变性和重新渲染

【英文标题】：Question on Best practices: Immutability and re-rendering with React Native

【发布时间】：2021-12-21 20:36:03

【问题描述】：

我创建了一个不可变映射，目前正在将它与 redux 一起使用，我对不可变性有一些一般性问题。据我了解，当将道具传递给组件时，道具会进行初始渲染。如果 prop 的值发生更改，它不会重新渲染，因为 javascript 正在执行 === 操作来检查内存地址，而不是检查该内存的值。不变性所做的是更改内存中的地址以触发重新渲染。我现在担心的是：如果我打算从不使用存储在内存中旧地址中的映射，我们不是在浪费内存资源吗？此外，如果用户单击不可变地图时重复执行此操作，会越来越多地扩展其内存使用量，这不会导致性能问题吗？有没有办法在创建新地址后删除内存中的旧地址？ 这是我的一些 Redux 代码，如果你能指出我是否做错了什么：

import Map from 'immutable'
const likesAndSaved = new Map()

function likesAndSavedReducer(state = likesAndSaved, action) 
  switch (action.type) 
    case 'updateObj':
      return state.set(action.payloadId, action.payloadData)
  
  default:
    return state;
 

【问题讨论】：

请记住，React 是您在其之上构建的框架，它从头开始构建以处理这些问题。你不是自己检查相等性或管理内存中的对象或创建阴影树和优化 UI 绘制，React 是。这就是为什么响应式编程和不可变对象是 React 中的（非反）模式。

还要考虑人类点击赞按钮的速度，以及创建新对象和垃圾清扫旧对象的计算机速度。一个是秒数量级，一个是微秒。

谢谢我开始意识到我真的想多了这个问题

【参考方案1】：

垃圾收集器从内存中删除未引用的对象。这也适用于 Immutable.js 映射中的“旧值”。

引用immutable-js.com的介绍页：

这些数据结构在现代 JavaScript 虚拟机上非常高效 通过 Clojure 和 Scala 推广的 hash maps tries 和 vector tries 使用结构共享，最大限度地减少 复制或缓存数据。

当您构建一个包含 1000 个条目的 Map，然后更改一个条目时，这种类型的数据结构不必复制所有这些引用和/或值。相反，它只需要扩展 trie 的一小部分。因此，即使您保留对旧状态和新状态的引用，内存使用量的增加也将是最小的。当您清除对一个（例如旧）状态的引用时，javascript VM 可以随时清除该内存。

您甚至可能获得性能，因为使用=== 的浅层检查属性现在足以确定更改。您现在可以安全地使用PureComponent。无需深入分析对象以确定数据是否实际发生了变化。

免责声明：我是 Immutable.js 维护团队的一员，并且在大型应用程序中大量使用它。