React useMergeState Hook

创建一个具有合并新状态的功能的有状态值。

• 使用useState() hook创建一个状态变量，并将其初始化为initialState。
• 创建一个函数，通过将提供的新状态与现有状态合并来更新状态变量。如果新状态是一个函数，则使用先前的状态作为参数调用它并使用结果。
• 省略参数，以使用空对象{}初始化状态变量。

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 />
);