Подизање стања: Како реагују компоненте детета комуницирају са родитељима

Реацт користи једносмерни ток података од родитеља до детета, никада од детета до родитеља. Али шта се дешава када дете треба да комуницира са својим родитељем?

Научите како да подигнете стање да бисте дозволили подређеној компоненти да шаље податке родитељској компоненти.

Компоненте у Реацт-у

Реацт организује компоненте у хијерархији где се подређене компоненте гнезде унутар родитељских компоненти. Ова хијерархија чини градивне блокове корисничког интерфејса апликације.

</ParentComponent>

Свака подређена компонента прима податке, познате као пропс, од своје родитељске компоненте. Реацт реквизити могу да садрже различите типове података као што су низови, објекти, стрингови или чак функције. Дете компонента не може директно да манипулише овим подацима.

Размотрите следећу компоненту, тзв ЦоунтерБуттон:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Компонента одржава вредност стања под називом цоунт који се повећава сваки пут када корисник кликне на дугме.

Претпоставимо да сте компоненту ЦоунтерБуттон угнездили у другу компоненту под називом Хоме:

const Home = () => {
return (

 )
}

Ако желите да прикажете вредност бројања из ЦоунтерБуттон компоненту унутар компоненте Хоме, наишли бисте на изазов.

Као што је поменуто, Реацт спроводи једносмерни ток података од родитеља ка детету. Због тога компонента ЦоунтерБуттон не може директно да дели вредност стања бројања са компонентом Хоме.

Да бисте ово заобишли, морате подићи државу.

Како подићи стање да бисте делили податке између компоненти

Стање подизања се односи на померање стања компоненте више у стаблу компоненте, на родитељску компоненту. Једном када подигнете стање, можете га проследити подређеним компонентама као проп вредности.

У претходном примеру са бројачем, требало би да померите стање бројања и хандлеИнцремент функцију на компоненту Хоме. Тада бисте морали да проследите функцију хандлеИнцремент компоненти ЦоунтерБуттон као пропс.

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

{count}</p>
 )
}

Затим морате да измените компоненту ЦоунтерБуттон да прихвати функцију хандлеИнцремент и позове је када корисник кликне на дугме.

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

Подизање државе централизује податке и преноси одговорност за управљање државом од детета до родитеља.

Осим што вам помаже да прикажете податке у надређеној компоненти, подизање стања може вам помоћи да синхронизујете податке у више компоненти.

Претпоставимо да имате компоненту заглавља и подножја угнежђену унутар родитељске компоненте и свака од ових компоненти такође приказује дељени број. Да бисте поделили ову вредност, можете је проследити овим компонентама као реквизите.

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



 )
}

Међутим, морате бити опрезни при подизању стања како не бисте завршили у ситуацији познатој као бушење подупирача.

Изазов проп бушења

Како ваша апликација расте, можда ћете открити да више компоненти дубље у стаблу компоненти треба приступ дељеном стању. Да бисте ово заједничко стање учинили доступним угнежђеним компонентама, мораћете да прођете пропс кроз посредничке компоненте. Овај процес може довести до пробушења.

Проп бушење отежава праћење протока података и може довести до кода који се тешко одржава.

Да бисте ублажили бушење подупирача, али и даље делили податке из различитих компоненти, размислите о коришћењу Реацт контекста. Реацт контекст вам омогућава да централизујете стање тако да буде доступно у целој апликацији.

Дељење података у Реацт-у помоћу реквизита

Када треба да делите податке из подређене компоненте са њеном родитељском компонентом, подигните стање на надређену компоненту, а затим проследите функцију која ажурира стање подређеној компоненти као пропс.

У случајевима када је подређена компонента дубоко угнежђена у стаблу компоненти, користите алатку за управљање стањем као што је Реацт Цонтект или алат треће стране као што је Реацт Редук да бисте спречили бушење подупирача.