React. Продвинутые руководства. Часть Первая


Этой публикацией я открываю серию переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.


JSX — подробности


Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children).



JSX код:


<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

компилируется в:


React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Также можно использовать самозакрывающую форму для тегов, у которых нет потомков. Например:


<div className="sidebar" />

компилируется в:


React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

Протестировать, как различные конструкции JSX компилируются в JavaScript, можно в онлайн компиляторе Babel


Спецификация типов элементов React


Начальная часть JSX тега определяет тип элемента React.


Типы, определенные с Прописной буквы, указывают на то, что тег ссылается на компонент React. Эти теги в процессе компиляции ссылаются на именованную переменную, содержащую компонент React. Поэтому, обратите внимание, — эта переменная должна находится в области видимости. Например: Если вы используете выражение JSX — <Foo />, то переменная Foo должна находится в области видимости.


React должен находиться в области видимости


Т.к. JSX компилируется в вызовы функции React.createElement, библиотека React всегда должна находиться в области видимости вашего кода JSX.


Например: обе строки import необходимы в данном коде, т.к. React и CustomButton не включены непосредственно в JavaScript:


import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

Если вы не используете какой-либо упаковщик JavaScript и добавляете React непосредственно в тег <script>, то React всегда будет находиться в глобальной области видимости.


Использование нотации через точку в JSX типе


На компонент React можно ссылаться используя нотацию через точку в JSX. Это удобно, если у вас есть модуль, который экспортирует несколько компонентов React. Например, если MyComponents.DatePicker — это компонент, то вы можете использовать эту нотацию непосредственно в JSX:


import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

Вновь определенные компоненты, не входящие в стандартную библиотеку React, должны именоваться с Прописной буквы


Если тип элемента именуется со строчной буквы, это означает, что элемент является встроенным компонентом таким как <div> или <span> и передается в виде строки 'div' или 'span' в функцию React.createElement. Типы, определенные с прописной буквы, такие как <Foo /> компилируются как React.createElement(Foo) и ссылаются на компонент, определенный или импортированный в вашем JavaScript файле.


Мы рекомендуем именовать компоненты с Прописной буквы. Если у вас есть компонент, именующийся со строчной буквы, перед использованием в JSX — присвойте его переменной именующейся с Прописной буквы.


Для примера, этот код не вернет то, что от него ожидается:


import React from 'react';

// Неправильно! Это компонент и должен именоваться с Прописной буквы:
function hello(props) {
  // Правильно! Использование <div> верно, т.к. div это существующий HTML тег:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Неправильно! React принимает <hello /> за HTML тег, т.к. он начинается со строчной буквы:
  return <hello toWhat="World" />;
}

Для исправления ошибки, мы переименуем hello в Hello и будем использовать <Hello /> в JSX:


import React from 'react';

// Правильно! Это компонент и именуется с Прописной буквы:
function Hello(props) {
  // Правильно! Использование <div> верно, т.к. div это существующий HTML тег:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Правильно! React знает, что <Hello /> это компонент, т.к. он именован с Прописной буквы:
  return <Hello toWhat="World" />;
}

Выбор типа во время выполнения


Нельзя использовать общее выражение в типе элемента React. Если вам необходимо использовать общее выражение для определения типа элемента, сначала присвойте его переменной, именованной с Прописной буквы. Это часто необходимо для отображения разных компонентов в зависимости от значения свойства в props:


import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Неправильно! JSX тип не может быть выражением.
  return <components[props.storyType] story={props.story} />;
}

Для исправления ошибки, мы присвоили тип переменной, именуемой с Прописной буквы:


import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Правильно! JSX тип может быть переменной, именуемой с Прописной буквы.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

Свойства в JSX


Есть несколько различных путей для задания свойств в JSX.


JavaScript выражения


Вы можете разместить любое JavaScript выражение в свойстве, заключив его в фигурные скобки {}. Например:


<MyComponent foo={1 + 2 + 3 + 4} />

Для компонента MyComponent значение props.foo будет 10, т.к. выражение 1 + 2 + 3 + 4 вернет такой результат.


Инструкции if или циклы for не являются выражениями в JavaScript, поэтому они не могут использоваться непосредственно в JSX. Поэтому их необходимо использовать только в окружающем коде. Например:


function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

Строковые литералы


Строковые литералы могут быть размещены в свойствах. Эти два JSX выражения эквивалентны:


<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

При размещении строкового литерала — его значение будет HTML деэкранировано. Эти два JSX выражения эквивалентны:


<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

Размещение строковых литералов непосредственно в свойствах обычно не используется и дано здесь только для полноты спецификации.


Свойства по умолчанию принимают значение "True"


Если вы укажете в компоненте JSX свойство и не укажете его значение, то значение свойства по умолчанию установится в true. Эти два JSX выражения эквивалентны:


<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Мы не рекомендуем использовать эту возможность, т.к. ее легко спутать с короткой нотацией объектов в ES6 Например: {foo} в ES6 — это короткая нотация записи {foo: foo}, а не {foo: true}. Эта возможность добавлена только из-за ее присутствия в HTML.


Разворачивание атрибутов


Если у вас есть объект, содержащий свойства, и вы хотите передать его в JSX, вы можете использовать ... в качестве "разворачивающего" (spread) оператора для передачи всех свойств, содержащихся в объекте. Эти два компонента эквивалентны:


function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Разворачивание атрибутов может быть полезно при реализации универсальных контейнеров. В то же время, разворачивание может сделать ваш код грязным, т.к. при разворачивании в компонент в качестве свойств передаются все свойства объекта, в том числе те, в которых компонент не нуждается и которые не обрабатывает. Мы рекомендуем использовать данный синтаксис осмотрительно.


Потомок (children) в JSX


В JSX выражении, которое содержит открывающий и закрывающий тег, контент, заключенный между этими тегами, при компиляции передается в специальное свойство: props.children. Давайте рассмотрим типы возможных потомков:


Строковые литералы


Вы можете вставить строку между открывающим и закрывающим тегами и значение props.children будет равно этой строке. Использование строковых литералов удобно для многих встроенных элементов HTML.


Выглядит это так:


<MyComponent>Hello world!</MyComponent>

Это валидное JSX выражение — props.children компонента MyComponent установится равным строке "Hello world!". Обратите внимание, что значение строкового литерала будет HTML деэкранировано при компиляции, поэтому в общем упрощенном случае вы можете писать свой JSX код также как вы пишете HTML:


<div>Этот код содержит экранированный символ - &amp;. Код валиден одновременно как в HTML так и в JSX.</div>

JSX удаляет пробелы в начале и конце строки. Он также удаляет пустые строки. Переводы строк, примыкающие к тегам будут удалены. Переводы строк, находящиеся в середине строкового литерала и следующие один за другим преобразуются в один перевод строки. Таким образом, следующие примеры будут отображены одинаково:


<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

JSX элемент


В качестве потомков JSX элемента могут выступать другие JSX элементы. Это удобно для отображения вложенных компонентов:


<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

Вы можете смешивать любые типы потомков, будь то строки или JSX элементы. Это еще один вариант когда JSX может выглядеть также как HTML. Следующий пример валиден в JSX и HTML:


<div>
  Это список:
  <ul>
    <li>1-й элемент списка</li>
    <li>2-й элемент списка</li>
  </ul>
</div>

Компонент React не может возвращать несколько элементов React — иными словами: компонент React всегда должен иметь только один корневой элемент верхнего уровня. Одновременно с этим — одно JSX выражение может иметь неограниченное количество потомков. Таким образом, если у вас нет корневого элемента верхнего уровня — просто оберните свой набор элементов в элемент div, как в предыдущем примере.


JavaScript выражения


Вы можете использовать любое JavaScript выражение в качестве потомка, просто взяв его в фигурные скобки — {}. Например, следующие выражения эквивалентны:


<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

Эта возможность часто используется для отображения списка JSX выражений произвольной длины. Например, этот код отображает список HTML:


function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

JavaScript выражения могут совмещаться с другими типами потомков. Это удобно при отображении строковых шаблонов:


function Hello(props) {
  return <div>Hello {props.addressee}!</div>;
}

Функции JavaScript


Как правило, JavaScript выражения, используемые в JSX возвращают строки, элементы React или и то и другое вместе. Однако, props.children работает также как и любое другое свойство, в которое можно передать любой вид данных, а не только данные тех типов, которые React знает как отобразить. Например, вы можете определить некий компонент, и принять от него обратный вызов через props.children:


function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

// Вызывает "потомка - функцию обратного вызова" numTimes раз для отображения повторяемого компонента
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

В компонент в качестве потомка можно передавать что угодно. Главное — этот компонент должен преобразовать и вернуть к моменту отображения (рендеринга) то, что React знает как отобразить. Такое использование не является общепринятым, но оно прекрасно отображает то, на что способен React.


Булевые значения, Null и Undefined игнорируются


false, null, undefined и true можно использовать в качестве потомков. Но данные значения не отображаются при рендеринге. Следующие JSX выражения будут отображены одинаково:


<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{true}</div>

Эта особенность совместно с особенностью обработки условных выражений в JavaScript может быть использована для условного отображения элементов React. Следующее JSX выражение отобразит <Header /> если значение showHeader будет true:


<div>
  {showHeader && <Header />}
  <Content />
</div>

Однако, есть нюанс, когда некоторые "falsy" значения, такие как число 0, отображаются React. Например, следующий код не будет вести себя как ожидается, и в случае если props.messages будет содержать пустой массив — в результате рендеринга будет отображен 0:


<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

Для исправления ситуации, убедитесь, что выражение перед && всегда является булевым:


<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

И наоборот, если вам необходимо отобразить false, true, null или undefined при рендеринге — сконвертируйте их в строку:


<div>
  Значение переменной myVariable = {String(myVariable)}.
</div>

Следующие части:



Первоисточник: React — Advanced Guides — JSX In Depth

Поделиться с друзьями
-->

Комментарии (10)


  1. Machez
    11.01.2017 12:00
    +2

    Как новичок в использовании React скажу — автору спасибо! Кое-что из статьи подчерпнул!


    1. Badja
      11.01.2017 22:20

      Плюсану, тек тоже понемногу начинаю осваивать React, поэтому статья очень полезная вышла!


  1. Ovoshlook
    12.01.2017 01:20

    Отказался от JSX везде кроме view. И там тоже подумываю отказаться. Это hollywar, конечно, но нативный React ( в плане рендеринга ) мне пришелся больше по вкусу и удобству


    1. eks1985
      13.01.2017 07:32

      Всмысле отказался от JSX везде кроме view? А где еще JSX используется?


      Вот это


      React.createElement(
        MyButton,
        {color: 'blue', shadowSize: 2},
        'Click Me'
      )

      Удобнее вот этого?


      <MyButton color="blue" shadowSize={2}>
        Click Me
      </MyButton>


      1. Ovoshlook
        13.01.2017 10:08

        у меня довольно часто элементы генирируются, и я не знаю их названий. Соответственно вместо названия элемента я подставляю переменные. JSX такой возможности не дает


        Свойства так же формируются динамически довольно часто и их гораздо удобнее формировать как объект.


        Ну и да. Нотация функции лично мне удобнее и читается она довольно просто. Дело привычки и аккуратности кода. Опять же повторюсь — это субъективно. Лючно мое мнение


    1. Mr_Franke
      13.01.2017 07:32

      А где, кроме view, используется jsx?
      Да и jsx это синтаксический сахар для работы с dom, почему он не нативный?


      1. Ovoshlook
        13.01.2017 10:13

        При построении каскадов элементов упрпвляющей логики. Кроме ToDo list бывают же еще приложения иони, как правило, сложнее, имеют вложенную иерархичную структуру где view элементы находятся в самом верху.
        JSX это, как вы правильно заметили, синтакситечкий сахар, который треюует предобработкм, для трансляции в нативное для React представлерие, коим занимается babel.


      1. SPAHI4
        15.01.2017 13:32

        Например, для построения маршрутов в react-router


  1. noodles
    13.01.2017 07:33

    Интересует опыт команд, где верстальшики и js-разработчики — это разные люди. Как организован workflow с применение React?
    Например:
    дали дизайн -> сверстали -> отдали разрабам, они разбили на компоненты и натянули клиентскую логику -> и тут внезапно надо один компонент подправить в плане вёрстки после небольшого редизайна, а другой абсолютно новый компонент вставить… как быть?

    И ещё вопрос, насколько сложно вернуться через пол года к jsx-коду и проследить всю иерархию компонентов, чтобы что-то переверстать…


    1. bano-notit
      15.01.2017 17:28

      Проблема в том, что в данном случае верстальщики уже начинают пользоваться только css. Хотя ориентироваться в таком коде верстальщику не трудно, ибо единственное что ему понятно — JSX, остальное он обычно не понимает, да ему и не надо.
      Для просмотра иерархии… Вообще я обычно использую специальное дополнение для хрома, которое показывает эту иерархию в смешанном виде (JSX/DOM). Вообще это достаточно удобная вещь. А вот чисто из кода эту иерархию искать трудно, ибо каждый элемент вообще не зависит от своего отца.