我什么时候应该把状态放在父母身上？

Question

这是我的第一个 StackOverflow 问题，请随时添加您想要的任何建议。

我有一个 AudioControls 组件，它呈现四个不同的 Controls 组件，每个组件用于不同的音频选项（音量、低音、中音、高音）。 我以父母知道并管理四种状态的方式编写它： 使用状态（{ 音量：50， 低音：50， 中：50， 高音：50， }) 然后将这些值作为道具传递给孩子。

对此我有两个担忧：

1. 控件组件完全一样，也许它们可以有自己的值状态（在每个控件上放置一个 audioValue 状态）。我已经读过在可能的情况下总是提升状态是一个很好的做法，但是为什么需要它呢？这样做的充分理由是什么？

2. 鉴于这些控件都非常相似，有没有办法将地图功能与这些控件一起使用？当然，不会失去可读性。

这是音频控制代码：

function AudioControls() {
const [audioValues, setAudioValues] = useState({
    volume: 50,
    bass: 50,
    mid: 50,
    treble: 50
})

function handleControl(option, id) {
    const oldValue = audioValues[id]
    const newValue = option === "+" ? oldValue + 1 : oldValue - 1
    
    setAudioValues(prevState => (
        {
            ...prevState,
            [`${id}`] : newValue
        }
    ))
}

return(
    <>
        <Control
            id="volume"
            name="Volume"
            value={audioValues.volume}
            handleControl={handleControl}
        />
        <Control
            id="bass"
            name="Bass"
            value={audioValues.bass}
            handleControl={handleControl}
        />
        <Control
            id="mid"
            name="Mid"
            value={audioValues.mid}
            handleControl={handleControl}
        />
        <Control
            id="treble"
            name="Treble"
            value={audioValues.treble}
            handleControl={handleControl}
        />
    </>
   )
}

这里是控制组件：

function Control({ id, name, value, handleControl }) {
    return(
        <div>
            <button onClick={() => handleControl("+", id)}>
                +
            </button>
            <label>{name}: {value}</label>
            <button onClick={() => handleControl("-", id)}>
                -
            </button>
        </div>
    )
}

Answer 1

这是我的第二个堆栈溢出答案。也欢迎任何和所有反馈。

我很想知道您从哪里听说过解除状态总是一个好主意。我对此的想法是：如果提升状态总是一个好主意，那么你什么时候停止提升？为什么在这种情况下只将状态提升一个？为什么不进一步提升它？

回答您的第一个问题：将状态提升到父组件的主要原因是您是否需要两个同级组件来使用相同的状态。例如：

const [volume, setVolume] = setState(50);

function changeVolume (newVolume) {
  setVolume(newVolume);
}

<VolumeDisplay volume={volume} />
<VolumeControl onChange={changeVolume} />

在您的情况下，看起来每个人都能够更改自己的状态，因此最好将状态下推到每个<Control>。将音频值本地放入控件组件后，您可以像这样轻松地映射它们：

const controls = [
  {id: "bass", name: "Bass"},
  {id: "volume", name: "Volume"},
  {id: "mid", name: "Mid"},
  {id: "treble", name: "Treble"},
]

return (
  <>
    {controls.map(({id, name}) => <Control id={id} name={name} />)}
  <>
)