Есть ли какой-либо способ узнать, была ли вызвана функция рендеринга из-за родительской модификации (реквизит) или из-за изменения внутреннего состояния?

#reactjs

Вопрос:

Я новичок в React,

Я хотел бы знать, есть ли какой-либо способ узнать, была ли вызвана функция рендеринга из-за родительской модификации (реквизит) или из-за изменения внутреннего состояния?

Допустим, у меня есть <input type"text" /> . Я бы хотел, чтобы его значение менялось при нажатии клавиши (функция onChange) или при каждом изменении реквизита (от родителя)

1. вы не видите html, который вы ввели в метод рендеринга?

2. Не понимаю вашего комментария

3. обычно метод рендеринга содержит некоторый HTML-код внутри return() . если у вас есть div, содержащий p-тег с надписью «test», и вы видите «test», отображаемый в вашем браузере, вы бы точно знали, что он вызывается

4. Я обновил свой вопрос, согласно вашему ответу, похоже, что он был недостаточно ясным

Ответ №1:

Вы можете сравнить свои старые и новые реквизиты и состояние:

 componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val amp;amp; console.log(`${key} prop was changed`)
  );
  Object.entries(this.state).forEach(([key, val]) =>
    prevState[key] !== val amp;amp; console.log(`${key} state changed`)
  );
}

1. Почему вы используете componentDidUpdate , а не componentWillUpdate используете?

2. componentWillUpdate теперь НЕБЕЗОПАСНО reactjs.org/docs /… но, если вы хотите сделать свою проверку перед render методом, вы можете использовать `getSnapshotBeforeUpdate ()`

3. Спасибо за ваш ответ (я дал 1), но он не отвечает на мой вопрос. Возможно, я был недостаточно ясен, поэтому я обновил свой вопрос

Ответ №2:

Вы можете просто добавить console.log(this.props) или (props) в зависимости от случая, внутри функции рендеринга, и она будет регистрировать реквизиты на консоли.