Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orzhtml/react-native-orzhtml-usecom
react react-native：hooks 的状态 use 扩展
https://github.com/orzhtml/react-native-orzhtml-usecom
Last synced: 24 days ago
JSON representation
react react-native：hooks 的状态 use 扩展
- Host: GitHub
- URL: https://github.com/orzhtml/react-native-orzhtml-usecom
- Owner: orzhtml
- License: mit
- Created: 2022-07-01T08:40:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-28T07:56:08.000Z (over 1 year ago)
- Last Synced: 2024-12-16T23:30:07.317Z (about 1 month ago)
- Language: TypeScript
- Size: 563 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-orzhtml-usecom
react react-native typescript：hooks 的状态 use 扩展
> 如果你发现该项目对你有用，请加个星吧。
## Install
`yarn add react-native-orzhtml-usecom`
## hooks
- [useStateCB](#useStateCB)
让你可以安全地使用 react 的 state，它的值就是你想要的值，而不是陈旧的值。并且也拥有了 callback 的能力。
- [useSingleState（推荐使用）](#useSingleState)
使用类似于 `class` 形式的 `this.state` 和 `this.setState` 的方式来使用 `state`。同样可以安全地使用 state，并且拥有 callback 能力
- [useSingleInstanceVar（推荐使用）](#useSingleInstanceVar)
（推荐使用）将所有实例变量声明在一起，并以更接近实例变量的方式使用
## 使用
### useStateCB
让你可以安全地使用 react 的 state，它的值就是你想要的值，而不是陈旧的值。并且也拥有了 callback 的能力。
```
# Example
import React from 'react'
import { View, Text, Button } from 'react-native'
import { useStateCB } from 'react-native-orzhtml-usecom'
export const UseStateCBDemoComp = () => {
const [getCount, setCount] = useStateCB(0)
const doSomeActions = () => {
console.log('Current count:', getCount())
}
return (
{getCount()}
{
setCount(getCount() + 1, doSomeActions)
}}
title="Increase"
/>
);
};
```
### useSingleState
（推荐使用）使用类似于 `class` 形式的 `this.state` 和 `this.setState` 的方式来使用 `state`。同样可以安全地使用 state，并且拥有 callback 能力
```
# Example
import React from 'react'
import { View, Text, Button } from 'react-native'
import { useSingleState } from 'react-native-orzhtml-usecom'
export const UseSingleStateDemoComp = () => {
const [state, setState] = useSingleState({
count: 0,
time: +new Date()
})
const doSomeActions = () => {
console.log("Current count:", state.count)
}
return (
useSingleState
{state.count} {state.time}
{
setState(
{
count: state.count + 1
},
doSomeActions
)
}}
title="Increase"
/>
{
setState({
time: +new Date()
})
}}
title="Change Time"
/>
);
};
```
### useSingleInstanceVar
（推荐使用）将所有实例变量声明在一起，并以更接近实例变量的方式使用
```
# Example
import React from 'react'
import { View, Text, Button } from 'react-native'
import { useSingleInstanceVar, useSingleState } from 'react-native-orzhtml-usecom'
export const UseSingleInstanceVarDemoComp = () => {
const instanceVal = useSingleInstanceVar({
interval: null
})
const [state, setState] = useSingleState({ count: 0 })
const start = () => {
stop()
instanceVal.interval = setInterval(
() => setState({ count: state.count + 1 }),
1000
)
}
const stop = () => {
const interval = instanceVal.interval
interval && clearInterval(interval)
}
return (
{state.count}
)
}
```
### useDebounce
防抖
```
# Example
...
import { useDebounce } from 'react-native-orzhtml-usecom'
const Home = (props) => {
const [a, setA] = useState(0)
const [b, setB] = useState(0)
const [cancel] = useDebounce(() => {
setB(a)
}, 2000, [a])
const changeIpt = (e) => {
setA(e.target.value)
}
return
{ b } { a }
}
```
### useThrottle
节流
```
# Example
...
import { useThrottle } from 'react-native-orzhtml-usecom'
const Home = (props) => {
const [a, setA] = useState(0)
const [b, setB] = useState(0)
const [cancel] = useThrottle(() => {
setB(a)
}, 2000, [a])
const changeIpt = (e) => {
setA(e.target.value)
}
return
{ b } { a }
}
```
### useFormChange
表单/表头搜素hooks
```
# Example
...
import { useFormChange } from 'react-native-orzhtml-usecom'
const [formData, setFormItem, reset] = useFormChange()
...
// const [formData, setFormItem, reset] = useFormChange({ name: '小明', sex: '男'})
```
### useInterval
useInterval 定时器
```
# Example
...
import { useInterval } from 'react-native-orzhtml-usecom'
const [interval, intervalClear] = useInterval()
...
interval(() => {
console.log(1)
}, 1000, true)
```
### useTimeout
useTimeout 定时器
```
# Example
...
import { useTimeout } from 'react-native-orzhtml-usecom'
const [timeout, timeoutClear] = useTimeout()
...
timeout(() => {
console.log(1)
}, 1000)
```
### useTableRequset
列表 表格数据查询
```
# Example
...
// getList 接口
const [tableData, handerChange, handerRefresh] = useTableRequest(query, getList)
const { page ,pageSize,totalCount ,list } = tableData
// 传入的接口数据返回要求如下，否则容易出错：
// {
// list: [],
// totalCount: 0,
// pageSize: 10,
// page: 1,
// }
```
### useUpdate
更新
```
# Example
...
// getList 接口
const update = useUpdate()
return
```