本文介绍不可变数据类型`ImmutableJS`和`ImmerJS`的基本用法，以及它们在React项目中的使用。



# 背景： 为什会有immutable?
> 在JavaScript中有引用类型和基本类型。
> - 如果 变量a是基本类型，将a赋值给变量b，再修改b的值，则变量a不受影响
> - 如果 变量a是引用类型，将a赋值给变量b， 则b与a是同一个对象的引用，若修改b对象的属性，a对象的该属性也会跟着变化。<br><br>
> 解决方案就是深拷贝，比如最简单的方式`JSON.parse(JSON.stringify(obj))`。
> - 但是深拷贝这种方式比较耗费性能（空间和时间），有没有折中的方案呢？ 即修改b的同时不影响a，且比深拷贝节省性能。
> - 所以有了immutable.js，简单说就是按需深拷贝。
> - 此外还有一个重要原因，开发中经常遇到函数带有副作用，副作用的函数修改了一个引用类型某个属性的值或者浅copy的问题，immutable为此类问题提供了一种优雅的解决方案。

# 什么是immutable?

- `Immutable Data` 就是一旦创建，就不能再被更改的数据
- 对 `Immutable` 对象的任何修改或添加删除操作都会返回一个新的 `Immutable` 对象；
- `Immutable` 实现的原理是 `Persistent Data Structure`（**持久化数据结构**）：**也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变**。同时为了避免 `deepCopy` 把所有节点都复制一遍带来的性能损耗，`Immutable` 使用了 `Structural Sharing`（**结构共享**），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

<img src='https://blog.warmplace.cn/static/img/2b4c801a7b40eefcd4ee6767fb984fdf.a.gif' width=400>

# immutable.js
`immutable`是Javascript中不可变的集合<br />[官网](https://immutable-js.com/)

Facebook 工程师 `Lee Byron` 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 `Persistent Data Structure`，还有很多易用的数据类型。像 `Collection、List`、`Map`、`Set`、`Record`、`Seq`。有非常全面的`map`、`filter`、`groupBy`、`reduce`、`find`函数式操作方法。同时 `API` 也尽量与 `Object` 或 `Array` 类似。
```javascript
// 原来的写法
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b);  // 打印 2
console.log(foo === bar);  //  打印 true

// 使用 immutable.js 后
import Immutable from 'immutable';
var foo = Immutable.fromJS({a: {b: 1}});
var bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值，打印 1
// 等价于 foo.getIn(['a']).getIn(['b'])
console.log(foo === bar);  //  打印 false
```
# 快速入门API
笔者没有找关于immutable相关能够通俗易懂快速上手的中文文档，无奈只能自己阅读官方文档，以下内容是笔者基于官方文档整理的自己的总结
```javascript
// 前面提到为了消除引用类型及浅拷贝的副作用，引入了immutable概念
// 但是深拷贝这种方式比较耗费性能
// 因此寻找一种既能避免副作用又节省开销的方式--结构共享
// 没有immutable.js我们可能采用下面的方式避免副作用
var a = {b:'B',c:{d:1}};

var b = Object.assign({}, a);
b.b = 'new val bbb';

console.log(b.b)	// 'new val bbb'
console.log(a.b); // 仍旧为 'B'
console.log(a.c === b.c); // true

// 显然 7，8行代码书写起来不方面，
// 如果a.b也是引用类型，还对a.b 重复进行上述两部操作
```
然而 `immutable.js` 的使用有一定的上手成本，它自定义了一些数据结构
## Map类型
```javascript
// 如果是对象类型，在immutable中使用 Map
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: [1,2] });
// 修改原对象的属性会产生一个新对象， 原对象保持不变
const map2 = map1.set('b', 50); 

// 使用 .equals 方法比较
console.log(map1.equals(map2)); // false
// 取值 .get
console.log(map1.get('b'), map2.get('b')); // 2, 50
console.log(map1.get('c') === map2.get('c')); // true， c没有改变
```

## 不可变类型比较
引用类型的比较是基于引用地址，而不可变对象的比较是基于集合的值是否一一相同
```javascript
const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = Map({ a: 1, b: 2, c: 3 });
map1.equals(map2); // true 
// Immutable.is(map1, map2); // true
map1 === map2; // false

const map3 = map2.set('b', 2);
map3 === map2; // true

// 如果一个对象是不可变的，
// 则可以简单地通过对它进行另一个引用而不是复制整个对象来“复制”它。
// 因为这可以节省内存并潜在地提高依赖副本的程序的执行速度（例如撤消堆栈）。
```
补充： 不可变对象的比较是基于值，算法复杂度$O(N)$, 而引用类型比较算法复杂度 $O(1)$ , 因此使用时要考虑性能权衡。

## JavaScript优先的API
Immutable.js 具有一个与 ES2015 Array、Map 和 Set 非常相似的面向对象的 API。

| JavaScript | immutable |
| --- | --- |
| Map | Map |
| Set | Set |
| Array | List |
| Object | fromJS or Map |

```javascript
const { Map, List } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3, d: 4 });
const map2 = Map({ c: 10, a: 20, t: 30 });
const obj = { d: 100, o: 200, g: 300 };
const map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }
const list1 = List([1, 2, 3]);
const list2 = List([4, 5, 6]);
const array = [7, 8, 9];
const list3 = list1.concat(list2, array);

// 从上面的示例可以看出 
// 1. 与JS API靠拢 如 Array.prototype.concat
// 2. api可以与JS对象互相操作


// 所有 Immutable.js 集合都是可迭代的
const { List } = require('immutable');
const aList = List([1, 2, 3]);
const anArray = [0, ...aList, 4, 5]; // [ 0, 1, 2, 3, 4, 5 ]
```
## 嵌套结构
```javascript
// 嵌套结构
const { fromJS } = require('immutable');
const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
console.log(typeof nested.toJS()); // 'object'


const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
// nested2  { a: { b: { c: [3, 4, 5] }, d: 6 } }

console.log(nested2.getIn(['a', 'b', 'd'])); // 6
console.log(nested2.getIn(['a']).getIn(['b', 'd'])); // 6

const nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
console.log(nested3);
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }

const nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }
```
## 批处理突变
默认情况下`immutable.js`中的`api`每执行一次就会返回一个新的`immutable`对象<br />
那么如果我只需要最后生成的`immutable`对象，中间的对象都不要，可不可以只返回新一个新对象呢？<br />
这就用到了 `withMutations` ，批量处理节省开销，目前只有少数方法 `set`、`push`、`pop` 可直接应用于持久化数据结构
```javascript
const { List } = require('immutable');
const list1 = List([1, 2, 3]);
const list2 = list1.withMutations(function (list) {
  list.push(4).push(5).push(6);
});
console.log(list1.size); // 3
console.log(list2.size); // 6
```

## 惰性序列
```javascript
const { Seq } = require('immutable');
const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  .filter(x => {
      console.log('filter', x)
    return x % 2 !== 0
  })
  .map(x => x * x);
// 因为oddSquares是一个immutable对象，是惰性执行的，上述代码不会做任何操作

// 当把immutable对象转换成 JavaScript 对象是 才会执行
console.log(oddSquares.toJS()); // 控制台打印了 ‘filter’


// Range 是一种特殊的 Lazy 序列。
const { Range } = require('immutable');
const a = Range(990, 1010)
//   .skip(100)
  .map(n => {
      console.log(n)
      return -n;
  })
  .reduce((r, n) => r * n, 1);

console.log('---', a) // --- 9.897178826145609e+59
```

## cursor
由于 Immutable 数据一般嵌套非常深，为了便于访问深层数据，Cursor 提供了可以直接访问这个深层数据的引用。
```javascript
import Immutable from 'immutable';
import Cursor from 'immutable/contrib/cursor';

let data = Immutable.fromJS({ a: { b: { c: 1 } } });
// 让 cursor 指向 { c: 1 }
let cursor = Cursor.from(data, ['a', 'b'], newData => {
  // 当 cursor 或其子 cursor 执行 update 时调用
  console.log(newData);
});

cursor.get('c'); // 1
cursor = cursor.update('c', x => x + 1);
cursor.get('c'); // 2
```
## 优点
1. 降低了mutable带来的复杂性
```javascript
function touchAndLog(touchFn) {
  let data = { key: 'value' };
  touchFn(data);
  console.log(data.key);
  // 因为不知道touchFn进行了什么操作，所以无法预料，但使用immutable，肯定是value
}
```

2. 节省内存
会尽量复用内存，甚至以前使用的对象也可以再次被复用。没有被引用的对象会被垃圾回收。
```javascript
import { Map} from 'immutable';
let a = Map({
  select: 'users',
  filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');

a === b; // false
a.get('filter') === b.get('filter'); // true
```

3. `Undo/Redo`，`Copy/Paste`<br />
因为每次数据都是不一样的，所有可以存储在数组里，想回退到哪里就拿出对应数据即可

## 缺点
1. 需要学习新的API
2. 容易与原生对象混淆
   1. 虽然 `Immutable.js` 尽量尝试把 `API` 设计的原生对象类似，有的时候还是很难区别到底是 `Immutable` 对象还是原生对象，容易混淆操作。
   2. `Immutable` 中的 `Map` 和 `List` 虽对应原生 `Object` 和 `Array`，但操作非常不同，比如你要用 `map.get('key')` 而不是 `map.key`，`array.get(0)` 而不是 `array[0]`。另外 `Immutable` 每次修改都会返回新对象，也很容易忘记赋值；
   3. 当使用外部库的时候，一般需要使用原生对象，也很容易忘记转换。

下面给出一些办法来避免类似问题发生：

1. 使用`TypeScript` 这类有静态类型检查的工具；
2. 约定变量命名规则：如所有 `Immutable` 类型对象以 `$$` 开头；
3. 使用 `Immutable.fromJS` 而不是 `Immutable.Map` 或 `Immutable.List` 来创建对象，这样可以避免 `Immutable` 和原生对象间的混用；

## 使用immutable.js优化react
1. React可以使用 `shouldComponentUpdate()`进行性能优化，但它默认返回 `true`，即始终会执行 `render()` 方法，然后做 `Virtual DOM` 比较，并得出是否需要做真实 `DOM` 更新；
2. 可以在`shouldComponentUpdate` 周期里执行`deepCopy` 和 `deepCompare` 避免无意义的`render`，但`deepFn`也很耗时；
```javascript
import { is } from 'immutable';
shouldComponentUpdate: (nextProps = {}, nextState = {}) => {
  const thisProps = this.props || {}, thisState = this.state || {};

  if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
    return true;
  }

  for (const key in nextProps) {
    if (!is(thisProps[key], nextProps[key])) {
      return true;
    }
  }

  for (const key in nextState) {
    if (thisState[key] !== nextState[key] && !is(thisState[key], nextState[key])) {
      return true;
    }
  }
  return false;
}
```

# immer
[官方文档](https://immerjs.github.io/immer/zh-CN/)

对于处理修改引用类型副作用问题，ImmutableJS 有两个较大的不足：
1. 需要使用者学习它的数据结构操作方式，没有 Immer 提供的使用原生对象的操作方式简单、易用；
2. 它的操作结果需要通过toJS方法才能得到原生对象，这使得在操作一个对象的时候，时刻要知道操作的是原生对象还是 ImmutableJS 的返回结果，稍不注意，就会产生问题；
```javascript
let currentState = {
    x:[2]
}
  
let o1 = currentState;
o1.a = 1;
  
let o2 = {
    ...currentState
};
o2.x.push(3); 
console.log(currentState) // { x: [ 2, 3 ], a: 1 }


/* 使用immer解决上述问题 */
import produce from 'immer';
let state = {
    x:[2]
}
let obj1 = produce(state, draft => {
  draft.a = 1;
});
let obj2 = produce(state, draft => {
    draft.x.push(3);
});
// { x: [ 2 ] }     { x: [ 2 ], a: 1 }      { x: [ 2, 3 ] }
console.log(state, obj1, obj2);

// produce方法做了哪些事情？
// 遍历原始对象，依次冻各个属性。
```
## 概念说明
`produce(currentState, recipe: (draftState) => void | draftState, ?PatchListener): nextState`

- `currentState`：被操作对象的最初状态
- `draftState`：根据 `currentState` 生成的草稿状态，它是 `currentState` 的代理，对 `draftState` 所做的任何修改都将被记录并用于生成 `nextState` 。在此过程中，`currentState` 将不受影响
- `nextState`：根据 `draftState` 生成的最终状态
- `produce`：用来生成 `nextState` 或 `producer` 的函数
- `producer`：通过 `produce` 生成，用来生产 `nextState` ，每次执行相同的操作
- `recipe`：用来操作 `draftState` 的函数

## 使用immer优化react
```javascript
// 原写法 setState
const { members } = this.state;
this.setState({
  members: [
    {
      ...members[0],
      age: members[0].age + 1,
    },
    ...members.slice(1),
  ]
})

// 现在写法 
const { members } = this.state;
this.setState(this.setState(produce(members, draft => {
  draft.members[0].age++;
})))
```
## reduce中使用immer
```javascript
// produce 内的 recipe 回调函数的第2个参数与obj对象是指向同一块内存
function reducer (state = {name: '章三', age: 12}, action) {
    return immer.produce(state, (draft) => {
        switch(action.type) {
            case 'ADD':
                draft.age++;
                return
            default: 
                return;
        }
    })
}

const store = Redux.createStore(reducer);
class App extends React.Component {
    componentDidMount() {
        store.subscribe(() => {
            this.forceUpdate();
        })
    }
    render() {
        const state = store.getState();
        return <div>
            <p>{state.name}今年{state.age}周岁</p>
            <button onClick={() => store.dispatch({type: 'ADD'})}>过生日</button>
        </div>
    }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
```
完整案例  [redux-immer.html](https://github.com/guojingwen/frontend-project/blob/main/react_study/6.immutable_immer/3.redux-immer.html)

Immutable、Immer不可变数据类型

个人学习笔记，按照官方案例自己跑了一遍`react-router`。通过类比`vue-router` 写了一些总结， 所以不是很推荐阅读。 建议读者也跟着官方案例走一遍。


# 简介
[官方文档](https://reactrouter.com/en/main)

- `react-router`包含3个库，`react-router`、`react-router-dom`和`react-router-native`。
- `react-router-dom`(浏览器) 和 `react-router-native`（RN） 都依赖`react-router`，所以在安装时，`react-router`也会⾃动安装。
- `react-router-dom` v6与v5发生了不兼容性的变更
   - v5版本奉行**⼀切皆组件的思想。**路由器-Router、链接-Link、路由-Route、独占-Switch、重定向-Redirect都以组件形式存在
   - v6 对v5做了些不兼容的变更，还提供了类似vue-router配置化的方式
   - `react-router`官方文档老是提到[@reach/router](https://reach.tech/router/) 后者v2版本已经合并到了`react-router@6`

# 快速入门
推荐看这篇：[**官方教程*一个通讯录的增删改查的小应用**](https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md)，我按照官方教程自己撸了一遍，[**代码点击这里**](https://github.com/guojingwen/frontend-project/tree/main/react_study/7.router-office-v6)，这里简单做一些总结，加强一下记忆，由于本人多年来都是使用`Vue`搬砖，掌握`react-router`最快的方式是类比`vue-router`

1. 先来看一下框架

![image.png](/static/img/28e56bfa8bf886a7e78f0a0e72637168.image.webp)
- `vue-router` 3与4 的语法糖的异同
    - 引入时有些差异，里层路由的配置基本一样
    - 版本4 提供了两个钩子`useRoute`和`useRouter`等价于`this.$route`和 `this.$router`
    - 版本4 完全仍旧可以使用`OptionsAPI`
- `react-router`最新版本是6，本文主要是探讨6版本的语法糖，最后在补充一些`react-router`@6与5版本的区别。

2. 再来看一下内核配置，我们来写一个嵌套路由和动态路由的示例
![image.png](https://blog.warmplace.cn/static/img/7fc5ae1cda6153a8afc8e410dbc1a194.image.webp)
- `react-router` 的`element` 对应 `vue-router`的`compoent`
- 嵌套路由, `vue`还需要在父路由页面模板中放置`<router-view/>`
- 动态路由，`vue`通过 `$route.params` or `useRoute()`取值，`react`这边还需要配置`loader({params})`，通过`params`取值
- `loader`除获取路由参数，还可以做一些额外的事情，`vue-router`中没有`loader`的概念，可以用`beforeMout`或`create`模拟实现，然而`vue-router`中的`meta`字段，`react-router`也是要模拟

3. 再来看一下错误页面(也就404页面)的示例

![image.png](https://blog.warmplace.cn/static/img/fa312773c55ea09396930e9dbac8ea26.image.webp)

- `react-router`中只要遇到错误就渲染`errorElement`，vue中需要模拟实现，1）模拟不存在的路由，2）使用 `try...catch` 或 `errorHandler` 捕捉错误然后重定向到错误页面或渲染错误组件
- 默认页面 
   - `react-router` `{ index: true, element: <Index/> },`
   - `vue-router` 使用 `v-if`/`v-else` + `<router-view/>`方式模拟
4. `Form` 和 `action`  
   - 用于路由跳转和动作派发，可类比 vue的API跳转和路由守卫，
   - `react-router`把一些`form`的事情（表单提交、搜索）和路由做了挂钩，并提供了一些组件和钩子
- 组件有 `Form`、`NavLink`、`Outlet`
- 钩子 `useLoaderData`、`useFetcher`
> 在Vue中有路由守卫的概念:
> 1. 导航被触发
> 2. 在失活组件调用beforeRouteLeave守卫
> 3. 调用全局的beforeEach守卫
> 4. 再重用的组件调用beforeRouteUpdate
> 5. 在路由配置里调用beforeEnter
> 6. 解析异步路由组件
> 7. 在激活的组件中调用beforeRouteEnter
> 8. 调用全局的beforeResolve
> 9. 导航被确认
> 10. 调用全局的afterEach钩子
> 11. 触发DOM更新
> 12. 调用beforeRouteEnter守卫中传给next的回调函数

`react-router`没有路由守卫的概念，`loader+action`可以模拟这些行为

5. 其它一些可以对标的点 `react-touter`   	`vs` 	`vue-router`
   - `<Outlet/>`				-				`<router-view>`	
   - `<NavLink/>`				-				`<router-link>`
   - `redirect`				-				`$router.replace` 或路由表里配置 `redirect`
   - `useNavigation`			- 				`$router.go`、`$router.push`
   - `submit`					- 				`$router.replace `、`$router.push`
   
# JSX Routes 与 options Routes

![image.png](https://blog.warmplace.cn/static/img/7c2b94153692c8a6b5038f7f66957028.image.webp)

# React-router@5升级到6
[官方文档](https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md)

React-router学习笔记

React组件化技术

本文梳理React状态管理的一些方案，包括以下内容
1. `Context`用法
2. `redux`使用和简易实现
3. `mobx`介绍



> 使用React开发一个页面，我们通常将一个页面划分若干个区域（这些区域存在嵌套关系，一个父区域可能包含多个子区域）。每个区域对应一个组件，每个组件可能有一些状态。
> - 只属于该组件的状态用`state`表示
> - 兄弟组件之间的状态需要提取到父组件中，用`state`表示，使用`props`向下传递
> - 不同层级组件之间的状态，如果提取到祖先组件的`state`中，`props`往下传递会非常冗肿，`React`官方提供了`Context`方案，解决跨组件通信问题。

# Context
> [官方context使用](https://react.docschina.org/docs/context.html)  [redux中文文档](https://www.redux.org.cn/)

**`Context`提供了一个无需为每层组件手动添加 `props`，就能在组件树间进行数据传递的方法。**

**何时使用`Context`**<br>
`Context` 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

**使用`Context`之前的考虑**<br>
`Context`主要应用场景在于**很多不同层级的组件需要访问同样一些的数据**。请谨慎使用，因为这会使得组件的复用性变差。<br>
**如果你只是想避免层层传递一些属性，[组件组合（component composition）](https://react.docschina.org/docs/composition-vs-inheritance.html)有时候是一个比 context 更好的解决方案。**

## 基本使用
官方给了一个`theme`案例，非常清晰，这里为了讲下面的内容还是把代码贴出来
```jsx
import React from "react";
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
export default class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “yellow” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="yellow">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “yellow”。
  static contextType = ThemeContext; // 固定写法，感觉像hack
  render() {
    return <button style={{backgroundColor: this.context}}>ThemedButton</button>;
  }
}

// 使用context步骤
// 1. 创建 createContext
// 2. Provider接收value，以保证有传下去的数据
// 3. 接收 Consumer或者class.contextType
```
上述案例有个梗，
`static contextType = ThemeContext;`注入` this.context`获取，这是react的固定写法
该方式并不适用Function组件。

## Function组件如何使用？

修改`ThemedButton`为`function`
```jsx
function ThemedButton() {
  let bgColor = React.useContext(ThemeContext);
  return <button style={{backgroundColor: bgColor}}>
      ThemedButton
  </button>;
}
```

## 多个context使用案例
用户信息和主题色是项目中常用的两个全局状态
```jsx
const ThemeContext = React.createContext('light');
const PersonContext = React.createContext('XXX');
function Ancestor() {
    const [color, setColor] = React.useState('yellow');
    const [person, setPerson] = React.useState({name: 'zs', age: 12})

    return <ThemeContext.Provider value={color}>
        <button onClick={() => setColor(color === 'yellow' ? 'blue' : 'yellow')}>修改颜色</button>
        <button onClick={() => setPerson(Object.assign({}, person, {
            name: person.name === 'zs' ? 'ls' : 'zs'
        }))}>修改Person</button>

        <PersonContext.Provider value={person}>
            <Parent></Parent>
        </PersonContext.Provider>
    </ThemeContext.Provider>
}
function Parent() {
    return <Child/>
}
class Child extends React.Component {
    render() {
        return (
        <div>
            <h3>MultiContextUse</h3>
            <ThemeContext.Consumer>
            {theme => (
                <PersonContext.Consumer>
                {user => <div style={{backgroundColor: theme}}>{user.name}</div>}
                </PersonContext.Consumer>
            )}
            </ThemeContext.Consumer>
        </div>
        );
    }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Ancestor/>);
```
多个`context`使用 通过`Context.Consumer`标签来接收内容，符合`JSX`语法。

> 注意事项
> - 要把value 状态提升到父节点的 state里面 [原因](https://react.docschina.org/docs/context.html#caveats)

## 总结
在`React`的官方文档中， `Context` 被归类为高级部分，属于React的⾼级API，但官⽅并不建议在稳定版的App中使用Context。
不过，这并非意味着我们不需要关注 Context 。
事实上，很多优秀的React组件都通过Context来完成⾃己的功能，

- ⽐如`react-redux`的`<Provider />`，就是通过`Context`提供一个全局态的`store`，
- 路由组件`react-router`通过 `Context` 管理路由状态等。

在React组件开发中，如果用好 Context ，可以让你的组件变得强⼤，而且灵活。
> 函数组件中可以通过useContext引⼊上下文。

															
# redux
redux是JavaScript应⽤的状态容器。它保证程序⾏为⼀致性 且易于测试。

![image.png](https://blog.warmplace.cn/static/img/3ac61f2a017e2c387147619a8befa198.image.webp)

## 介绍
> 你可能不需要redux
> Redux 是负责组织 state 的工具，但你也要考虑它是否适合你的情况。不要因为有⼈告诉你要用 Redux就去用，花点时间好好想想使⽤了 Redux 会带来的好处或坏处。<br><br>
> 在下⾯的场景中，引入 Redux 是⽐较明智的:
> - 你有着相当大量的、随时间变化的数据;
> - 你的 state 需要有一个单一可靠数据来源;
> - 你觉得把所有 state 放在最顶层组件中已经无法满足需要了。
> - 某个组件的状态需要共享。<br>
> 以上内容摘抄自官网

`redux` 是 `JavaScript`应⽤的状态容器，提供可预测化的状态管理。它保证程序行为一致性且易于测试。

![image.png](https://blog.warmplace.cn/static/img/edb7c90790e6748f9b95f20dec8cfa94.image.webp)

## 手写redux
这里写了一下redux, react-redux的简易实现

<img width=200 src='https://blog.warmplace.cn/static/img/2339b3d89497c2b8df259c36d9d7a5ac.image.webp'>

[源码点这里](https://github.com/guojingwen/frontend-project/tree/main/react_study)


# react-redux
## 使用
```jsx
// redux 完整使用
import React, {Component} from "react";
import {bindActionCreators} from 'redux'

import {connect} from 'react-redux'
// connect帮组⼦组件与store链接，其实就是⾼阶组件，这⾥返回的是⼀个新的组件
export default connect(
    // mapStateToProps Function (state, [ownProps])
    // state => ({count: state}),
    // !谨慎使⽤ownProps，如果它发⽣变化，mapStateToProps就会执⾏，⾥⾯的state会被重新计算，容易影响性能
    (state, ownProps) => {
        // console.log('mapStateToProps ownProps ', ownProps);
        return {
            count: state
        }
    },
    // mapDispatchToProps Object/Function 如果不定义 默认把dispatch注⼊组件
    // 如果是对象的话，原版的dispatch就没有被注⼊了
    // {
    //     add: () => ({type: 'ADD'})
    // },
    //  Function (dispatch, [ownProps])
    //  !谨慎使⽤ownProps，如果它发⽣变化，mapDispatchToProps就会执⾏，容易影响性能
    (dispatch) => {
        let res = {
            add: () => ({type: "ADD"}),
            minus: () => ({type: "MINUS"})
        };
        res = bindActionCreators(res, dispatch);
        return {
            dispatch,
            ...res
        };
    },
    // mergeProps Function
    // 如果指定了这个参数，`mapStateToProps()` 与 `mapDispatchToProps()` 的执⾏结果和组件⾃身的 `props` 将传⼊到这个回调函数中。
    // (stateProps, dispatchProps, ownProps) => {
        // console.log("mergeProps", stateProps, dispatchProps); //sy-log
        // return {omg: "omg", ...stateProps, ...dispatchProps};
    // }
)(class ReactReduxPage extends Component{
    render() {
        // console.log(this.props);
        const {count, dispatch, add, minus} = this.props;
        return <div>
            <h3>ReactReduxPage</h3>
            <p>{count}</p>
            <button onClick={() => dispatch({type: "ADD"})}>
                add use dispatch
              </button>
            <button onClick={add}>add</button>
            <button onClick={minus}>minus</button>
        </div>
    }
});
```
## 简易实现
```jsx
import React, {Component} from 'react';
const ValueContext = React.createContext();

export const connect = (
    mapStateToProps = state => state,
    mapDispatchToProps,
) =>  WrapperComponent => {
    return class extends Component {
        static contextType = ValueContext;
        constructor(props) {
            super(props);
            this.state = {
                props: {}
            };
        }
        componentDidMount() {
            this.update();
            const {subscribe} = this.context;
            subscribe(() => {
                this.update();
            })
        }
        update () {
            const {getState, dispatch} = this.context;
            const stateProps =
                mapStateToProps(getState());
            let dispatchProps;
            if(typeof mapDispatchToProps === 'function') {
                dispatchProps = mapDispatchToProps(dispatch, this.props)
            } else if (typeof mapDispatchToProps === 'object') {
                dispatchProps = bindActionCreators(mapDispatchToProps, dispatch)
            } else {
                dispatchProps = {
                    dispatch,
                }
            }
            this.setState({
                props: {
                    ...stateProps,
                    ...dispatchProps,
                }
            })
        }
        render () {
            return <WrapperComponent {...this.props} {...this.state.props}/>;
        }
    }
}

export class Provider extends Component {
    render () {
        return <ValueContext.Provider value={this.props.store}>
            {this.props.children}
        </ValueContext.Provider>;
    }
}

function bindActionCreators(creators, dispatch) {
    const obj = {}
    for(let prop in creators) {
        obj[prop] = bindActionCreator(creators[obj], dispatch)
    }
    return obj;
}
function bindActionCreator(creator, dispatch) {
    return (...args) => dispatch(creator(args))
}
```
# mobx
[官方文档](https://cn.mobx.js.org/)

先来看一下官方定义
- redux  **JavaScripty应用可预测的状态管理容器**
- mobx `简单可扩展的状态管理`

## 已有了redux为什么还有mobx？
- 在react生态中，redux可谓是状态管理中的霸主了，mobx则是一方诸侯。
- redux上手相对简单，而mobx，API较多，相对复杂一些。
- redux强调数据不可变，方便数据追溯，很容易实现时间旅行的功能；mobx中数据是可变的，然而时间回溯代价就很高。
- redux并知道state是否发生变化，dispatch的时候会更新所有的订阅者，你需要通过拆分store或使用shouldComponentUpdate周期进行优化
- mobx中的数据是响应式的，会进行依赖收集（与vue思想类似），知道要更新哪些内容，所以对于复杂应用，mobx不需要做过多处理就能达到很好的性能。

总结： 对于一般应用而言使用redux即可，对于复杂或性能要求较高的业务场景则使用mobx。

参考资料：[我为什么从redux迁移到了mobx](https://tech.youzan.com/mobx_vs_redux/)

## 使用案例
1. 接入准备
- `npx create-react-app  XXX`
- `cd XXX && npm i && npm eject`
- `npm i mobx mobx-react`
- 修改`package.json` babel增加plugins
```json
[
  "@babel/plugin-proposal-decorators",
  {
    "legacy": true
  }
]
```

2. 代码示例
- `App.js`
```jsx
import React from 'react';
import { makeObservable, observable, action } from 'mobx';
import { Observer } from 'mobx-react';
class App extends React.Component {
    constructor(props) {
        super(props);
        makeObservable(this);
    }
    @observable
    count = 0;

    @action
    add = () => {
        ++this.count;
    }
    render() {
        return <Observer>
            {
                () => <div>
                    <p>{this.count}</p>
                    <button onClick={this.add}>ADD</button>
                </div>
            }
        </Observer>
    }
}

export default App;
```

完整案例， [点击这里](https://github.com/guojingwen/frontend-project/tree/main/react_study/5.mobx)
								
# 聊一聊数据流管理方案
## 函数式 vs 面向对象
函数式的优势
- 纯函数无副作用，可时间回溯，适合并发
- 数据流变化处理很拿手，比如rxjs
- 对于复杂数据逻辑、科学计算的开发和维护效率更高

面向对象的优势
- javascript的鸭子类型，标明它基于对象，不适合完全函数式的表达
- 数学思维和数据处理适合函数式，技术是为业务服务的，而业务模型适合用面向对象。
- 业务开发和做研究不同，逻辑严谨的函数式相当完美，但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。

## Redux vs Mobx
| Redux | Mobx |
| --- | --- |
| 数据流程很自然，需要依据对象引用是否变化来控制更新粒度。 | 数据流流动不自然，只有用到的数据才会引发绑定，局部精确更新，但免去了粒度控制烦恼。 |
| 如果充分利用时间回溯的特征，可以增强业务的可预测性与错误定位能力 | 时间回溯能力较为复杂 |
| 时间回溯代价很高，因为每次都要更新引用，除非增加代码复杂度，或使用 immutable。 | 自始至终一份引用，不需要 immutable，也没有复制对象的额外开销。 |
| 时间回溯的另一个代价是 action 与 reducer 完全脱节，数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。 | 数据流动由函数调用一气呵成，便于调试。 |
| 引入中间件，其实主要为了解决异步带来的副作用，业务逻辑或多或少参杂着 magic。 | 业务开发不是脑力活，而是体力活，少一些 magic，多一些效率。 |
| 但是灵活利用中间件，可以通过约定完成许多复杂的工作。 | 由于没有 magic，所以没有中间件机制，没法通过 magic 加快工作效率（这里 magic 是指 action 分发到 reducer 的过程）。 |
| 对 typescript 支持困难。 | 完美支持 typescript。 |