React - изменить состояние элемента или родителя?

Question

Я работаю над своим первым проектом reactjs. Это видео плейлист, так это то, как я структурирован одну части моего проекта

- Component Playlist Box (just a wrapper for the playlist 
-- Component Playlist (the list of video) 
--- Component Video (single video) 

Теперь, каждый раз, когда я нажимаю на видео компонента, он должен изменить его «играть» состояние истины и тот, который игра в этот момент (если есть), должна изменить свое «игровое» состояние на false.

Вот мои сомнения: лучше изменить состояние кликаемого компонента видео, чтобы он снова отображался, а также изменил состояние воспроизведения видео, или лучше изменить статус компонента списка воспроизведения, чтобы он отображает каждый видеоматериал в соответствии с каким-то параметром, который я передаю компоненту списка? Каков наилучший способ справиться с этим?

Answer 1

Когда вы решаете, где хранить определенное состояние, просто начните с самого сокровенного компонента в вашей иерархии (в данном случае, компонентного видео) и спросите: «Этот компонент должен знать об этом состоянии?»

Значит, компонентное видео должно знать о собственном игровом состоянии? Абсолютно. ;) Как насчет одного уровня вверх, Component Playlist? Если компонентный список воспроизведения не отображает ничего, что волнует, воспроизводится ли компонентное видео или нет, просто установите состояние воспроизведения в компонентное видео.

Как пример: предположим, что вы показываете мигающий свет на одном видеокомпоненте только в том случае, если он играет. Но единственная работа плейлиста состоит в том, чтобы перечислять отдельные видеоролики и не относится к тому, играет ли видео. В этом случае имеет смысл поставить состояние на компонент видео.

С другой стороны, предположим, что в плейлисте был показан текст, указывающий имя воспроизводимого в данный момент видео. Тогда было бы разумно сохранить состояние в плейлисте. Например:

class PlayList extends React.Component { 
    constructor(props) { 
    super(props); 

    this.videoPlay = this.videoPlay.bind(this); 
    this.videoStop = this.videoStop.bind(this); 

    this.state = { 
     playingVideoName: '', 
    }; 
    } 

    videoPlay(name) { 
    this.setState({ playingVideoName: name }); 
    } 

    videoStop() { 
    this.setState({ playingVideoName: '' }); 
    } 

    renderVideoList() { 
    // begin loop 
     <Video id={someId} onPlay={this.videoPlay} onStop={this.videoStop} 
    // end loop 
    } 

    render() { 
    return <div> 
     {this.renderVideoList()} 

     <div> 
     Currently playing: {this.state.playingVideoName} 
     </div> 
    </div> 
    } 
}