Повишаване на състоянието: Как реагират детските компоненти общуват с родителите

React използва еднопосочен поток от данни от родител към дете, никога от дете към родител. Но какво се случва, когато детето трябва да общува с родителя си?

Научете как да повдигнете състоянието, за да позволите на дъщерен компонент да изпраща данни към родителски компонент.

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

React организира компоненти в йерархия, където дъщерните компоненти се вместват в родителските компоненти. Тази йерархия формира градивните елементи на потребителския интерфейс на приложението.

</ParentComponent>

Всеки дъщерен компонент получава данни, известни като props, от своя родителски компонент. Реквизитите на React могат да съдържат различни типове данни като масиви, обекти, низове или дори функции. Дъщерният компонент не може директно да манипулира тези данни.

Помислете за следния компонент, наречен CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
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 (



 )
}

Въпреки това, трябва да внимавате с повдигането на състоянието, за да не се окажете в ситуация, известна като пробивно сондиране.

Предизвикателството за пробивно сондиране

С разрастването на вашето приложение може да откриете, че множество компоненти по-дълбоко в дървото на компонентите се нуждаят от достъп до споделено състояние. За да направите това споделено състояние достъпно за вложените компоненти, трябва да прехвърлите props през междинни компоненти. Този процес може да доведе до пробивно сондиране.

Пробното сондиране затруднява проследяването на движението на данните и може да доведе до труден за поддръжка код.

За да намалите пробивното сондиране, но все пак да споделяте данни от различни компоненти, обмислете използването на React контекст. Контекстът на React ви позволява да централизирате състоянието, така че да е достъпно в цялото приложение.

Споделяне на данни в React с помощта на Props

Когато трябва да споделите данни от дъщерен компонент с неговия родителски компонент, издигнете състоянието до родителския компонент, след което предайте функцията, която актуализира състоянието към дъщерния компонент като реквизити.

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