react 中unstated-next的 createContainer详解
时间: 2024-03-31 14:33:57 浏览: 28
`unstated-next` 是 `unstated` 的升级版,是一个基于 React Hooks 的状态管理库。其中 `createContainer` 是其 API 之一,用于创建一个状态容器。
`createContainer` 的基本语法如下:
```
import { createContainer } from 'unstated-next';
const useContainer = createContainer(ContainerClass);
```
其中,`ContainerClass` 是一个类,用于定义状态容器的数据和方法。`useContainer` 是一个 React Hook,可以在组件中使用该 Hook 获取状态容器的实例。状态容器实例中包含了类中定义的数据和方法。
下面是一个简单的示例:
```
import { createContainer } from 'unstated-next';
import { useState } from 'react';
class CounterContainer {
state = {
count: 0
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
decrement = () => {
this.setState({ count: this.state.count - 1 });
}
}
const useCounter = createContainer(CounterContainer);
function Counter() {
const { state, increment, decrement } = useCounter.useContainer();
return (
<div>
<button onClick={decrement}>-</button>
<span>{state.count}</span>
<button onClick={increment}>+</button>
</div>
);
}
```
以上代码中,`CounterContainer` 类定义了一个包含 `count` 属性和 `increment`、`decrement` 方法的状态容器。`useCounter` Hook 获取到该状态容器的实例,通过 `state` 属性和 `increment`、`decrement` 方法实现了一个简单的计数器组件。
需要注意的是,`unstated-next` 的 `createContainer` 与 `Docker` API 中的 `createContainer` 是两个完全不同的东西,它们没有任何关系,也不要混淆。