React Hook 状态管理于无形
- 支持异步状态处理
- 底层使用
Context.Provider实现，支持 Custom Hook 完整生命周期 - API 简单易懂，极速上手
- TypeScript 支持
npm install stateliss --save使用 createStore 包装一个 custom hook，将其转化为状态持久化的容器
import { useState } from 'react'
import { createStore } from 'stateliss'
function useCounter() {
const [count, setCount] = useState(0)
const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)
return { count, increment, decrement }
}
export default createStore(useCounter)使用 useStore 包裹刚刚创建完成的 Store 即可获取经过持久化的数据。不要忘记包裹 Provider！
import React from 'react'
import { useStore } from 'stateliss'
import CounterStore from './CounterStore'
function Counter() {
const { count, increment, decrement } = useStore(CounterStore)
return (
<>
<div>Count: {count}</div>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
</>
)
}
function App() {
return (
<CounterStore.Provider>
<Counter />
</CounterStore.Provider>
)
}
export default App有的时候我们希望 custom hook 能接受一个参数，你可以在这里写成一个对象，如下方 useCounter 所示
import React, { useState } from 'react'
import { createStore } from 'stateliss'
function useCounter({ defaultValue }: { defaultValue: number }) {
const [count, setCount] = useState(defaultValue)
const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)
return { count, increment, decrement }
}
export default createStore(useCounter)然后在 Provider 上提供这个参数：
function App() {
return (
<CounterStore.Provider defaultValue={10}>
<Counter />
</CounterStore.Provider>
)
}
export default App除了我们能在普通的自定义 Hook 中进行异步请求，stateliss 还提供了相应的请求处理 API：
// api.ts
export function getEmail({ userId }: { userId: string }): Promise<number> {
return fetch(`url-to-fetch-email/${userId}`).then((res) => res.text())
}import React from 'react'
import { createAsyncStore, useAsyncStore } from 'stateliss'
import { getEmail } from './api'
const UserStore = createAsyncStore({
getEmail
})
const UserInfo = () => {
const { getEmail } = useAsyncStore(UserStore)
return (
<>
<div>Email: {getEmail.loading ? 'Loading Email...' : getEmail.data}</div>
<button onClick={() => getEmail.run({ userId: 'some-user-id' })}>
fetch Email
</button>
</>
)
}
const App = () => {
return (
<UserStore.Provider getEmail={{ userId: 'default-user-id' }}>
<UserInfo />
</UserStore.Provider>
)
}
export default App传入一个 custom hook 并创建一个 Store ，但你无需关心他返回了什么，useStore 会帮你处理一切
const Store = createStore<T, U>(
hook: (props: T) => U
)使用一个 Store ，并返回自定义 hook 的返回结果。
注：该组件需要被 Provider 包裹
const state: StoreValueType<T> = useStore<T extends Store<any, any>>(
store: T,
depFn?: Deps<StoreValueType<T>>
)传入一个 AsyncFunction（或 key 为 AsyncFunction 的 id，value 为 AsyncFunction 的对象，即Record<string, AsyncFn<any, any>>）
并返回一个 Async Store，用于跟踪异步状态和持久化 Promise 的返回结果。
const AsyncStore: Store<
AsyncFnPropsType<T>,
AsyncData<AsyncFnPropsType<T>, AsyncFnDataType<T>>
> = createAsyncStore<T extends AsyncFn<any, any>>(
asyncFn: T
)
const AsyncStore: ComposedStore<Partial<ComposedAsyncFnPropsType<T>>, ComposedContextType<T>>
= createAsyncStore<T extends Record<string, AsyncFn<any, any>>>(
asyncFn: T
)和 useStore 不同的是，它可以跟踪异步信息，如下所示：
const {
data,
loading,
error,
refresh,
run
} = useAsyncStore<T extends Store<any, any>>(
store: T,
options?: {
depFn?: Deps<StoreValueType<T>>
}
)
const {
asyncFn1: { data, loading, error, refresh, run },
asyncFn2: { data, loading, error, refresh, run }
} = useAsyncStore<T extends ComposedStore<any, any>>(
store: T,
options?: {
depFn?: Deps<ComposedKeyValueType<T>>
}
)| 参数 | 类型 | 描述 |
|---|---|---|
| store | Store | ComposedStore |
createAsyncStore 返回的 Store |
| options.depFn | (store: Deps<StoreValueType | ComposedKeyValueType>) => unkown[] |
当 depFn 的返回值发生改变才进行渲染，用于性能优化 |
| 参数 | 类型 | 描述 |
|---|---|---|
| data | StoreValueType<T> |
Async Function 返回的数据 |
| error | any |
Async Function 捕获到的错误信息 |
| loading | boolean |
Async Function 的 loading 状态 |
| run | (param?) => void |
发起请求，如果没有 param 则默认为传入 Provider 的参数 |
| refresh | () => void |
使用上一次的参数重新发起请求 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent