React轻量状态管理库

跨组件通信解决方案：

react本身的Context;

redux：结合react-redux, 非为react设计的，对于小型应用比较重;

mobx：结合mobx-react, 非为react设计的，对于小型应用比较重;

dva;

其他状态管理方案：
react hooks状态管理轮子很多，都囿于redux，unstated-next思想;

1、mobx

2、unstated-next:

unstated-next：
https://www.jianshu.com/p/f5d0d777b523

unstated-next，不必再考虑 React 状态管理，仅仅 200 字节的状态管理解决方案
https://www.ctolib.com/amp/jamiebuilds-unstated-next.html

unstated-next API （English）
https://www.ctolib.com/amp/jamiebuilds-unstated-next.html

轻量状态管理库(对于react hooks的管理使用)，将react hooks通过容器container包装起来对外通过对象访问使用;
（函数组件容器、Provider包裹）

优点：不需再使用redux, mobs, flux-----
比redux小40倍，size小，api小，速度快，易学

缺点：多个container的Provider，不断嵌套的问题
解决：使用compose方法处理

// https://www.cnblogs.com/stevexu/p/10834457.html
container:
1) createContainer(useHook)
let Counter = createContainer(useCounter)
let counter = Counter.useContainer()

2) 

 



3) Container.useContainer()
let input = Container.useContainer()


4) useContainer(Container)
import { useContainer } from "unstated-next"
useContainer(Container)


5) createContext
let Counter = createContext(null)
let counter = useContext(Counter)

优化组件：
1) 通过拆分组件来优化耗时的子树
2）使用 useMemo() 优化耗时的操作
3) 使用 React.memo()、useCallback() 减少重新渲染次数，
React.memo函数包一个props属性出来；

3、hox(蚂蚁金服体验部)：

https://www.it610.com/article/1189203423183085568.html,
觉得redux, dva太难太繁琐，
unstated-next Provider 嵌套太多太乱 => 考虑使用hox，

类似于unstated-next，container包裹函数导出对象使用的概念，使用的：
1、createModel包裹的useCounter；
import { useCounterModel } from "../models/useCounterModel";
function App(props) {
  const counter = useCounterModel();
  return (
     {counter.count}
  );
}

2、使用data的形式
import { useCounterModel } from "./useCounterModel";
export function useCounterDouble() {
  const counter = useCounterModel.data;
  return {
    ...counter,
    count: counter.count * 2
  };
}

Tips:
一般逻辑和数据都放在组件中，每次组件重建，数据都会重置掉。
某一天，你想在把数据存起来，每次组件重建，不会重新刷新数据了。

假设你用的 redux，你需要重新翻译一遍逻辑，完全重写逻辑和数据层，不知道有多痛苦。
如果你用 hox，故事就完全不一样了，你只需要把逻辑和数据层代码直接复制出去就完事了

4、HooX状态管理工具：

https://segmentfault.com/a/1190000020876308