Как использовать лучшие компоненты Reach

Автор оригинала: FreeCodeCamp Community Member.

Adam Recvlohe.

Когда реагируют сначала ударили на сцену, она привела к нему новый способ разработки интерфейсных архитектур. Он считался «видом» в моделей-контроллере.

Со временем основные составные участники к экосистеме React приведены на контейнер/презентационный рисунок.

В этом посте вы узнаете больше о контейнере/презентационной форме и как вы можете использовать его для создания компонентов React.

Прежде чем идти дальше, давайте уточним некоторые из жаргона:

• Контейнер – это компонент, который выбирает и/или преобразует данные.
• Представленная презентационная компонент подарит/отображает данные, которые передаются через его реквизиты. Ничего больше.
• Контейнер действует как компонент более высокого порядка. Составление компонентов более высокого порядка позволяет разделять эти два слоя. Это мешает вам заглушить ваш презентационный слой с ненужной логикой.

Если вы хотите, вы можете следить с помощью Esnextbin.

После навигации на эту страницу наверху вы должны увидеть три вкладка: Код , HTML и Пакет Отказ Нажмите на Пакет Отказ После навигации к этой вкладке добавить реагировать и React-Dom как зависимости Отказ

{ "name": "esnextbin-sketch", "version": "0.0.0", "dependencies": {   "react" : "latest",   "react-dom": "latest" }}

Теперь нажмите на Код вкладка, а затем импортировать реагировать и оказывать от React-Dom Отказ

import { default as React } from 'react'import { render } from 'react-dom'

Теперь давайте создадим функциональный компонент без гражданства, который делает «Hello, World!»

const Presentational = () => 
Hello, world!

После того, как вам просто нужно установить этот компонент к DOM, используя оказывать Отказ

render(
, document.querySelector('#root'))

Вы все еще не создали корень Элемент в HTML Так что давайте сделаем это сейчас. Все, что вы делаете, добавляет Div с ID корень Отказ

    // Notice something different 

Теперь на момент правды. Нажмите Выполнить В правом верхнем углу страницы. Вы должны увидеть Привет мир! на экране.

Теперь у вас есть презентационный компонент. Но вам также нужен компонент контейнера для получения ваших данных.

Давайте создадим компонент контейнера выше презентационного. Чтобы создать контейнер, вы будете использовать класс Rection Class. По этой причине вам нужно будет импортировать его в верхней части страницы.

import { default as React, Component } from 'react'

На этом этапе вы можете быть заняты созданием компонента контейнера.

class Container extends Component {  state = {   data: [] }  componentDidMount() {   fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')   .then(response => response.json())   .then(data => this.setState({ data })) }  render() {   return 
 }}

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

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

const Presentational = ({ data }) =>   
{JSON.stringify(data)}

Здесь я использую разрушимость, чтобы нешить данные от объекта реквизита. Иначе это будет выглядеть так:

const Presentational = props =>   
{JSON.stringify(props.data)}

Эти изменения заставляют вас обновлять, какой компонент устанавливается. Теперь вам нужно сделать компонент контейнера.

render(, document.querySelector('#root'))

Когда вы нажимаете на Выполнить Вы должны увидеть кучу отверстий данных, переполненных на экран. О, мой!

То, что вы сделали здесь, - это абстрактное расстояние от компонента контейнера и все, что он делает. Но это не гибко. Вы должны поставить свой презентационный компонент внутри контейнера. Есть ли еще один способ сделать это более гибким? Введите компонент высшего порядка.

Компонент более высокого порядка является функцией, которая принимает компонент и возвращает новый компонент. Как бы это выглядело на практике. Давайте создадим функцию, которая принимает компонент и возвращает новый компонент с данными из API FCC. Вы будете обновлять компонент контейнера для этого.

const container = Presentational =>  class extends Component {  state = {   data: [] }  componentDidMount() {   fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')   .then(response => response.json())   .then(data => this.setState({ data })) }  render() {   return 
 }}

Здесь ничего не слишком отличается. Однако есть один дополнительный шаг, который вы должны выполнить. Вам нужно сочинять этот контейнер и презентационную компонент вместе. Я просто называю контейнер с презентационным компонентом в качестве аргумента. Это добавляется чуть ниже вашего презентационного компонента.

const HigherOrderComponent = container(Presentational)

Теперь все, что вам нужно сделать, это сделать компонент высшего порядка.

render(, document.querySelector('#root'))

Вы видите, что вы там делали? Теперь вы можете использовать контейнер с любым компонентом, а не только презентационным компонентом!

Давайте возьмем этот шаг дальше. Давайте назовем другую функцию, которая сообщает компонент контейнера, какие данные для получения. Я думаю, что это сделает контейнер еще более гибким.

Новый контейнер будет выглядеть что-то подобное:

const container = endpoint => Presentational =>  class extends Component {  state = {   data: [] }  componentDidMount() {   fetch(endpoint)     .then(response => response.json())     .then(data => this.setState({ data })) }  render() {   return 
 }}

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

const HigherOrderComponent = container(  'https://fcctop100.herokuapp.com/api/fccusers/top/alltime')(Presentational)

Если это выглядит немного к вам, у вас есть хороший глаз. Что, если вы можете абстрактны, даже дальше? Введите пересчитать !

Давайте наступим на мгновение сейчас и охватить то, что есть идея сочинения. Чтобы понять составить вам нужно понять отображение.

Отображение в компьютерном программировании, когда вы принимаете значение и преобразуете его в другое значение. Что в основном каждая функция когда-либо созданная! Позвольте мне дать вам пример для хорошей меры.

function double(x) {   return x * 2}

const doubled = double(2)

Теперь скажем, я хочу сделать еще одно преобразование, например тройную. Как бы я это сделал?

function triple(x) {   return x * 3 }

function double(x) {   return x * 2}

const messedAroundAndGotATripleDouble = triple(double(2))

Достаточно просто, верно? Что если я хотел сделать еще одну трансформацию, а другой, а другой. Это будет довольно долго. С помощью композитной функции вы можете сделать код не только более читаемой, но более композимами.

function compose(f, g) {   return function(x) {     return f(g(x))  }}

function triple(x) {   return x * 3 }

function double(x) {   return x * 2}

const tripleThenDouble = compose(triple, double)

const messedAroundAndGotATripleDouble = tripleThenDouble(2)

Это простой пример, но он показывает, как вы можете сделать много преобразований на той же начальном значении.

Теперь представьте первоначальное значение - это презентационная компонента, в то время как контейнер является одним из функций, которые преобразуют начальное значение. Ум взорвался!

Чтобы начать использовать пересчитать Вам нужно тянуть в пересчитать библиотека. Под Пакеты Давайте добавим пересчитать библиотека.

{ "name": "esnextbin-sketch", "version": "0.0.0", "dependencies": {   "react": "15.3.2",   "react-dom": "15.3.2",   "recompose": "latest",   "babel-runtime": "6.11.6" }}

Возвращаясь к Код Давайте импортируем составить от пересчитать Отказ

import { compose } from 'recompose'

Тогда вы можете использовать композицию для дальнейшего абстрактации компонента высшего порядка.

const HigherOrderComponent = compose( container(  'https://fcctop100.herokuapp.com/api/fccusers/top/alltime' ))

И вы можете быть более декларативным о том, что делает весь компонент.

const FetchAndDisplayFCCData = HigherOrderComponent(Presentational)

render(, document.querySelector('#root'))

Наконец, это позволило вам создавать компоненты, которые являются универсальными и гибкими. Вы даже можете проверить ваши презентационные компоненты отдельно от компонентов высшего порядка. Компоненты более высокого порядка FTW!

Для ударов давайте обновим презентационную компонент для рендеринга списка элементов вместо большого блока данных.

const Presentational = ({ data }) =>  
   {data.map((v, k) =>      
       {v.username}     
   )} 

Whaw! Это было много. Если вы хотите увидеть готовый продукт, посмотрите на Gist, который я создал здесь Отказ

Для получения дополнительной информации посетите Endrew Clark's Great Ractive Utility библиотека под названием пересчитать Узнать больше!

Acdlite/ReComose Пересматривайте - ремень коммунальной службы реагирования для функциональных компонентов и компонентов высшего порядка. github.com.