Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/toyobayashi/reactive-react
让 react 用上 @vue/reactivity
https://github.com/toyobayashi/reactive-react
Last synced: 2 days ago
JSON representation
让 react 用上 @vue/reactivity
- Host: GitHub
- URL: https://github.com/toyobayashi/reactive-react
- Owner: toyobayashi
- Created: 2021-07-20T09:56:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-13T03:04:33.000Z (about 3 years ago)
- Last Synced: 2024-10-11T20:58:34.327Z (27 days ago)
- Language: TypeScript
- Homepage:
- Size: 189 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reactive-react
[API Documentation](https://github.com/toyobayashi/reactive-react/blob/main/docs/api/index.md)
[中文](https://github.com/toyobayashi/reactive-react/blob/main/test)
## Example
### Hooks
```jsx
import * as React from 'react'
import { ref, computed } from '@vue/reactivity'
import { useData, useRender } from '@tybys/reactive-react'
function Counter () {
const data = useData(() => {
const localCount = ref(0)
const localDoubleCount = computed(() => localCount.value * 2)
const onClick = () => {
localCount.value++
}
return {
localCount,
localDoubleCount,
onClick
}
})
return useRender(() =>
{data.localCount.value} * 2 = {data.localDoubleCount.value}
+
)
}
```
### Class
```jsx
import * as React from 'react'
import { ref, computed } from '@vue/reactivity'
import { ReactiveComponent } from '@tybys/reactive-react'
class Counter extends ReactiveComponent {
constructor (props) {
super(props) // onCreateReactiveData will be called
this.onClick = () => {
this.localCount.value++
}
}
/** @override */
onCreateReactiveData () {
// all reactive effect should be collected here
this.localCount = ref(0)
this.localDoubleCount = computed(() => this.localCount.value * 2)
}
render () {
return this.renderReactive(() =>
{this.localCount.value} * 2 = {this.localDoubleCount.value}
+
)
}
/** @override */
componentWillUnmount () {
// ...
super.componentWillUnmount()
}
})
```
### HOC
```jsx
import * as React from 'react'
import { AnyComponent } from 'xx-react-component-library'
import { makeReactive } from '@tybys/reactive-react'
const ReactiveAnyComponent = makeReactive(AnyComponent, (props) => ([
props.xxProp,
propsx.xxProp2
]))
```
### Global State Management
Like vuex:
```jsx
import * as React from 'react'
import { createStore } from '@tybys/reactive-react'
const store = createStore({
state: {
count: 0
},
getters: {
doubleCount (state /*, getters */) {
return state.count * 2
}
},
mutations: {
add (state, value = 1) {
state.count += value
},
multi (state, value = 2) {
state.count *= value
}
},
actions: {
multi ({ commit /*, state, getters, dispatch */}, value = 2) {
return new Promise((resolve) => {
setTimeout(() => {
commit('multi', value)
resolve()
}, 200)
})
}
}
})
function Counter () {
const data = useData(() => {
const commit = () => {
store.mutations.add(10)
// or store.commit('add', 10)
}
const dispatch = () => {
store.actions.multi(5)
// or store.dispatch('multi', 5)
}
return { commit, dispatch }
})
return useRender(() =>
{store.state.count} * 2 = {store.getters.doubleCount}
+
x
)
}
```