# react-hook-merge-state

**Repository Path**: panda996/react-hook-merge-state

## Basic Information

- **Project Name**: react-hook-merge-state
- **Description**: 在`useState`的基础上，对同一个状态的默认值、受控值进行对比监听
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-08
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-hook-merge-state

[![NPM version](https://img.shields.io/npm/v/react-hook-merge-state.svg?style=flat)](https://npmjs.org/package/react-hook-merge-state)
[![NPM downloads](http://img.shields.io/npm/dm/react-hook-merge-state.svg?style=flat)](https://npmjs.org/package/react-hook-merge-state)

## 介绍

在`useState`的基础上，对同一个状态的默认值、受控值进行对比监听

## 使用教程

### 安装

```bash
pnpm add react-hook-merge-state

## 或者

npm i react-hook-merge-state

```

### 快速上手

```tsx
import { useEffect, useState } from 'react';
import { useMergeState } from 'react-hook-merge-state';

type CustomInputProps = {
  /**
   * 默认值
   * @description 仅在初始化时生效
   */
  defaultValue?: string;
  /**
   * 受控值
   * @description 如果传入值，则优先使用此值
   */
  value?: string;
  /**
   * 值改变回调
   */
  onChange?: (value: string) => void;
};

const CustomInput = (props: CustomInputProps) => {
  const [value, setValue] = useMergeState<string>(null, {
    defaultValue: props.defaultValue,
    value: props.value,
    onChange: props.onChange,
  });

  useEffect(() => {
    console.log('组件值变化:', value);
  }, [value]);

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

interface State {
  hello: string;
  [key: string]: any;
}

export default () => {
  const [state, setState] = useState<State>({});

  useEffect(() => {
    console.log('状态值变化:', JSON.stringify(state, null, 2));
  }, [state]);

  return (
    <div>
      <CustomInput
        defaultValue="示例值"
        value={state.hello}
        onChange={(value) => setState({ hello: value })}
      />
      <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>
  );
};
```