Как в React сделать динамическую подгрузку контента?

Question

[vaskadogana]

На обычном js, это было бы что то вроде при ответе от сервера делаем node.appendChild(node), после получения данных от сервера.
Меня интересует как сделать то же самое в связке реакт + редукс.
При получении делаю диспатч, после чего делаю рендерю конент.
Собственно интересует как выводить только новые данные без рендера полученных ранее.
Сейчас примерно так

render(){
  return this.props.data.map(key=>{
       return key
  }
}

Comments

[vaskadogana]

в голову приходят варианты только в обход редукса это делать

Answer 1

[Константин Китманов]

Ну можно извернуться с помощью dangerouslySetInnerHTML, но вообще не стоит.
Просто добавляйте новые данные в state, а React сам определит, что нужно в DOM добавить, а что не трогать.

Answer 2

[Максим]

Если вы рисуете новые данные через .map и внутри map у вас отрисовывается компонент, то:
а) написать компонент в functional (stateless) стиле
б) написать компонент через наследование класса от React.PureComponent
в) добавить shouldComponentUpdate

В таком случае у вас будут дорисовываться только ново-пришедшие данные в комонент-родитель.

Если у вас внутри map сразу верстка, то сделайте компонент и затем на выбор а/б/в выше.

Документация

Comments

[vaskadogana]

Максим,

В таком случае у вас будут дорисовываться только ново-пришедшие данные в комонент-родитель.

.
Есть массив, пришли новые данные, я добавляю информацию в этот массив, чтобы вызвать рендер, мне нужно поставить в стейт именно новый массив, т.к. старый массив, компонент проигнорит. В итоге получается, что компонент вернет новый список дочерних компонентов. И получается, что придется обновить все дочерние компоненты. (ну те которые возвращаются через .map). Причем установка в дочерних shouldComponentUpdate ни к чему не приведет, т.к. родитель вернет новый список дочерних компонентов или я не прав?