Подъем состояния: как реагируют дочерние компоненты на взаимодействие с родителями

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

Узнайте, как поднять состояние, чтобы позволить дочернему компоненту отправлять данные родительскому компоненту.

Компоненты в React

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

</ParentComponent>

Каждый дочерний компонент получает данные, называемые реквизитами, от своего родительского компонента. Свойства React могут содержать различные типы данных, такие как массивы, объекты, строки или даже функции. Дочерний компонент не может напрямую манипулировать этими данными.

Рассмотрим следующий компонент, называемый CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }





instagram viewer
return (
Increment</button>
 )
}

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

Предположим, вы вложили компонент CounterButton в другой компонент с именем Home:

const Home = () => {
return (

 )
}

Если вы хотите отобразить значение счетчика из CounterButton внутри компонента Home, вы столкнетесь с проблемой.

Как уже упоминалось, React обеспечивает однонаправленный поток данных от родителя к дочернему элементу. Таким образом, компонент CounterButton не может напрямую делиться значением состояния счетчика с компонентом Home.

Чтобы обойти это, нужно поднять состояние вверх.

Как поднять состояние для обмена данными между компонентами

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

В приведенном ранее примере счетчика вам нужно будет переместить состояние счетчика и handleIncrement функцию для компонента Home. Затем вам нужно будет передать функцию handleIncrement компоненту CounterButton в качестве реквизита.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Далее вам необходимо изменить компонент CounterButton, чтобы он принимал функцию handleIncrement и вызывал ее, когда пользователь нажимает кнопку.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Отмена государства централизует данные и передает ответственность управление государством от ребенка к родителю.

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

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

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Однако нужно быть осторожным при подъеме состояния, чтобы не попасть в ситуацию, известную как винтовое бурение.

Задача по бурению винтов

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

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

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

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

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

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