Как организовать взаимодействие компонентов в React?

Question

[Иван]

Посмотрел пару гайдов, пару скринкастов и в голове некоторая каша...
Например есть форма опроса с input'ами в приложении App. Стандартный radio button
Компонент radio button получает при вызове массив со списком, засовывает его в свой state и рендерит. При выборе одного из пунктов меняется state где помечается текущий пункт.

Собственно вопросы:

• как правильно вставить новый пункт в список? Я пометил при вызове компонента его ref'ом и пнул его setState().
  
• как правильно отследить клик по селектору? Передавать callback и в props компонента его обрабатывать?
  

Соответственно с привязкой к родителю (т.е. к App).

PS
Пока чистый React без Redux или Flux.

PSS
Если можете посоветовать что починать-посмотреть помимо доков - буду рад.

Comments

[Frozen Coder]

Лучше доков, только исходный код. Напишите свою реализацию Flux, ну или изобретите еще один "новый" паттерн.

[Иван]

Eugene Aristarhov: не спорю, тем более доки вполне адекватные. Но бывает некое "горе от ума", когда перечитал много инфы и не знаешь с какой стороны взяться. В таких случаях как раз неплохо пошаговые howto заходят.

Answer 1

[Никита Гущин]

Я пометил при вызове компонента его ref'ом и пнул его setState()

Так делать не стоит. setState: это все-таки внутренний метод компонента. Просто делайте rerender с новым массивом.

как правильно отследить клик по селектору? Передавать callback и в props компонента его обрабатывать?

Да, из родителя передавайте prop onClick и его уже вешайте на нужные компоненты.

Comments

[Иван]

Допустим

import React, {Component} from 'react';

import Selector from './Selector';

let items = ["apple", "pinapple", "orange", "watermelon"];

class App extends Component {

...
    render() {
        return (
            <div className="App">
                <Selector ref="fruitSelector" items={items}  />
            </div>
        );
    }
}

export default App;

Я добавил в массив items что-то, как вызвать ререндер?

[Никита Гущин]

Иван: храните items в state компонента App.

class App extends Component {
  constructor(props, context) {
    super(props,context)
    this.state = { items }
  }

  addSomethingToItems(newItem) {
    // автоматически вызовет ререндер
    this.setState({ items: [ ...this.state.items,  newItem] })
  }

...
    render() {
        return (
            <div className="App">
                <Selector ref="fruitSelector" items={this.state.items}  />
            </div>
        );
    }
}

[Иван]

Никита Гущин: спасибо. Т.е. при изменении стейта дети тоже перерендарятся? Хм, тогда возможно самому селектору и не нужен стейт ...

[Никита Гущин]

Иван: перерендерится App, при этом реакт пойдет вниз по дереву. Но если компонент наследуется от PureComponent - его ререндера произойдет только в том случае если props\state изменились. Так же можно это контроллировать самому, реализовав метод shouldComponentUpdate

[abberati]

Используйте flux. Оно как раз и придумано для того, чтобы изменения данных вызывали render приложения.