Reactjs: изменение состояния в рендеринге только несколько раз

Question

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

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

Эти методы изменят состояние компонента при первом вызове, поскольку они собираются в API, захватывая новые данные и повторно отображая их, а затем они больше не изменят состояние, поскольку данные уже будут в кеше.

Теперь я мог бы вызвать эти методы в компоненте, который будет монтировать, и это то, что я делаю сейчас, но если я вынужден повторно позвонить им, мне нужно размонтировать и перемонтировать компоненты. Это единственный возможный способ сделать это?

Спасибо!

Answer 1

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

Теперь, что вы можете сделать, это рассмотреть элемент внешнего состояния/кеша в качестве наблюдаемого объекта (т. Е. Я хочу сделать что-то вроде observableObject.listen('change', onChangeHandler), вы можете использовать EventEmitter из библиотеки events). You do that listening on componentDidMount and clean up in componentWillUnmout. То, что onChangeHandler очень прост: this.setState({ value: observableObject.value }), который будет вызывать повторную визуализацию компонента, которая должна быть чистой функцией, которая выводит узлы DOM в зависимости от props, передаваемого и собственного state.

Это означает, что ваша логика проверки, является ли кеш недействительной, не указана в запросе значения (внутри рендеринга), а скорее рассматривает объект как автономный. Он регулярно проверяет, должен ли он уведомлять своих слушателей о том, что он изменился. Поскольку JS не выполняет параллельное выполнение, вам не нужно иметь дело с потоками и синхронизацией. Вы знаете, что в тот момент, когда ваша функция рендеринга будет выполняться, она будет иметь самое последнее значение. Если после визуализации логика, которая проверяет кеш, выполняется, и она видит, что ее необходимо обновить, она просто уведомляет, как говорилось ранее, ее слушателей, и это делает повторную визуализацию вашего компонента, потому что ваш onChangeHandler изменил state.

Надеюсь, я помог.