Изчерпателно ръководство за React.js през 2018 г.

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

Компонентите са градивните елементи на React. Ако идвате от ъглов фон, компонентите са много подобни на директивите. Ако идвате от различен произход, те по същество са джаджи или модули.

Можете да мислите за компонент като колекция от HTML, CSS, JS и някои вътрешни данни, специфични за този компонент. Обичам да мисля за компоненти на React като за Колачите в мрежата. Те имат всичко необходимо, увити в вкусен комбиниран пакет.

Тези компоненти са дефинирани или в чист JavaScript или могат да бъдат дефинирани в това, което екипът на React нарича „JSX“. Ако решите да използвате JSX (което най-вероятно ще, той е доста стандартен - и това е, което ще използваме за този урок), ще ви е необходим етап за компилиране, за да преобразувате JSX в JavaScript. Но ще стигнем до това по-късно.

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

Отгоре имаме снимка на моя профил в Twitter. Ако щяхме да създадем отново тази страница в React, бихме разделили различни раздели на различни компоненти (подчертани). Забележете, че компонентите могат да имат вложени компоненти вътре в тях.

Можем да наречем левия компонент (розов) компонента UserInfo. Вътре в компонента UserInfo имаме друг компонент (оранжев), който можем да наречем компонента UserImages. Начинът, по който работи тази връзка родител / дете, е компонентът ни UserInfo или родителският компонент, където живее "състоянието" на данните както за самия себе си, така и за компонента UserImages (дъщерния компонент). Ако искахме да използваме част от данните на родителския компонент в дъщерния компонент, което правим, ние бихме предали тези данни на дъщерния компонент като атрибут. В този пример предаваме компонента UserImages всички изображения, които потребителят има (които в момента живеят в компонента UserInfo).

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

По-долу са темите, които според мен са основните аспекти на React. Ако разберете всички от тях и техните цели, ще бъдете на много добро място, след като прочетете този урок.

JSX - Позволява ни да пишем HTML като синтаксис, който получава
трансформирани в лекиJavaScript обекти.
Виртуален DOM - Представяне на JavaScript на действителното
DOM.
React.Component - Начинът, по който създавате нов компонент.
render (метод) - описва как ще изглежда потребителският интерфейс
конкретния компонент.
ReactDOM.render - Извежда компонент React на DOM възел.
състояние - Вътрешното хранилище на данни (обект) на компонент.
конструктор (this.state) - Начинът, по който установявате
първоначалното състояние на компонент.
setState - Помощен метод, използван за актуализиране на състоянието на a
компонент и рендериране на потребителския интерфейс
подпори - данните, които се предават на дъщерния компонент
от родителския компонент.
propTypes - Позволява ви да контролирате присъствието или типовете
някои реквизити преминаха към дъщерния компонент.
defaultProps - Позволява ви да зададете реквизити по подразбиране за вашия компонент.
Компонент LifeCycle
  - компонентDidMount - Задейства се след монтиране на компонента
  - компонентWillUnmount - задейства се преди компонентът да се деактивира
  - getDerivedStateFromProps - Задейства се, когато компонентът се монтира и
всеки път, когато реквизитът се сменя. Използва се за актуализиране на състоянието на a
компонент, когато реквизитите му се променят
Събития
  - onClick
  - onSubmit
  - onChange

Знам, че изглежда много, но скоро ще видите как всяко парче е основополагащо в изграждането на стабилни приложения с React (и аз също не се шегувах, когато казах, че искам това да е цялостно ръководство).

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

Създаване на първия ви компонент (JSX, виртуален DOM, визуализация, ReactDOM.render)

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

За да създадете компонент React, ще използвате клас ES6. Ако не сте запознати с класовете, можете да продължите да четете по-долу или можете да прочетете повече за тях тук:

import React от 'реагира'
import ReactDOM от 'react-dom'
клас HelloWorld разширява React.Component {
  render () {
    връщане (
      
Здравей, свят!
    )   } }
ReactDOM.render (, document.getElementById ('root'));

Забележете, че единственият метод в нашия клас е визуализация. Всеки компонент е необходим за да има метод на изобразяване. Причината за това е визуализация е описание на потребителския интерфейс (потребителски интерфейс) за нашия компонент. Така че в този пример текстът, който ще се покаже на екрана, където е показан този компонент, е Hello World!

Сега нека да разгледаме какво прави ReactDOM. ReactDOM.render взема два аргумента. Първият аргумент е компонентът, който искате да изобразите, докато вторият аргумент е възелът DOM, където искате да рендерирате компонента.

Забележете, че използваме ReactDOM.render, а не React.render. Това беше промяна, направена в React .14, за да направи React по-модулен. Има смисъл, когато мислите, че React може да направи повече неща, а не само DOM елемент.

В горния пример казваме на React да вземе компонента си HelloWorld и да го предаде на елемента с идентификатор на root. Поради отношенията родител / дете на React, за които говорихме по-рано, обикновено трябва да използвате ReactDOM.render само веднъж в приложението си, тъй като чрез рендериране на най-родителския компонент, всички дочерни компоненти също ще бъдат рендерирани.

Сега на този етап може да се почувствате малко странно да хвърляте „HTML“ във вашия JavaScript. Тъй като започнахте да научавате уеб разработка, ви казаха, че трябва да изтривате логиката си от изгледа, т.е. да поддържате JavaScript, който не е свързан с вашия HTML.

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

„HTML“, който пишете в метода на изобразяване, всъщност не е HTML, а е това, което React нарича „JSX“. JSX просто ни позволява да пишем подобен на HTML синтаксис, който (в крайна сметка) се трансформира в леки JavaScript обекти. След това React е в състояние да вземе тези JavaScript обекти и от тях формира „виртуален DOM“ или JavaScript представяне на действителния DOM. Това създава ситуация за спечелване / спечелване, при която получавате достъпността на шаблони със силата на JavaScript.

Разглеждайки примера по-долу, това е, в което вашият JSX в крайна сметка ще бъде компилиран.

клас HelloWorld разширява React.Component {
  render () {
    return React.createElement ("div", null, "Hello World");
  }
}
Сега можете да се откажете от фазата на трансформация JSX -> JS и да напишете своите компоненти React като кода по-горе. Но както можете да си представите, това би било доста сложно. Не знам за всеки, който не използва JSX. За повече информация за това, към което се компилира JSX, вижте React Elements vs React Components.

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

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

Обикновено потребителският интерфейс има много състояния, които затрудняват управлението на държавата. Чрез рендериране на виртуалния DOM всеки път, когато се случи промяна на състоянието, React улеснява мисленето за това в какво състояние е вашето приложение. Процесът изглежда така:

Някои потребителски събития, които променят състоянието на вашето приложение → Превръщайте виртуален DOM → Разграничете предишния виртуален DOM с нов виртуален DOM → Актуализирайте само реалния DOM с необходими промени.

Тъй като има този процес на трансформация от JSX в JS, трябва да настроите някаква фаза на трансформация, докато се развивате. В част 2 от тази поредица ще представя Webpack и Babel за извършване на тази трансформация.

Нека разгледаме нашия списък „Най-важни части на реагиране“ и да видим къде се намираме в момента.

 JSX - Позволява ни да пишем HTML като синтаксис, който получава
трансформирани в лекиJavaScript обекти.
Виртуален DOM - JavaScript представяне на действителното
DOM.
 React.Component - начинът, по който създавате нов компонент.
Nder render (метод) - описва как ще изглежда потребителският интерфейс
конкретния компонент.
ReactDOM.render - Извежда компонент React на DOM възел.
състояние - Вътрешното хранилище на данни (обект) на компонент.
конструктор (this.state) - Начинът, по който установявате
първоначалното състояние на компонент.
setState - Помощен метод, използван за актуализиране на състоянието на a
компонент и рендериране на потребителския интерфейс
подпори - данните, които се предават на дъщерния компонент
от родителския компонент.
propTypes - Позволява ви да контролирате присъствието или типовете
някои реквизити преминаха към компонента на детето.
defaultProps - Позволява ви да зададете реквизити по подразбиране за вашия компонент.
Компонент LifeCycle
  - компонентDidMount - Задейства се след монтиране на компонента
  - компонентWillUnmount - задейства се преди компонентът да се деактивира
  - getDerivedStateFromProps - Задейства се, когато компонентът се монтира и
всеки път, когато реквизитът се сменя. Използва се за актуализиране на състоянието на a
компонент, когато реквизитите му се променят
Събития
  - onClick
  - onSubmit
  - onChange

Правим добър темп. Всичко с удебелен шрифт е това, което вече сме обхванали и поне би трябвало да можете да обясните как тези определени компоненти се вписват в екосистемата React.

Добавяне на държава към вашия компонент (състояние)

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

Връщайки се към примера на Twitter от по-рано, компонентът UserInfo (подчертан в розово по-горе) е отговорен за управлението на състоянието (или данните) на информацията на потребителя. Ако друг компонент също се нуждае от това състояние / данни, но това състояние не е пряко дете на компонента UserInfo, тогава ще създадете друг компонент, който ще бъде директен родител на UserInfo и другия компонент (или и двата компонента, които изискват това състояние ). След това бихте прехвърлили състоянието надолу като реквизит в дъщерните компоненти. С други думи, ако имате многокомпонентна йерархия, общ родителски компонент трябва да управлява състоянието и да го предава на своите деца компоненти чрез подпори.

Нека да разгледаме примерния компонент, използвайки собственото си вътрешно състояние.

клас HelloUser разширява React.Component {
  конструктор (подпори) {
    супер (подпори)
this.state = {
      потребителско име: 'tylermcginnis'
    }
  }
  render () {
    връщане (
      
        Здравейте {this.state.username}            )   } }

Въведохме нов синтаксис с този пример. Първото, което ще забележите, е методът конструктор. От дефиницията по-горе, методът конструктор е „Начинът, по който задавате състоянието на компонент“. С други думи, всички данни, които въведете в this.state вътре в конструктора, ще бъдат част от състоянието на този компонент.

В горния код казваме на нашия компонент, че искаме той да следи потребителско име. Това потребителско име вече може да се използва в нашия компонент, като правим {this.state.username}, което е точно това, което правим в нашия метод за изобразяване.

Последното нещо, с което трябва да се говори с държавата, е, че нашият компонент се нуждае от способността да променя собственото си вътрешно състояние. Правим това с метод, наречен setState. Спомняте ли си по-рано, когато говорихме за рендеринга на виртуалния дом, когато данните се променят?

Сигнал за уведомяване на нашето приложение някои данни са променени → Превключете виртуален DOM → Разграничете предишния виртуален DOM с нов виртуален DOM → Актуализирайте само реалния DOM с необходими промени.

Този „сигнал за уведомяване на нашето приложение за някои данни се е променил“ всъщност е просто setState. Всеки път, когато setState бъде извикан, виртуалният DOM се рендерира, алгоритъмът на разликата работи и реалният DOM се актуализира с необходимите промени.

Като странична забележка, когато въвеждаме setState в кода по-долу, ще въведем и няколко събития, които са в нашия списък. Две птици, един камък.

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

клас HelloUser разширява React.Component {
  конструктор (подпори) {
    супер (подпори)
this.state = {
      потребителско име: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (това)
  }
  дръжкаПромяна (д) {
    this.setState ({
      потребителско име: e.target.value
    })
  }
  render () {
    връщане (
      
        Здравейте {this.state.username}
        Променете име:         <вход           тип = "текст"           стойност = {this.state.username}           onChange = {this.handleChange}         />            )   } }

Забележете, че сме въвели още няколко неща. Първото нещо е методът handleChange. Този метод ще се извиква всеки път, когато потребител въведе в полето за въвеждане. Когато се извика handleChange, ще се обадим на setState, за да дефинираме нашето потребителско име с каквото е въведено в полето за въвеждане (напр. Target.value). Не забравяйте, че когато се извиква setState, React създава нов виртуален DOM, прави разликата, след това актуализира реалния DOM.

Сега нека разгледаме нашия метод за изобразяване. Добавихме нов ред, който съдържа поле за въвеждане. Типът на полето за въвеждане очевидно ще бъде текст. Стойността ще бъде стойността на нашето потребителско име, която първоначално беше дефинирана в нашия метод getInitialState и ще бъде актуализирана в метода на обработка.

Забележете, че има нов атрибут, който вероятно никога не сте виждали преди, onChange. onChange е нещо React и ще извиква какъвто и метод да посочите всеки път, когато стойността в полето за въвеждане се променя - в този случай методът, който посочихме, бил handleChange.

Процесът на кода по-горе ще протече нещо подобно.

Потребител набира в полето за въвеждане → handleChange се извиква → състоянието на нашия компонент е настроено на нова стойност → React отново прави виртуалния DOM → React Заменя промените → Real DOM се актуализира.

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

Стигаме до там! Ако не можете да обясните елементите с удебелен шрифт по-долу, прегледайте отново този раздел. Един съвет за РЕАЛНО учене Реагирайте: не позволявайте пасивно да чете това, ви дава невярно чувство за сигурност, че всъщност знаете какво се случва и можете да създадете отново това, което правим. Преминете към CodeSandbox и се опитайте да пресъздадете (или създадете свои) компоненти, без да гледате какво съм направил. Това е единственият начин наистина да започнете да научавате как да изграждате с React. Това важи за този урок и следващото.

 JSX - Позволява ни да пишем HTML като синтаксис, който получава
трансформирани в лекиJavaScript обекти.
Виртуален DOM - Представяне на JavaScript на действителното
DOM.
 React.Component - начинът, по който създавате нов компонент.
Nder render (метод) - описва как ще изглежда потребителският интерфейс
конкретния компонент.
ReactDOM.render - Извежда компонент React на DOM възел.
 състояние - Вътрешното хранилище на данни (обект) на компонент.
 конструктор (this.state) - начинът, по който установявате
първоначалното състояние на компонент.
 setState - Помощен метод, използван за актуализиране на състоянието на a
компонент и рендериране на потребителския интерфейс
подпори - данните, които се предават на дъщерния компонент
от родителския компонент.
propTypes - Позволява ви да контролирате присъствието или типовете
някои реквизити преминаха към дъщерния компонент.
defaultProps - Позволява ви да зададете реквизити по подразбиране за вашия компонент.
Компонент LifeCycle
  - компонентDidMount - Задейства се след монтиране на компонента
  - компонентWillUnmount - задейства се преди компонентът да се деактивира
  - getDerivedStateFromProps - Задейства се, когато компонентът се монтира и
всеки път, когато реквизитът се сменя. Използва се за актуализиране на състоянието на a
компонент, когато реквизитите му се променят
Събития
  - onClick
  - onSubmit
  - onChange

Получаващо състояние от родителски компонент (реквизити, propTypes, getDefaultProps)

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

Ето един основен пример за използване на реквизит.

клас HelloUser разширява React.Component {
  render () {
    връщане (
      
Здравейте, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( "корен)
);

Забележете на ред 9 имаме атрибут, наречен име със стойност „Tyler“. Сега в нашия компонент можем да използваме {this.props.name}, за да получим „Tyler“.

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

Родителски компонент:

клас FriendsContainer разширява React.Component {
  конструктор (подпори) {
    супер (подпори)
this.state = {
      име: „Тайлър МакГинис“,
      приятели: [
        „Джейк Лингуол“,
        „Сара Драснер“,
        „Мерик Кристенсен“
      ]
    }
  }
  render () {
    връщане (
      
        

Име: {this.state.name}

                    )   } }

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

Детски компонент:

клас ShowList разширява React.Component {
  render () {
    връщане (
      
        

Приятели

        <Ул>           {this.props.names.map ((friend) =>
  • {friend}
  • )}                     )   } }

    Не забравяйте, че кодът, който се връща от нашия метод на изобразяване, представлява представяне на това как трябва да изглежда реалният DOM. Ако не сте запознати с Array.prototype.map, този код може да изглежда малко мъгляв. Всичко, което прави, е, че създава нов масив, извиква функцията ни за обратно извикване на всеки елемент от масива и попълва новия масив с резултат от извикване на функцията за обратно извикване на всеки елемент. Например,

    const приятели = [
      „Джейк Лингуол“,
      „Сара Драснер“,
      „Мерик Кристенсен“
    ];
    const listItems = friends.map ((приятел) => {
      връщане "
  • " + приятел + "
  • "; });
    console.log (listItems);

    По-горе console.log връща ["

  • Джейк Лингуол
  • ", "
  • Мърфи Рандал
  • ", "
  • Мерик Кристенсен
  • "].

    Забележете всичко, което се случи, беше, че направихме нов масив и добавихме

  • към всеки елемент от оригиналния масив.

    Отличното в картата е, че се вписва идеално в React (и е вграден в JavaScript). Така че в нашия долен компонент по-горе преобразуваме имена, обвиваме всяко име в двойка

  • тагове и го запазваме в променливата ни listItems. След това методът ни за визуализация връща неупореден списък с всички наши приятели.

    Нека разгледаме още един пример, преди да спрем да говорим за реквизит. Важно е да разберете, че където живеят данните е точното място, където искате да манипулирате тези данни. Това улеснява разсъжденията за вашите данни. Всички методи за получаване / задаване за определен брой данни винаги ще бъдат в един и същ компонент, където са дефинирани тези данни. Ако е необходимо да манипулирате част от данните извън мястото, където живеят данните, ще прехвърлите метода getter / setter в този компонент като подпори. Нека да разгледаме подобен пример.

    клас FriendsContainer разширява React.Component {
      конструктор (подпори) {
        супер (подпори)
    this.state = {
          име: „Тайлър МакГинис“,
          приятели: [
            „Джейк Лингуол“,
            „Сара Драснер“,
            „Мерик Кристенсен“
          ],
        }
    this.addFriend = this.addFriend.bind (това)
      }
      addFriend (приятел) {
        this.setState ((състояние) => ({
          приятели: state.friends.concat ([приятел])
        }))
      }
      render () {
        връщане (
          
            

    Име: {this.state.name}

                                 )   } }
    . Забележете, че в нашия метод addFriend ние въведохме нов начин да извикаме setState. Вместо да му предадем обект, ние му предаваме функция, която след това се предава в състояние. Всеки път, когато задавате новото състояние на вашия компонент въз основа на предишното състояние (както правим с нашия масив от приятели), искате да предадете setState функция, която приема в текущото състояние и връща данните за сливане с новото състояние. Вижте тук.
    клас AddFriend разширява React.Component {
      конструктор (подпори) {
        супер (подпори)
    this.state = {
          нов приятел: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (това)
        this.handleAddNew = this.handleAddNew.bind (това)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          нов приятел: ''
        })
      }
      render () {
        връщане (
          
            <вход           тип = "текст"           стойност = {this.state.newFriend}           onChange = {this.updateNewFriend}         />         <бутон onClick = {this.handleAddNew}> Добави приятел            )   } }
    клас ShowList разширява React.Component {
      render () {
        връщане (
          
            

    Приятели

            <Ул>           {this.props.names.map ((friend) => {             върнете се
  • {приятел}
  •           })}                     )   } }

    Ще забележите, че кодът по-горе е предимно същият като предишния пример, само че сега имаме възможност да добавим име в нашия списък с приятели. Забележете как създадох нов компонент на AddFriend, който управлява новия приятел, който ще добавим.

    Причината за това е, че родителският компонент (FriendContainer) не се интересува от новия приятел, който добавяте, а се грижи само за всички ваши приятели (масив от приятели). Въпреки това, тъй като се придържаме към правилото да манипулираме вашите данни само от компонента, който се интересува от него, ние прехвърлихме метода addFriend надолу в нашия компонент AddFriend като опора и го наричаме с новия приятел, след като дръжкатаAddNew метод се нарича.

    В този момент ви препоръчвам да опитате да пресъздадете същата тази функционалност, като използвате кода по-горе като ръководство, след като сте останали в продължение на 3–4 минути.

    Преди да продължим от реквизита, искам да обхвана още две функции React относно реквизита. Те са propTypes и defaultProps. Няма да навлизам в прекалено големи подробности тук, защото и двете са доста ясни.

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

    От React 15, PropTypes вече не е включен в пакета React. Ще трябва да го инсталирате отделно, като пуснете npm install типове подпори.

    defaultProps ви позволяват да определите по подразбиране (или резервно копие) стойност за определени подпори, само в случай че тези реквизити никога не са преминали в компонента.

    Промених нашите компоненти от по-рано до сега, използвайки propTypes, за да изисквам addFriend да е функция и той да бъде прехвърлен в компонента AddFriend. Също така, използвайки defaultProps, посочих, че ако на компонента ShowList не се даде масив от приятели, той ще бъде по подразбиране до празен масив.

    import React от 'реагира'
    импортиране на PropTypes от 'prop-type'
    клас AddFriend разширява React.Component {
      конструктор (подпори) {
        супер (подпори)
    this.state = {
          нов приятел: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          нов приятел: ''
        })
      }
      render () {
        връщане (
          
            <вход           тип = "текст"           стойност = {this.state.newFriend}           onChange = {this.updateNewFriend}         />         <бутон onClick = {this.handleAddNew}> Добави приятел            )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isЗадължително
    }
    клас ShowList разширява React.Component {
      render () {
        връщане (
          
            

    Приятели

            <Ул>           {this.props.names.map ((friend) => {             върнете се
  • {приятел}
  •           })}                     )   } }
    ShowList.defaultProps = {
      имена: []
    }

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

     JSX - Позволява ни да пишем HTML като синтаксис, който получава
    се трансформира в леки JavaScript обекти.
    Виртуален DOM - Представяне на JavaScript на действителното
    DOM.
     React.Component - начинът, по който създавате нов компонент.
    Nder render (метод) - описва как ще изглежда потребителският интерфейс
    конкретния компонент.
    ReactDOM.render - Извежда компонент React на DOM възел.
     състояние - Вътрешното хранилище на данни (обект) на компонент.
     конструктор (this.state) - начинът, по който установявате
    първоначалното състояние на компонент.
     setState - Помощен метод, използван за актуализиране на състоянието на a
    компонент и рендериране на потребителския интерфейс
     реквизит - данните, които се предават на дъщерния компонент
    от родителския компонент.
     propTypes - Позволява ви да контролирате присъствието или типовете
    някои реквизити преминаха към дъщерния компонент.
     defaultProps - Позволява ви да зададете реквизит по подразбиране за вашия компонент.
    Компонент LifeCycle
      - компонентDidMount - Задейства се след монтиране на компонента
      - компонентWillUnmount - задейства се преди компонентът да се деактивира
      - getDerivedStateFromProps - Задейства се, когато компонентът се монтира и
    всеки път, когато реквизитът се сменя. Използва се за актуализиране на състоянието на a
    компонент, когато реквизитите му се променят
     Събития
      - onClick
      - onSubmit
      - onChange

    Толкова сме близки!

    Компонент LifeCycle

    Всеки компонент, който правите, ще има свои събития от жизнения цикъл, които са полезни за различни неща. Например, ако искахме да направим заявка за ajax при първоначалното визуализиране и да извлечем някои данни, къде бихме направили това? Или, ако искахме да изпълняваме някаква логика винаги, когато нашите реквизити се променят, как бихме направили това? Различните събития от жизнения цикъл са отговорите и на двете. Нека ги разбием.

    клас приложение разширява React.Component {
      конструктор (подпори) {
        супер (подпори)
    this.state = {
          име: „Тайлър МакГинис“
        }
      }
      componentDidMount () {
        // Извикан, след като компонентът е монтиран към DOM
        // Подходящ за отправяне на AJAX заявки
      }
      статичен getDerivedStateFromProps (nextProps, prevState) {
        // Обектът, който връщате от тази функция ще
        // да се слее с текущото състояние.
      }
      componentWillUnmount () {
        // Наречен НЕЗАБАВНО преди компонент да бъде демонтиран
        // Подходящ за почистване на слушатели
      }
      render () {
        връщане (
          
            Здравейте, {this.state.name}            )   } }

    компонентDidMount - Извикан веднъж след първоначалното визуализиране. Тъй като компонентът вече е извикан при извикване на този метод, имате достъп до виртуалния DOM, ако имате нужда от него. Това правите, като се обадите на this.getDOMNode (). Това е събитието от жизнения цикъл, при което ще отправяте своите AJAX заявки за получаване на някои данни.

    компонентWillUnmount - Този жизнен цикъл се извиква непосредствено преди компонентът да бъде изключен от DOM. Това е мястото, където можете да направите необходимо почистване.

    getDerivedStateFromProps - Понякога ще трябва да актуализирате състоянието на вашия компонент въз основа на реквизитите, които се предават. Това е методът на жизнения цикъл, в който бихте направили това. Ще бъдат предадени реквизитите и състоянието, а обектът, който връщате, ще бъде обединен с текущото състояние.

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

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

    Тайлър Макгинис