时间戳

首页 > 解决方案 > 我什么时候应该把状态放在父母身上？

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

问题描述

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

我有一个 AudioControls 组件，它呈现四个不同的 Controls 组件，每个组件用于不同的音频选项（音量、低音、中音、高音）。我以父母知道和管理四种状态的方式编写它：useState({volume: 50, bass: 50, mid: 50, treble: 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>
    )
}

标签： javascriptreactjsrefactoring

解决方案

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

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

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

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

推荐阅读