在 React 应用开发中，我们经常需要处理复杂的状态对象，尤其是在表单处理或者管理多个相关状态时。传统的 useState 在更新部分状态时可能显得繁琐，需要手动合并新旧状态。useMergeState 钩子提供了一种更简洁的方式来管理和更新复杂的状态对象，允许开发者只更新状态的一部分，而无需手动处理整个状态对象。以下是如何实现和使用这个自定义钩子：
const useMergeState = (initialState = {}) => {
const [value, setValue] = React.useState(initialState);
const mergeState = newState => {
if (typeof newState === 'function') newState = newState(value);
setValue({ ...value, ...newState });
};
return [value, mergeState];
};
const MyApp = () => {
const [data, setData] = useMergeState({ name: 'John', age: 20 });
return (
<>
<input
value={data.name}
onChange={e => setData({ name: e.target.value })}
/>
<button onClick={() => setData(({ age }) => ({ age: age - 1 }))}>
-
</button>
{data.age}
<button onClick={() => setData(({ age }) => ({ age: age + 1 }))}>
+
</button>
</>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);
这个技巧的关键点包括：
使用 useState创建一个状态变量，初始化为传入的initialState。
