Как правильно несколько раз использовать React компонент на странице?

Question

[maksipes]

Обычно в примерах React показывают как созданный компонент рендерит один раз в один узел, как правило с id="root".

У меня другая задача - в html станицу нужно вставить несколько раз, в разные места, один и тот же React компонент, с разными параметрами.

Меня интересует правильный пример того как это нужно делать.

Пока я сделал так (пример упрощенный до предела):
https://codesandbox.io/embed/l21j84vjmq

html

<div class="root" feed='{"name":"Maks", "age":33}'></div>
<div class="root" feed='{"name":"Petr", "age":22}'></div>
<div class="root" feed='{"name":"Boxy", "age":27}'></div>

точка входа

const elements = document.getElementsByClassName("root");

for (var i = 0; i < elements.length; i++) {
  const feed = elements[i].getAttribute("feed");
  render(<ShowSomeInfo key={i} feed={feed} />, elements[i]);
}

jsx компонент

class ShowSomeInfo extends React.Component {
  constructor(props) {
    super(props);
    const user = JSON.parse(this.props.feed);
    this.state = { name: user.name, age: user.age };
  }

  onChange = e => {
    this.setState({ age: e.target.value });
  };

  render() {
    return (
      <div>
        <h2>{this.state.name}</h2>
        <h2>{this.state.age}</h2>
        <input type="number" value={this.state.age} onChange={this.onChange} />
      </div>
    );
  }
}

В данном случае все работает как надо, но меня волнует - не будет ли такая система тормозить; насколько это вообще правильно и принято так делать?

Comments

[galliard]

Давно это было. И как решение? Не тормозило? Проблем с ним не возникало?