Обновление состояния без родительского компонента в React

Состояние - это основной способ хранения и извлечения данных вашего приложения React. Это не что иное, как объект JavaScript, который React позволяет обновлять с помощью метода setState ().

Использование setState () довольно просто, просто вызовите метод и передайте переменные состояния, которые необходимо обновить, что, в свою очередь, повторно визуализирует дерево компонентов.

setState({ loading: true });

Поскольку setState () обновляет состояние определенного компонента React, его необходимо вызывать в контексте этого компонента.

class InputBox extends React.Component {
    ...
    submitHandler() {
        this.setState({ loading: true });
    }
    ...
}

В приведенном выше примере this предоставляет контекст для вызова setState (), который ссылается на компонент InputBox.

Примечание. setState () на самом деле асинхронный. Подробнее здесь.

Как упоминалось ранее, this представляет сам компонент. Если вы выйдете из системы, вы увидите, что он возвращает состояние и свойства, привязанные к компоненту.

class InputBox extends React.Component {
    ...
    componentDidMount() {
        console.log(this);
    }
}

Теперь это означает, что обновление состояния компонента React может быть таким же простым, как это -

InputBox.setState({ loading: true });

Подходящим методом для обновления состояния компонента Без родителей была бы передача обратного вызова в качестве опоры компоненту Дочерний, который после запуска обновляет состояние Родитель.

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

Но что, если мы хотим обновить состояние самого верхнего родительского элемента из глубоко вложенного компонента?
Что ж, мы можем сохранить ссылку на экземпляр компонента самого верхнего родительского элемента и вызвать setState () когда мы хотим вызвать изменение состояния.

Посмотрим, как ...

Примечание. ReactDOM.render () возвращает ссылку на монтируемый компонент.

Как видите, мы можем просто создать функцию на глобальном уровне, вызвать ее из нашего DeeplyNestedChild и передать значение переменной состояния, которое нужно изменить, в Родительский компонент. После вызова мы можем установить состояние родительского компонента, используя его ссылку, возвращаемую ReactDOM.render ().

Этот метод может существенно помочь в тех случаях, когда мы хотим обновить состояние родительского компонента в одном дереве компонентов из дочернего компонента какого-либо другого дерева компонентов, учитывая, что одно из деревьев компонентов динамически генерируется с использованием, например, портала.

Хотите только запустить повторный рендеринг? Вы можете сделать это с помощью forceUpdate () -

const Parent = ReactDOM.render(<Parent />, document.getElementById('root'));

Parent.forceUpdate()

На этом пока все! Если вам понравилась статья, не забудьте дать ей несколько 👏
Также не стесняйтесь подписываться на меня в Medium, Twitter и GitHub.

Спасибо!