Блог

Главная - Вопросы по программированию - Вызов функции props из конструктора против componentDidMount?

Вызов функции props из конструктора против componentDidMount?

#reactjs

#reactjs

Вопрос:

В моем компоненте react в props есть функция, которую я хочу вызвать во время рендеринга компонента, которая может быть вызвана либо из конструктора, либо из функции componentDidMount() . В основном я не вижу вызова функции из конструктора вообще в проекте react, который я видел до сих пор? Но в моем случае не имеет значения, где я его вызываю (constructor vs componentDidMount() . Итак, я думал вызвать из конструктора непосредственно перед визуализацией компонента.

Есть ли какие-либо недостатки в вызове функции из конструктора?

Вызов из конструктора выглядит следующим образом:

 export class XYZ extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItems: [],
    };

    this.props.updateId(0);
  }


  .....

  render() {
      ......
  }
}

Вызов из componentDidMount() выглядит следующим образом:

 export class XYZ extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItems: [],
    };
  }

  componentDidMount() {
    this.props.updateId(0);
  }


  .....

  render() {
      ......
  }
}

Редактировать:
Функция updateId определена в родительском компоненте, где она просто передает идентификатор 0 родительскому компоненту, а затем родительский компонент переводит его в состояние, которое используется для отображения чего-либо.

Комментарии:

1. Всегда желательно иметь его в componentDidMount конструкторе, после загрузки компонента. На данный момент, теоретически, мы не видим никаких проблем.

2. @PraveenKumarPurushothaman Спасибо за ваш ответ. Почему желательно иметь его в componentDidMount?

3. Что, если есть что-то, что требует содержимого компонента? Когда обе функции выполняют одно и то же, всегда разумно использовать CDM, потому что у вас есть доступ к загруженным элементам.

Ответ №1:

Если вам нужно вызвать Parent function перед рендерингом Child Component , то вы вызываете его Constructor , но если вам нужно вызвать его после Child Component рендеринга, тогда вы можете использовать componentDidMount метод.

Обратите внимание, что, если вы собираетесь переключиться на реагирующие хуки, было бы полезно вызывать родительские функции условно или внутри useEffect .