Иногда составление компонентов означает, что мы хотим разделить проблемы до такой степени, чтобы мы могли изолировать изменения состояния. Но что, если у нас есть свойство, которое изменяется, и мы хотим обновлять состояние всякий раз, когда оно изменяется. Теперь на это сложно ответить. Есть несколько способов сделать это, и это зависит от того, что вы пытаетесь сделать. Старый способ сделать это будет постепенно отменен в будущих версиях react. Эта статья покажет вам, как правильно назначать свойства для состояния и обновлять их при изменениях.
Old Way (УСТАРЕВШИЙ)
Итак, мы хотим назначить свойства для состояния, но мы хотим, чтобы это происходило при монтировании и каждый раз, когда мы получаем обновление. Функция componentWillRecieveProps делает это за нас, но ее использование постепенно прекращается. Причина в том, что это небезопасно, и с ним могут возникнуть проблемы. Когда вы устанавливаете здесь состояние, его можно запустить до того, как состояние будет готово к установке.
state = {
Show: false
}
componentWillReceiveProps(nextProps) {
const { show } = this.props
if (nextProps.show !== show) {
this.setState({ show })
}
}
Поэтому разработчики React придумали некоторые замены. У каждого метода есть свои случаи.
getDerivedStateFromProps
Это первая замена componentWillReceiveProps.
Вот пример использования этой функции:
state = {
Show: false
}
static getDerivedStateFromProps(nextProps, prevState) {
return {
show: nextProps.show,
};
}
Первое, на что следует обратить внимание, - это статический метод. Это означает, что у вас не будет прямого доступа ни к чему внутри класса. Второе, на что следует обратить внимание, это то, что он возвращает новый объект состояния. Вы можете обновлять состояние при изменениях, возвращая новое состояние.
Теперь команда реагирования очень ясно дает понять, что это не тот метод, который вам нужно использовать для всех изменений свойств и состояний. Они говорят, что если вы попадаете в другую категорию, вам следует использовать один из этих других методов. Эти заметки взяты прямо с сайта документации по реакции.
- Если вам нужно выполнить побочный эффект (например, выборку данных или анимацию) в ответ на изменение свойств, используйте вместо этого жизненный цикл componentDidUpdate.
- Если вы хотите повторно вычислить некоторые данные только при изменении свойства, вместо этого используйте помощник по мемоизации.
- Если вы хотите сбросить какое-то состояние при изменении свойства, подумайте о том, чтобы сделать компонент полностью управляемым или полностью неконтролируемым с помощью ключа.
Когда я писал эту статью, я хотел повторно получить данные в качестве побочного эффекта изменения свойств. Вот что я в итоге сделал.
componentDidUpdate(nextProps) {
const { show } = this.props
if (nextProps.show !== show) {
if (show) {
getMoreData().then(resp => this.setState({ data: resp.data }))
}
}
}
Здесь важно убедиться, что вы обновляетесь, когда хотите обновить, а не каждый раз, когда обновляется опора.
Заключение
Настройка состояния при изменении свойств может быть сложной задачей. Но если вы будете следовать шаблонам, установленным командой реагирования, это сэкономит вам много времени и сэкономит время. Удачи тебе!
Удачного кодирования !!
Эйвери Даффин - владелец и основатель подкаста и блога Developers Who Lunch, который помогает тем, кто изучает программирование и хочет построить свою карьеру в области разработки программного обеспечения. В настоящее время он работает инженером-программистом в компании RiskRecon a Mastercard и живет в штате Юта в США. Вы можете связаться с ним в twitter и connectedIn.
