React.js за начинаещи - обяснения и състояние

React.js е една от най-широко използваните библиотеки на JavaScript, които всеки разработчик на предния край трябва да знае. Разбирането какво са реквизит и състояние и разликите между тях е голяма стъпка към изучаването на React.

В тази публикация в блога ще обясня какво представляват реквизитът и състоянието и ще изясня някои от най-задаваните въпроси за тях:

  • Какво представляват подпорите?
  • Как предавате данни с реквизит?
  • Какво е държавата?
  • Как актуализирате състоянието на даден компонент?
  • Какво се случва, когато състоянието се промени?
  • Мога ли да използвам състояние във всеки компонент?
  • Какви са разликите между подпорите и държавата?
Ако сте напълно начинаещ за React, имам поредица от уроци за React за начинаещи.

Какво представляват подпорите?

Props е съкращение от свойства и те се използват за предаване на данни между React компонентите. Потокът от данни на React между компонентите е еднопосочен (само от родител към дете).

Как предавате данни с реквизит?

Ето пример за това как могат да се предават данни с помощта на подпори:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Първо, трябва да дефинираме / получим някои данни от родителския компонент и да ги присвоим на атрибута „prop” на дъщерния компонент.

„Име“ е дефиниран реквизит тук и съдържа текстови данни. След това можем да предадем данни с реквизит, сякаш даваме аргумент на функция:

const ChildComponent = (props) => { // statements };

И накрая, използваме точкова нотация, за да получим достъп до данните за опората и да ги изобразим:

return 

{props.name}

;

Можете също да гледате видеото ми, за да видите как да използвате реквизит:

Какво е държавата?

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

Ето пример, показващ как да се използва състояние:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Как актуализирате състоянието на даден компонент?

Държавата не трябва да се модифицира директно, но може да се модифицира със специален метод, наречен setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Какво се случва, когато състоянието се промени?

Добре, защо трябва да използваме setState( )? Защо изобщо се нуждаем от самия държавен обект? Ако задавате тези въпроси, не се притеснявайте - скоро ще разберете състоянието :) Позволете ми да отговоря.

Промяна в състоянието се случва въз основа на въведеното от потребителя, задействане на събитие и т.н. Също така, React компонентите (със състояние) се изобразяват въз основа на данните в състоянието. Държавата държи първоначалната информация.

Така че, когато състоянието се промени, React се информира и незабавно рендерира DOM - не целия DOM, а само компонентът с актуализираното състояние. Това е една от причините, поради които React е бърз.

И как React се уведомява? Познахте: с setState( ). В setState( )метода задейства процеса на повторно извършване на актуализираните части. React се информира, знае кои части (части) да промени и го прави бързо, без да изобразява отново DOM.

В обобщение има 2 важни момента, на които трябва да обърнем внимание, когато използваме състояние:

  • Държавата не трябва да се модифицира директно - setState( )трябва да се използва
  • State оказва влияние върху производителността на вашето приложение и следователно не трябва да се използва ненужно

Мога ли да използвам състояние във всеки компонент?

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

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

Ако вашият проект не използва React Hooks, тогава можете да използвате състояние само в компоненти на класа.

Какви са разликите между подпорите и държавата?

И накрая, нека обобщим и да видим основните разлики между подпорите и състоянието:

  • Компонентите получават данни отвън с подпори, докато те могат да създават и управляват свои собствени данни със състояние
  • Реквизитите се използват за предаване на данни, докато състоянието е за управление на данни
  • Данните от реквизита са само за четене и не могат да бъдат модифицирани от компонент, който ги получава отвън
  • Данните за състоянието могат да бъдат модифицирани от собствения си компонент, но са частни (не могат да бъдат достъпни отвън)
  • Реквизитът може да се предава само от родителски компонент на дете (еднопосочен поток)
  • Модифициращото състояние трябва да се случи с setState ( )метода

React.js е една от най-широко използваните днес библиотеки на JavaScript, които всеки разработчик на интерфейс трябва да знае.

Надявам се тази статия да ви помогне да разберете реквизита и състоянието. Има и други важни неща, които трябва да покриете за React и ще продължа да пиша за тях по-късно в следващите си статии.

Ако искате да научите повече за уеб разработката, не се колебайте да ме последвате в Youtube !

Благодаря ви, че прочетохте!