@
Vrds 首先我前端不是太熟，可能有一些我以为很难的地方，但是已经有很成熟的方案。如果真是这样，大家别嘲笑我🤣。
背景如下。
我有一个数据结构如下。
```jsx
const 编辑器组件 = () => {
const [xxx, setXXXX] = useState<数据类型>(初始化数据结构)
const [isSave, setSave ] = useState<boolean>(true)
// 数据类型里面有很多字段
return (
input 修改数据结构里面的某个字段
input 修改数据结构里面的某个字段
select 修改数据结构里面的某个字段
)
}
```
我这里的 select 是用 NextJS 的。 如果这个 select 要改成 controll 的。
https://nextui.org/docs/components/select每个 select 都要有一个 state 。现在代码变成下面这样
```jsx
const 编辑器组件 = () => {
const [xxx, setXXXX] = useState<数据类型>(初始化数据结构)
const [isSave, setSave ] = useState<boolean>(true)
const [某个 SelectValue, set 某个 SelectValue] = useState(new Set([]));
const handleXXXSelectChange = (e)=>{
setSave(false)
set 某个 SelectValue(e)//处理 select 的 change 事件
}
// 数据类型里面有很多字段
return (
<input /> 修改数据结构里面的某个字段 // 还要处理一下 save 的状态
<input /> 修改数据结构里面的某个字段
<select value={某个 SelectValue} onSelectionChange={handleXXXSelectChange} />修改数据结构里面的某个字段
{ !isSave && 保存按扭}
)
}
```
随着 input 和 select 越来越多，这个组件的代码就越来越长，而且每个 select 都要有一个 state ，然后 input 处理 isSave 也不太处理。
有没有办法让 React 的状态像 vue 一样可以响应式，少写一些代码。
比如能不能设计一些抽象的高阶组件来简化代码。