Рэндэрынг элемэнтаў

Элемэнты ўяўляюць сабой найменшыя будаўнічыя блёкі прыкладных праграмаў React.

Элемэнт апісвае тое, што вы хочаце бачыць на экране:

const element = <h1>Hello, world</h1>;

У адрозьненьне ад элемэнтаў DOM браўзэра, React-элемэнты зьяўляюцца простымі аб’ектамі, лёгкімі для стварэньня. React DOM клапоціцца пра абнаўленьне DOM, каб ён адпавядаў React-элемэнтам.

Заўвага:

Можна пераблытаць элемэнты з больш шырока вядомым паняцьцем “кампанэнты”. Мы будзем знаёміць вас з кампанэнтамі ў наступным разьдзеле. Элемэнты — гэта тое, “з чаго зробленыя” кампанэнты, і мы рэкамэндуем вам прачытаць гэты разьдзел, перш чым скакаць наперад.

Рэндэрынг элемэнта ў DOM

Дазвольце сказаць, што дзесьці ў вашым HTML-файле ёсьць <div>:

<div id="root"></div>

Мы называем гэта “каранёвым” вузлом DOM, бо ўсё, што ўнутры яго, будзе кіравацца React DOM.

Прыкладныя праграмы, створаныя з дапамогай толькі React, звычайна маюць адзін каранёвы вузел DOM. Калі вы інтэгруеце React у існуючую прыкладную праграму, то можаце мець столькі ізаляваных каранёвых вузлоў DOM, колькі пажадаеце.

Каб зрэндэрыць React-элемэнт у каранёвы вузел DOM, перадайце абодва ў ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Паспрабуйце на CodePen

Ён адлюстроўвае “Hello, world” на старонцы.

Абнаўленьне рэндэраванага элемэнта

React-элемэнты нязьменныя. Пасьля стварэньня элемэнта, вы ня можаце зьмяніць яго дзяцей/нашчадкаў ці атрыбуты. Элемэнт падобны да аднаго кадра ў фільме: ён прадстаўляе інтэрфэйс карыстальніка ў пэўны момант часу.

Наколькі нам вядома, адзіны спосаб абнавіць інтэрфэйс карыстальніка — стварыць новы элемэнт і перадаць яго ў ReactDOM.render().

Разгледзім гэты прыклад зь цікаючым гадзіньнікам:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Паспрабуйце на CodePen

Ён выклікае ReactDOM.render() кожную сэкунду са зваротнага выкліку setInterval().

Заўвага:

На практыцы большасьць прыкладных праграмаў React выклікаюць ReactDOM.render() толькі аднойчы. У наступных разьдзелах мы даведаемся, як такі код інкапсулюецца ў кампанэнты са станам (stateful components).

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

React абнаўляе толькі тое, што неабходна

React DOM параўноўвае элемэнт і яго дзяцей/нашчадкаў з папярэднімі і прымяняе абнаўленьні DOM толькі калі неабходна давесьці DOM да пажаданага стану.

Вы можаце праверыць, праінспэктаваўшы апошні прыклад з дапамогай інструмэнтаў браўзэра:

DOM inspector showing granular updates

Нават калі мы ствараем элемэнт, які апісвае ўсё дрэва UI пры кожным ціканьні, толькі тэкставы вузел, зьмесьціва якога зьмянілася, абнаўляецца з дапамогай React DOM.

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