Хранилище данных React Components

Question

Я собираюсь создать список компонентов, которые получают список элементов, а затем возвращают список <li></li>. Более того, список можно добавить динамически с помощью ajax-вызова.

Я хотел бы спросить в этой ситуации, где я должен хранить данные, реквизит или состояние?

Answer 1

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

Общим путем является наличие двух компонентов, List и ListItem. Компонент List должен обрабатывать состояние, ajax-вызовы и передачу содержимого списка в качестве реквизита дочернему компоненту ListItem.

<List> 
    <ListItem> 
    <ListItem> 
    <ListItem> 
    ... 
</List> 

Так List хранит данные как состояние. И ListItem является апатридом и просто получает его данные от List.

React docs: Какие компоненты должны иметь состояние?

Большинство ваших компонентов должны просто взять некоторые данные из реквизита и визуализировать его. Тем не менее, иногда вам нужно ответить на ввод пользователя, запрос сервера или с течением времени. Для этого вы используете состояние.

Постарайтесь сохранить как можно больше ваших компонентов без гражданства. Делая это, вы изолируете состояние до самого логичного места и минимизируете избыточность, что упрощает рассуждение о вашем приложении.

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

Может быть, это помогает понять структуру здания реагирующих приложений: Tutorial: Thinking in React