При создании нашего приложения нам всегда нужны способы обновления его компонентов, например, динамическое добавление элементов в 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()
: этот метод вызывается при удалении компонента.
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории недели в области технологий, которые ждут вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .