Уводзіны ў Рэакцыя: Розніца паміж кампанентам класа і функцыянальным кампанентам

Вы новы ў рэакцыі? Вы хочаце даведацца нешта новае за 5 хвілін ці менш ?. Давайце даведаемся пра кампанент рэагавання.

Што такое кампанент?

Кулак усяго, перш чым паглыбіцца ў гэтую тэму, мы павінны выдатна ведаць, што такі кампанент на самай справе.

Кампанент (у React) будзе апісвацца як блок або частка нашага прыкладання, якія могуць быць паўторна выкарыстаны ва ўсім праекце (і іншых, магчыма), звычайна гэта звязана з элементам карыстацкага інтэрфейсу і яго паводзінамі.

Цяпер, калі вы ведаеце асноўныя, давайце пазнаёмімся з двума тыпамі кампанентаў, якія мы можам стварыць у праекце React, кампанентах класаў і функцыянальных кампанентаў.

Кампанент класа

Гэта таксама называецца Базавы кампанент. З ECMAScript 2015 у нас ёсць "клас" у JavaScript. React выкарыстоўвае гэты сінтаксіс, каб стварыць выдатны кампанент з жыццёвым цыклам. Дзяржава звычайна выкарыстоўваецца для змены паводзін нашага кампанента альбо яго дзяцей.

Давайце ўзламім гэты код. Тут у нас ёсць клас "JS", які ўспадкоўвае функцыянальнасць ад React.Component, далей мы аб'яўляем яго канструктара, які атрымаў рэквізіт. Далей мы называем super, каб перадаць дадзеныя бацькоўскаму класу Component, гэта патрабуецца, калі мы ствараем кампаненты такога тыпу.

"Рэквізіт" - гэта аб'ект, які атрымаў усе атрыбуты, якія мы выкарыстоўваем кампанент у якасці тэга.

Кампанент Lamp мае асноўную прапанову, ён прадстаўляе HTML-блок з тэкстам і кнопкай.

Націснуўшы кнопкавы пераключальнік, уключыце або выключыце лямпу, тут знаходзіцца наша дзяржава ў гульні, у радку 4 мы ініцыялізуем стан лямпы, і пасля гэтага мы аб'яўляем метад switchLight, ён пераключыць стан нашай лямпы.

гэта "стан" - аб'ект, які мае некаторыя ўласцівасці, якія будуць змяняцца падчас выканання класа. Ён не павінен быць зменены непасрэдна, але метад setState.

Вы можаце змяніць стан такім чынам:

Функцыянальны кампанент

Цяпер, калі мы хочам пабудаваць нейкі мінімальны, просты і без грамадзянства кампанент, гэта дапаможа вам паменшыць колькасць выкарыстанага кода і лягчэй прымяніць прынцып DRY. Кампанент funcional - гэта функцыя javascript, якая вяртае некаторыя элементы Jxs.

Давайце праверым гэты прыклад кампанента лямпачкі.

Вось у нас ёсць звычайная функцыя, яна атрымлівае разбураны аб'ект са ўласцівасцю пад назвай lampState, ён звяртаецца да лакальнай зменнай, і мы ацэньваем, ці з'яўляецца праўдай, альбо няпраўдай, каб вярнуць іншы тэг img.

Цяпер мы можам выкарыстоўваць яго ў кампаненце лямпы, каб паказаць, як яны могуць нармальна працаваць разам.

Вось так, пры націску кнопкі перамыкача выява уключанай лямпы зменіцца.

А як з Гаплікамі?

Гаплікі - гэта наступная функцыя, якая дазваляе выкарыстоўваць стан у функцыянальным кампаненце. Гэта трэба растлумачыць больш падрабязна, бо нам трэба глыбей рэагаваць, а таксама я думаю, што гэта заслугоўвае ўласнага артыкула.

Дзякуй за чытанне, калі вам спадабалася ці не, дайце мне водгукі.-