При создании нашего приложения нам всегда нужны способы обновления его компонентов, например, динамическое добавление элементов в ListView, чтобы сделать это правильно, мы должны понимать api жизненного цикла React Native.

Что такое API жизненного цикла?

это набор функций, предоставляемых React Native для создания экземпляров, монтирования, рендеринга и, в конечном итоге, обновления, размонтирования и уничтожения компонентов. Этот api помогает нам правильно инициализировать и обновлять данные.

API жизненного цикла компонентов

Давайте посмотрим на каждую фазу жизненного цикла компонента. В React Native Api содержит 3 основных этапа: этап монтажа, этап обновления и этап отключения, поэтому порядок должен быть следующим:

Цикл монтажа:

constructor(props): этот метод используется для инициализации нашего компонента с начальным состоянием, нативный элемент пользовательского интерфейса еще не отрисован, в следующем примере мы собираемся инициировать наш компонент с образцами данных, свойства компонента передаются в качестве аргумента.

constructor(props){
     super(props);
     this.state={
           message:'hello world'
     };// this will be our initiale data that will upadate later
}

componentWillMount(): этот метод вызывается только один раз перед первым воспроизведением компонента. обычно используется для получения данных из внешнего API, например. :

componentWillMount(){
     fetch('http://my.api/users')
     .then(res=>res.json()) //to cast the body to an object
     .then(res=>this.setState({
           data:res
     });
}

render(): метод рендеринга должен возвращать компонент React Native (элемент JSX) для рендеринга (или null, чтобы ничего не рендерить). на этом этапе отображается элемент пользовательского интерфейса, например :

render(){
    return(
      <View>
            <Text>{this.state.message}</Text>
      </View>
)};

componentDidMount(): этот метод также вызывается один раз после того, как собственный пользовательский интерфейс для этого компонента завершил рендеринг, это хорошее место для некоторой работы с данными, обновление состояния снова вызовет метод render () (не замечая предыдущего состояния), например :

componentDidMount(){
      this.setState({
          message:'i got changed'
     };
}

если мы добавим этот метод в наше приложение, пользователь не заметит первое сообщение (как указано в нашем конструкторе).

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

если реквизит обновлен, жизненный цикл будет таким:

componentWillReceiveProps(nextProps): этот метод будет вызываться, если родительский элемент компонента передал новые свойства, поэтому нам нужно его повторно отрендерить.

shouldComponentUpdate(nextProps): этот метод возвращает логическое значение, нужно ли нам повторно визуализировать компонент или нет, в зависимости от изменений, произошедших в реквизитах.

componentWillUpdate(): этот метод вызывается, когда shouldComponentUpdate() возвращает true inorder для дополнительной обработки.

render(): этот метод вызывается при условии, что shouldComponentUpdate вернул true. поэтому этот метод должен возвращать элемент React Native

componentDidUpdate(): этот метод вызывается после повторного воспроизведения компонента

если состояние обновлено, жизненный цикл будет выглядеть следующим образом:

это будут те же шаги, что и при обновлении реквизита, но без componentWillReceiveProps, потому что изменение состояния является внутренним, поэтому жизненный цикл будет таким:

shouldComponentUpdate() ->componentWillUpdate() -> render()-> componentDidUpdate()

Наконец, цикл отключения:

componentWillUnmount(): этот метод вызывается при удалении компонента.

📝 Прочтите этот рассказ позже в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории недели в области технологий, которые ждут вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .