hox 基本使用

[TOC]

hox

什么是hox？

react下一代状态管理器

为什么使用hox？

1. 使用及其简单的方式，让自定义hooks变成共享状态
2. 只有一个API, 足够简单

对我来说，用着很简单，有很舒服，很有效的解决了多组件共享状态的问题。

怎么使用hox？

1. 创建自定义共享hooks

import { useState } from 'react';
import { createModel } from 'hox';

// 非共享状态
export const useCounter = () => {
  const [count, setCount] = useState(0);
  const decrement = () => setCount(prev => prev + 1);
  const increment = () => setCount(prev => prev + 1);
  return {
    count,
    decrement,
    increment
  };
};

// 共享状态
export const useShareCounter = createModel(useCounter);

• 使用createModel函数，将自定义的hook useCounter包裹一下，即可获得一个共享的自定义共享hookuseShareCounter;

原理

总结

妙不可言。

优点

1. 多组件共享同一个hook的状态
2. 任何副作用的位置都可以无更新获取到hook的状态
3. 任何副作用的威客都可以无更新去更新kook的状态

缺点

1. 状态需要手动销毁