Можно ли контролировать дочерний компонент в реакции, если родительский компонент рендерит много раз?

Question

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

<childform
  value ="name"
  serverapi={this.valueservice.api}
  update={this.update}
/>

дочерний компонент начинает рендеринг с использованием

componentDidMount()
{
   this.callservice(serverapi)
}

, так как его функция componentDidMount вызывается дважды, API также рендерит дважды, чего следует избегать, каждыйКогда родительский рендеринг обновляет состояние ребенка, я не могу сравнить его с состоянием. Можно ли в любом случае проверить или решить эту проблему, на которую я могу сослаться?это решает, сколько раз я вызываю родителя, это вызывает API один раз

Answer 1

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

shouldComponentUpdate(nextProps, nextState) {
  //You can perform more logic here such as 
  //return this.props.update === nextProps.update
  return nextProps.update;
}

Более подробную информацию можно найти здесь:

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

У вас может быть глобальная переменная с именем cache.

. Этот кэш выполняет проверку того, вызывается ли your_awesome_api ранее.

Этот код ниже является распространенным подходом:

// cache.js
let cache = {};

export default cache;

// someComponent.js
import cache from './cache';

// ...ignore some react component code...

componentDidMount() {
  if (cache['your_awesome_api']) {
    doSomething(cache['your_awesome_api'])
  } else {
    this.callservice(your_awesome_api).then(result => {
      cache['your_awesome_api'] = result
    })
  }
}

Таким образом, вам не нужно беспокоиться о проблеме повторного рендеринга!

Повторный рендеринг в реакции действительно распространен!