Skip to content

Commit 3be5777

Browse files
committed
update docs
1 parent 39396bf commit 3be5777

File tree

2 files changed

+0
-117
lines changed

2 files changed

+0
-117
lines changed

docs/advanced.md

-59
Original file line numberDiff line numberDiff line change
@@ -18,65 +18,6 @@ export function FooStore(initial = 1) {
1818
</Provider>
1919
```
2020

21-
## withProvider
22-
23-
Sometimes we need to use a store in the same component that provides it, for example:
24-
25-
```jsx
26-
export function App(props) {
27-
const fooStore = useStore(FooStore) // ⚠️Can't get fooStore here
28-
return (
29-
<Provider of={FooStore}>
30-
<p>{fooStore.x}</p>
31-
</Provider>
32-
)
33-
}
34-
```
35-
36-
We hope to create a `Provider` of `FooStore` in `App` component, and call `useStore(FooStore)` in it at the same time. OK, we got `withProvider` for you:
37-
38-
```jsx
39-
export const App = withProvider({
40-
of: FooStore
41-
})((props) => {
42-
const fooStore = useStore(FooStore) // 🎉 Now we can get fooStore here
43-
return (
44-
<p>{fooStore.x}</p>
45-
)
46-
})
47-
```
48-
49-
`withProvider` is a HOC(Higher-Order Component). First, we pass a props object to it(just like what we do in jsx, but in the format of object). And then we pass our component to it.
50-
51-
```jsx
52-
withProvider({
53-
of: FooStore,
54-
args: [42, 'abc'],
55-
})(MyComponent)
56-
```
57-
58-
If you want to generate the `props` of `Provider` dynamically, you can pass a **function** to `withProvider`.
59-
60-
```jsx
61-
withProvider(props => ({
62-
of: FooStore,
63-
args: [42, props.id],
64-
}))(MyComponent)
65-
```
66-
67-
68-
What's more,you can build your own Higher-Order Components based on `withProvider`:
69-
70-
```js
71-
const withFooStoreProvider = withProvider({
72-
of: FooStore
73-
})
74-
75-
export const App = withFooStoreProvider((props) => {
76-
//...
77-
})
78-
```
79-
8021
## Use in Class Components
8122

8223
Even though Reto itself is written with hooks, it is still supported to use Reto in class components. You may wonder how to use `useStore` in class components. The answer is: No, you can't. But, there is an substitute for `useStore`, which is `Consumer` component:

docs/zh-cn/advanced.md

-58
Original file line numberDiff line numberDiff line change
@@ -18,64 +18,6 @@ export function FooStore(initial = 1) {
1818
</Provider>
1919
```
2020

21-
## withProvider
22-
23-
有时,我们需要在一个组件中"同时"提供和使用某个store,例如:
24-
25-
```jsx
26-
export function App(props) {
27-
const fooStore = useStore(FooStore) // ⚠️在这里拿不到fooStore
28-
return (
29-
<Provider of={FooStore}>
30-
<p>{fooStore.x}</p>
31-
</Provider>
32-
)
33-
}
34-
```
35-
36-
我们希望在`App`组件中创建`FooStore``Provider`,但又同时想在`App`组件中`useStore(FooStore)`。这时,我们可以使用`withProvider`
37-
38-
```jsx
39-
export const App = withProvider({
40-
of: FooStore
41-
})((props) => {
42-
const fooStore = useStore(FooStore) // 🎉可以正常获取到fooStore了
43-
return (
44-
<p>{fooStore.x}</p>
45-
)
46-
})
47-
```
48-
49-
`withProvider`分为两层,你需要先传给它Provider的属性(将jsx中Provider的props写成object的形式),然后再传给它你想要加工的组件。
50-
51-
```jsx
52-
withProvider({
53-
of: FooStore,
54-
args: [42, 'abc'],
55-
})(MyComponent)
56-
```
57-
58-
此外,你还可以传入一个props的**生成函数**。如果你希望根据组件接收到到`props`动态控制传递给`Provider``props`,可以使用这种方法。
59-
60-
```jsx
61-
withProvider(props => ({
62-
of: FooStore,
63-
args: [42, props.id],
64-
}))(MyComponent)
65-
```
66-
67-
当然,你还可以基于`withProvider`创建自己的高阶组件:
68-
69-
```js
70-
const withFooStoreProvider = withProvider({
71-
of: FooStore
72-
})
73-
74-
export const App = withFooStoreProvider((props) => {
75-
//...
76-
})
77-
```
78-
7921
## 在类组件中使用
8022

8123
虽然Reto自身是通过hooks实现的,但是也是支持在类组件中使用的。显然,我们不能在类组件中使用`useStore`,但是Reto提供了可以在类组件中使用的`Consumer`

0 commit comments

Comments
 (0)