# mutated

> quite the opposite of immutable

Latest version **0.0.15** (published 2019-09-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install mutated
pnpm add mutated
yarn add mutated
bun add mutated
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2019-09-29 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yue Marvin Tao |
| Maintainers | marvintau |

## Links

- npm: https://www.npmjs.com/package/mutated
- Repository: https://github.com/marvintau/mutated
- Homepage: https://github.com/marvintau/mutated#readme
- Issues: https://github.com/marvintau/mutated/issues
- npm.io page: https://npm.io/package/mutated

## Recent versions

- 0.0.15 (latest) — 2019-09-29
- 0.0.14 — 2019-09-26
- 0.0.13 — 2019-09-26
- 0.0.12 — 2019-09-25
- 0.0.11 — 2019-09-25
- 0.0.10 — 2019-09-24
- 0.0.9 — 2019-09-24
- 0.0.8 — 2019-09-24
- 0.0.7 — 2019-09-24
- 0.0.6 — 2019-09-23
- 0.0.5 — 2019-09-23
- 0.0.4 — 2019-09-23
- 0.0.3 — 2019-09-23
- 0.0.2 — 2019-09-23
- 0.0.1 — 2019-09-23

## README

# mutated

一个十分简单的用于数据汇总，以及作为React状态的库。并且需要注意，它是明目张胆anti-pattern的。

以下是写这个库的动机

**Model和View分离的粒度**

按照React目前流行的开发方式，所有的状态都被汇总到一个redux-store里。对数据的更新是通过一级级的reducer函数逐步从最子层的调用传递到最高层去。
这种方法本质上是构造了一个高阶函数，有些curry function的意味。如果不使用redux，我们还可以使用其他的数据结构的库，
例如immutable.js/cortex.js，它们内部通过一些机制，使得状态被更新总保证是创建了一个新的对象。但是无论是多复杂的数据结构，
你都需要在单独维护数据结构的那个component中调用处理数据的方法。

从代码写作的角度，这点很像关注点分离的思路，例如CSS/JS/HTML的分离，M和V的分离。然而这样做却使得组件的复用性很差。不同层级的组件不得不去传递和它们
自己不相关的数据处理方法。

想象我们在开发一个表格应用。位于最上层的Provider提供了对表格数据处理的方法，那么Provider要把行、列、单元格的方法先传递给工作表组件，工作表传递给行组件之后，
行组件再把列、单元格的处理方法传递给列组件。也就是说这些组件要传递大量与自己的逻辑无关的操作，这极大降低了复用性。

那么一个更好的思路是，每个层次的组件只关心对应层次的数据处理方法。本层次的数据作为状态来更新，而这些数据的子一级数据则被作为属性传递给子一级的组件。
当然，表面上看这很不错，但其实这是React非常不鼓励的方式。这意味着数据的双向绑定，违背了React的设计初衷。（不过事情也在起着变化，稍后会说明）

**没有一个既能作为组件状态，又方便进行数据处理的库**

从数据库抓来的JSON是由Array和Object构成，我想进行数据处理要先装个lodash。但是lodash很多时候不满足immutable的条件，
所以我需要再装一个immutable.js。那么能否存在一个库，既能灵活地处理数据，又能满足作为React状态的条件呢？

## 我们如何实现数据的双向更新？

所谓的双向更新，指的是一个组件在两种情况下会重新渲染。第一种是state，也就是内部状态发生改变，这是最常用的。
第二种是props，也就是上一级所传递的属性发生改变，这是不鼓励的。

可以影响到React的rendering的机制，目前有三个。第一个是最熟悉的setState。setState是react渲染生命周期的开始。
它向队列里提交了一个重新渲染的请求。React的reconcilation机制会判断如何最小代价修改相应的DOM并进行重绘，来满足状态被改变的效果。
第三个是forceUpdate，它会破坏渲染周期并无条件地刷新组件，我们的底线是不是用forceUpdate。

所以问题归结到了第二个方法，也就是在React 16之后出现的，getDerivedStateFromProps(props, state), gDSFP。

---
_Source: https://npm.io/package/mutated · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._