Допустимо ли повторное предоставление детям 3 раза в ReactJS?

Question

Допустим, у меня есть 3 компонента, подключенных в один родительский.

Псевдо пример:

<div> 
<Parent /> 
<ChildMetaData /> 
<ChildData /> 
</div> 

На щелчку <Parent /> я использую следующую функцию, которая передается в качестве опоры:

handleParentClick(tid,sifUser) { 
    this.setState({ 
     tid : tid , 
     sifUser : sifUser 
    }, 
    () => { 
     this.loadChildRequestsFromServer(); 
     this.loadUserDataFromServer(); 
    }); 
} 

изменений состояния.

=> Все 3 компонента переделаны.

Когда мои loadChildRequestsFromServer() заканчивает он изменяет состояние глобальной переменной

=> Все 3 компонента повторной визуализации.

Когда мои loadUserDataFromServer() заканчивает он изменяет состояние глобальной переменной

=> Все 3 компонента повторной визуализации.

Как вы можете видеть, когда я нажимаю на свой родитель, мои компоненты повторно обрабатывают 3 раза. (Я проверяю это, запустив console.log в одной из функций рендеринга компонента, например <ChildData />.)

Это приемлемое поведение, или я что-то не так?

Следует отметить, что обе функции «загрузка с сервера» - это вызовы AJAX. А так как loadChildRequestsFromServer() и this.loadUserDataFromServer() связаны друг с другом, возможно, мне не следует сразу обновлять состояние после завершения первой функции. Но скорее передайте данные следующей функции и обновите ее там.

Answer 1

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

1. без АЯКС результатов
2. с АЯКС результатами первого вызова
3. с АЯКС результатами обоих вызовов

Реагировать отфильтрует все ненужные обновления DOM в любом случае, что является основным узким местом производительности. Вы можете отфильтровать ненужные обновления, реализовав shouldComponentUpdate(). Это также предотвратит ненужное выполнение функции render().

(обновление) Если первому ребенку нужны только первые результаты вызова ajax, а второму ребенку нужны только результаты второго вызова, вы также можете рассмотреть вопрос о предоставлении каждого дочернего состояния и вызвать каждую функцию из своего соответствующего дочернего элемента.
Таким образом, каждый ребенок обновляется независимо, и вы получаете меньше вызовов визуализации. Количество обновлений DOM останется таким же = минимальным по сравнению с исходным решением.

Если вам НИКОГДА не нужно состояние с результатами только одного вызова ajax, вы можете цепью, как описано.Но это сделает любую ошибку более сложной.