До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод renderToString() который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.

Метод renderToString() предоставляется в ReactDOMServer, который доступен здесь как глобальный объект. Метод принимает один аргумент, который является элементом React. Используйте это, чтобы отобразить App в строку.

Redux - это система управления состоянием (state), которая может использоваться с различными веб-технологиями, включая React. В Redux один объект состояния, который отвечает за все состояние вашего приложения. Это означает, что если у вас было приложение React с десятью компонентами, и каждый компонент имел свое собственное локальное состояние, то всё состояние вашего приложения было бы определено одним объектом состояния, размещенным в Redux store . Это первый важный принцип, который следует понимать при изучении Redux: хранилище Redux является единственным источником правды, когда дело касается состояния приложения. Это также означает, что в любое время, когда какая-либо часть вашего приложения хочет обновить состояние, она должна сделать это через хранилище Redux. Однонаправленный поток данных облегчает управление состоянием в вашем приложении.

Redux store является объектом, который хранит и управляет состоянием приложения state . В объекте Redux существует метод, называемый createStore() , который вы используете для создания Redux store . Этот метод принимает функцию reducer как обязательный аргумент. Функция reducer рассматривается далее в упражнениях и уже определена для вас в редакторе кода. Она просто принимает state как аргумент и возвращает state . Объявите переменную store и присвойте ей метод createStore() , передав reducer в качестве аргумента. Примечание . Код в редакторе использует ES6 синтаксис аргумента по умолчанию, чтобы инициализировать состояние значением 5 . Если вы не знакомы с аргументами по умолчанию, вы можете обратиться к разделу ES6 в учебной программе .

Другим методом жизненного цикла является componentWillReceiveProps() который вызывается всякий раз, когда компонент получает новые свойства. Этот метод получает новые свойства в качестве аргумента, который обычно записывается как nextProps . Вы можете использовать этот аргумент и сравнить с текущим this.props и выполнить действия перед обновлением компонента. Например, вы можете вызвать setState() локально до обработки обновления.

Другим методом является componentDidUpdate() и вызывается сразу после повторного рендеринга компонента. Обратите внимание, что рендеринг и установка в жизненном цикле компонентов считаются разными. Когда страница сначала загружается, все компоненты монтируются, и здесь вызывается такие методы, как componentWillMount() и componentDidMount(). После этого, по мере изменения состояния, компоненты перерендеривают себя. Следующая задача охватывает это более подробно.

Внимание: Данный метод устарел и больше не поддерживается Реактом.

Дочерний компонент Dialog получает свойство message от своего родителя - компонента Controller . Напишите componentWillReceiveProps() в компоненте Dialog и выведите в консоли аргумент nextProps и объект this.props. Вам нужно будет передать nextProps в качестве аргумента для этого метода, и хотя можно назвать его чем угодно, назовите его nextProps. Затем добавьте componentDidUpdate() в компонент Dialog и запишите условие, в котором говорится, что компонент обновлен. Этот метод работает аналогично componentWillUpdate() , который предоставляется вам. Теперь нажмите кнопку, чтобы изменить сообщение и посмотреть консоль браузера. Порядок консольных операторов показывает порядок вызова методов.

Примечание. Вам необходимо будет написать методы жизненного цикла в качестве обычных функций, а не стрелочных функций для прохождения тестов (также нет преимуществ при написании методов жизненного цикла в виде стрелочных функций).

До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод renderToString() который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.

Метод renderToString() предоставляется в ReactDOMServer, который доступен здесь как глобальный объект. Метод принимает один аргумент, который является элементом React. Используйте это, чтобы отобразить App в строку.