Введение в React

Что такое React

Реакт — это декларативная библиотека для синхронизации DOM с вашими данными.

• Библиотека для построения пользовательских интерфейсов
• V из MVC (Model View Controller)
• Не фронтенд фреймворк
• Не шаблонизатор

Преимущества

• Простой
• Декларативный
• Гибкость внедрения
• Переиспользуемые компоненты
• Простота поддержки кода
• Мощные библиотеки компонентов
• Кросс-платформенный рендеринг
• React Native

Экосистема во главе всего

• Реакт закладывает основы функционального программирование в UI код
• Поддержка кроссплатформенного рендеринга
• Отличная поддержка композиции модулей
• Огромное сообщество и множество инструментов

Почему Фейсбук создал Реакт

• Предсказуемость исполнения UI кода
  • Инкапсуляция состояния в компонентах
  • Неизменные параметры компонентов и однонаправленный поток данных
• Композиция, простота разработки и отладки
• Новые подходы разработки сложных интерфейсов

Ключевые концепции

• Virtual DOM
• Components
• States
• Props

Hello

      
        import React from "react";
        import ReactDOM from "react-dom";

        class HelloMessage extends React.Component {
          render() {
            return <div>Hello {this.props.message}</div>;
          }
        }

        ReactDOM.render(
          <HelloMessage name="John Connor" />,
            document.getElementById("app")
        );
      
    

Компоненты должны обладать следующими качествами:

• Пригодность для повторного использования. Как правило, компоненты проектируются с обеспечением возможности их повторного использования в разных сценариях различных приложений. Однако некоторые компоненты создаются специально для конкретной задачи.
• Замещаемость. Компоненты могут без труда заменяться другими подобными компонентами.
• Независимость от контекста. Компоненты проектируются для работы в разных средах и контекстах.

Компоненты должны обладать следующими качествами:

• Расширяемость. Компонент может расширять существующие компоненты для обеспечения нового поведения.
• Инкапсуляция. Компоненты предоставляют интерфейсы, позволяющие вызывающей стороне использовать их функциональность, не раскрывая при этом детали внутренних процессов либо внутренние переменные или состояние.
• Независимость. Компоненты проектируются с минимальными зависимостями от других компонентов.

Преимущества компонентного архитектурного стиля:

• Простота развертывания. Компонент легко заменить или обвновить без вмешательство в систему
• Меньшая стоимость. Использование библиотек компонентов снижает затраты на разработку и обслуживание.
• Простота разработки. Разработка без влияния на другие части системы.
• Возможность повторного использования. Повторное использование снижает затраты на разработку и обслуживание
• Упрощение с технической точки зрения. Компоненты упрощают систему через использование контейнера компонентов и его сервисов.

JSX (Java Script и XML)

JSX — это препроцессор, который добавляет синтаксис XML к JavaScript. Вы можете использовать React без JSX, но JSX делает React более элегантным.

        
          React.createElement(
            type,
            [props],
            [...children]
          )
        
      

JSX vs. Vanilla

        
          <div className="message">
            Hello {this.props.message}
          </div>

          // compiles into
          React.createElement(
            "div",
            { className: "message" },
            `Hello ${this.props.message}`
          );
        
      

Выражения в JSX

Вы можете встроить любое выражение JavaScript в JSX, обернув его фигурными фигурными скобками.

        
          const user = { firstName: "John", lastName: "Connor" };
          const formatName = ({firstName, lastName}) =>
            `${firstName} ${lastName}`;

          const message = (
            <div className="message">
              Hello, {formatName(user)}!
            </div>
          );
        
      

JSX — это выражение

После компиляции выражения JSX становятся обычными объектами JavaScript.

Это означает, что вы можете использовать JSX внутри операторов if или for, назначать его переменным, принимать его как аргументы и возвращать из функций

Определение атрибутов в JSX

        
          const image = <img src={user.avatarUrl} />
        
      

Поскольку JSX ближе к JavaScript, чем HTML, React DOM использует соглашение об именах — camelCase вместо имен атрибутов HTML.

Например, class становится className в JSX, а tabindex становится tabIndex

Определение дочерних елементов в JSX

        
          const message = (
            <div>
              <h1>Hello!</h1>
              <h2>Good to see you here.</h2>
            </div>
          );
        
      

JSX предотвращает атаки инъекцией

По умолчанию React DOM исключает любые значения, написанные в JSX, перед их рендерингом. Перед рендерингом все преобразуется в строку. Это помогает предотвратить XSS (Cross-site scripting) атаки.

Virtual Dom

• Перерисовка очень быстрая
• Миниимизируются операции с DOM
• Пакетные операции чтения и записи для достижения максимальной производительности DOM это быстрее, чем ручные операции DOM
• 60fps, даже в UIWebView на iPhone

Virtual Dom

        
          <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
          </ul>
        
      

      
        {
          type: "ul", props: { "class": "list" },
          children: [
            { type: "li", props: {}, children: ["item 1"] },
            { type: "li", props: {}, children: ["item 2"] }
          ]
        }
      
    

Virtual Dom

ReactElement - это легкое, не имеющее состояния, неизменяемое виртуальное представление элемента DOM. Это виртуальный дом

Virtual Dom

State (Состояние)

• Состояние мутабельно
• Состояние изолированно (private) для компонента
• Состояние можно изменить вызвав this.setState()
• Когда состояние изменяется компонент перерисовывает себя

Не модифицируйте состояние напрямую

      
        // Wrong
        this.state.comment = 'Hello';

        // Correct
        this.setState({comment: 'Hello'});
      
    

Обновление состояния может быть асинхронным

      
        // Wrong
        this.setState({
          counter: this.state.counter + this.props.increment,
        });

        // Correct
        this.setState((prevState, props) => ({
          counter: prevState.counter + props.increment
        }));
      
    

Обновление состояния мерджится автоматически

      
        state = { posts: [], comments: [] };

        this.setState({ posts: ["Post 1"] });
        this.setState({ comments: ["Comment 1"] });

        state = {
          posts: ["Post 1"],
          comments: ["Comment 1"]
        }
      
    

Props (Параметры)

• Параметры имутабельны
• Основываясь на параметрах компонент перерисовывает себя
• Параметры передаются от родительского компонента
• Параметры генерируются родительским компонентом

Props доступны только для чтения

Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои собственные props

Все компоненты React должны действовать как чистые функции в отношении своих props.

«Глупые» Компоненты

• Максимально переиспользуемые компоенты
• Они незнают ничего о приложении которое их использует
• Не привязан к бизнес логике или источнику данных

«Умные» Компоненты или контейнеры

• Менее универсальны, а зачастую специфичные для приложения
• Они знают о состоянии на уровне приложения
• Он может быть привязан напрямую к бизнес логике или источнику данных и реагировать на изменения

Cоглашению по именованию

Всегда начинайте имена компонентов с большой буквы.
Например:

• <div /> - тег DOM
• <Welcome /> - компонент

Функциональные и Класс Компоненты

        
          import React from "react";

          class HelloMessage extends React.Component {
            constructor()
            render() {
              return <div>Hello {this.props.message}</div>;
            }
          }

          function HelloMessage(props) {
            return <div>Hello {props.message}</div>;
          }
        
      

Композиция компонентов

        
          function Welcome(props) {
            return <h1>Hello, {props.name}</h1>;
          }

          function App() {
            return (
              <div>
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
              </div>
            );
          }
        
      

Mounting

• constructor(props)
• componentWillMount()
• render()
• componentDidMount()

Updating

• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState, snapshot)

Unmounting

• componentWillUnmount()

Жизненный цикл компонента

Ссылки

• Babel.js
• React
• Create React App
• Что такое Virtual DOM?
• Фундаментальные принципы React.js
• Функциональное программирование в браузере

git.io/iReact