Методы жизненного цикла React


Что такое жизненный цикл React

Компонент проходит множество различных этапов с момента его создания до удаления. Поскольку наш пользовательский интерфейс динамичен, для реагирования на эти постоянно меняющиеся условия React предоставил методы, позволяющие отслеживать эти изменения и, следовательно, реагировать на них соответствующим образом. В этом посте я рассмотрю 4 из них: render, componentDidMount, componentDidUpdate и shouldComponentUpdate.


render

Задача render заключается в возвращении любой разметки, которую вы написали внутри него. Когда состояние компонента изменится, метод render будет вызван снова, и пользователь сможет увидеть обновленное содержимое. Мы используем setState для изменения состояния компонента, что заставляет React обновить компонент, чтобы отразить изменения, и таким образом снова вызвать метод render.

простой пример рендеринга

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    }
  }

  handleButtonClick = (event) => {
    this.setState({
      counter: this.state.counter + 1,
    });
  }

  render() {
    return (
      <>
        <h1>{`Counter: ${this.state.counter}`}</h1>
        <button onClick={this.handleButtonClick}>Click me</button>
      </>
    );
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код отобразит кнопку, изменяющую состояние counter, и после каждого клика render будет вызываться снова, потому что React обнаружил изменение состояния. Таким образом, мы будем видеть обновленное значение counter при каждом нажатии на кнопку благодаря повторному вызову функции render.

Следует отметить несколько моментов, связанных с функцией render:

  • Класс компонента должен иметь метод render, считайте это своего рода контрактом, который вы заключаете с React и которому вы должны следовать каждый раз, когда создаете класс, расширяющий React.Component.
  • Вы не должны вызывать setState непосредственно внутри функции render, так как React обнаружит изменение, которое вызовет повторный рендеринг, который обнаружит setState и снова вызовет повторный рендеринг, и так далее, и так далее, что заставит ваше приложение зайти в бесконечный цикл и упасть.

componentDidMount

Метод componentDidMount вызывается только один раз, когда компонент вставляется в DOM. Обычно он используется для выполнения API-запросов и установки начального состояния или инициализации состояния, для которых требуются узлы DOM.

пример componentDidMount

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      productsOnSale: []
    }
  }

  getDailyDealsData() {
    // API request to get data about what products are on sale
    this.setState({
      productsOnSale: data, // data from API about what products are on sale
    });
  }

  componentDidMount() {
    this.getDailyDealsData();
  }

  render() {
    return (
      <>
        <h1>Daily Deals</h1>
        <p>{this.state.productsOnSale}</p>
      </>
    );
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Итак, приведенный выше пример сначала инициализирует пустой массив productsOnSale через конструктор, а когда компонент будет вставлен в DOM, он сделает API запрос через функцию getDailyDealsData, которая обновит состояние productsOnSale и отобразит эти данные в браузере.

Нам нужно получить информацию о ежедневных сделках только один раз в самом начале, когда вы впервые загружаете страницу, и это практический пример, где можно использовать componentDidMount.


componentDidUpdate

Метод componentDidUpdate вызывается всякий раз, когда компонент обновляется, но он не вызывается при первоначальном рендере, в отличие от componentDidMount, однако он может выполняться более одного раза. Давайте рассмотрим пример и попытаемся понять его.

пример componentDidUpdate

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    }
  }

  handleButtonClick = (event) => {
    this.setState({
      counter: this.state.counter + 1,
    });
  }
  // ----new function------
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("Component updated");
  }

  render() {
    return (
      <>
        <h1>{`Counter: ${this.state.counter}`}</h1>
        <button onClick={this.handleButtonClick}>Click me</button>
        {console.log("render")}
      </>
    );
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше пример похож на пример render, но здесь мы определили дополнительный метод componentDidUpdate, который вызывается каждый раз, когда компонент обновляется. Мы изменяем значение counter при каждом нажатии на кнопку, что приводит к запуску componentDidUpate и записи в консоль «Component updated».

Также обратите внимание, что когда вы загружаете приложение в первый раз и проверяете консоль, «Компонент обновлен» не появляется, он запускается только после первоначального рендеринга.

Вы могли заметить, что componentDidUpdate также имеет некоторые параметры, я объясню их использование ниже.

другой пример componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevState.searchTerm !== this.state.searchTerm) {
      // make API request
      this.searchVideos(this.state.searchTerm);
    }
  }
Войти в полноэкранный режим Выйти из полноэкранного режима

Предположим, вы используете youtube для поиска видео. Вы искали «React tutorials» и получили результаты, затем вы очистили вход и снова искали «React tutorial», youtube может решить не делать тот же поисковый запрос снова, так как это было бы пустой тратой времени, и, таким образом, не будет обновления компонента. Мы можем сделать это, как в примере выше, мы сравниваем prevState с текущим state и если поисковые запросы отличаются, то делаем только API запрос.


shouldComponentUpdate

shouldComponentUpdate диктует, будет ли компонент обновляться или нет. Мы можем вернуть true, если хотим, чтобы компонент обновился, иначе мы вернем false. Например, я добавлю новую функцию в наш пример render.

пример shouldComponentUpdate

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    }
  }

  handleButtonClick = (event) => {
    this.setState({
      counter: this.state.counter + 1,
    });
  }
  // ------new function----
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.counter % 2 !== 0) {
      console.log("Not updated");
      return false;
    } else {
      return true;
    }
  }
  render() {
    return (
      <>
        <h1>{`Counter: ${this.state.counter}`}</h1>
        <button onClick={this.handleButtonClick}>Click me</button>
      </>
    );
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Мы просто добавляем функцию shouldComponentUpdate и теперь функциональность счетчика изменится, так как теперь он будет отображать только «четные» значения. Это происходит потому, что мы останавливаем повторный рендеринг, если counter будет нечетным. Внутри state действительно обновляется, и если мы снова нажмем на кнопку, то увидим значение 2, 4, 6 и так далее. Мы не увидим никаких «нечетных» чисел, даже если метод setState будет запущен, поэтому render не вызывается снова, чтобы показать обновленное состояние.


Надеюсь, теперь вы понимаете, что такое жизненный цикл в react и их методы. Если вы нашли здесь какие-либо ошибки, пожалуйста, сообщите мне об этом в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий