react-hook-merge-state
Version:
在`useState`的基础上，对同一个状态的默认值、受控值进行对比监听
78 lines (58 loc) • 1.91 kB
Markdown
# react-hook-merge-state
[](https://npmjs.org/package/react-hook-merge-state)
[](https://npmjs.org/package/react-hook-merge-state)
#### Description
在`useState`的基础上，对同一个状态的默认值、受控值进行对比监听
## Usage
### Installation
```bash
pnpm add react-hook-merge-state
## 或者
npm i react-hook-merge-state
```
### QuickStart
```tsx
import React from 'react';
import { useMergeState } from 'react-hook-merge-state';
interface State {
hello: string;
[key: string]: any;
}
export default () => {
const [state, setState] = useMergeState<State>({
hello: '',
});
useEffect(() => {
console.log('状态值变化:', JSON.stringify(state, null, 2));
}, [state]);
return (
<div>
<pre>{JSON.stringify(state, null, 2)}</pre>
<p>
<button type="button" onClick={() => setState({ hello: 'world' })}>
set hello
</button>
<button
type="button"
onClick={() => setState({ foo: 'bar' })}
style={{ margin: '0 8px' }}
>
set foo
</button>
</p>
</div>
);
};
```
## Contribution
1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request
## Gitee Feature
1. You can use Readme_XXX.md to support different languages, such as Readme_en.md, Readme_zh.md
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4. The most valuable open source project [GVP](https://gitee.com/gvp)
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)