High Order Components com React para iniciantes

const multiply = (x) => (y) => x * y

multiply
//=> (x) => (y) => x * y

multiply(5)
//=> (y) => 5 * y

multiply(5)(20)
//=> 5 * 20

Quando chamamos a função multiply com apenas um argumento, estamos parcialmente aplicando a função. Quando chamamos multiply(5), obtemos uma função que irá multiplicar a entrada em 5. Se chamarmos multiply(7), obteremos uma função que irá multiplicar a entrada por 7 e assim por diante. Podemos usar uma aplicação parcial para criar novas funções com uma entrada predefinida:

const multiply = (x) => (y) => x * y

const multiplyByFive = multiply(5)

const multiplyBy100 = multiply(100)

multiplyByFive(20)
//=> 100

multiply(5)(20)
//=> 100

multiplyBy100(5)
//=> 500

multiply(100)(5)
//=> 500

Isso pode não parecer super útil no início. No entanto, você pode usar uma aplicação parcial para escrever um código que seja mais fácil de ler e raciocinar. Por exemplo, podemos substituir styled-components sintaxe de interpolação de função complexa com algo um pouco mais limpo.

// before

const Button = styled.button`
  background-color: ${({ theme }) => theme.bgColor}
  color: ${({ theme }) => theme.textColor}
`;

<Button theme={themes.primary}>Submit</Button>

// after

const fromTheme = (prop) => ({ theme }) => theme[prop]

const Button = styled.button`
  background-color: ${fromTheme("bgColor")}
  color: ${fromTheme("textColor")}
`

<Button theme={themes.primary}>Submit</Button>

Criamos uma função que aceita uma seqüência de caracteres como um parâmetro: fromTheme("textColor") que retorna uma função aceitando um objeto com uma propriedade theme:({ theme }) => theme[prop] a qual tentamos pesquisar através da cadeia inicial que passamos "textColor". Podemos ir além e escrever funções como backgroundColor e textColor que parcialmente aplicam a função fromTheme:

const fromTheme = (prop) => ({ theme }) => theme[prop]
const backgroundColor = fromTheme("bgColor")
const textColor = fromTheme("textColor")
const Button = styled.button`
  background-color: ${backgroundColor}
  color: ${textColor}
`

Funções de ordem superior

As funções de ordem superior são definidas como funções que aceitam uma função como um argumento. Você já pode estar familiarizado com funções de ordem superior se você já usou uma função como map. Se você não está familiarizado map, é uma função que se desloca e aplica uma função a cada elemento em uma matriz. Por exemplo, você pode colocar uma matriz de números como assim:

const square = (x) => x * x

[1, 2, 3].map(square)

//=> [ 1, 4, 9 ]

Podemos escrever nossa própria versão map para ilustrar este conceito:

const map = (fn, array) => {
  const mappedArray = []
for (let i = 0; i < array.length; i++) {
    mappedArray.push(
      // apply fn with the current element of the array
      fn(array[i])
    )
  }
return mappedArray
}

Podemos usar o nosso map para fazer algo como quadrado uma série de números:

const square = (x) => x * x

console.log(map(square, [1, 2, 3, 4, 5]))

//=> [ 1, 4, 9, 16, 25 ]

Ou devolva uma matriz de <li>React Elements:

const HeroList = ({ heroes }) => (
  <ul>
    {map((hero) => (
      <li key={hero}>{hero}</li>
    ), heroes)}
  </ul>
)
<HeroList heroes=[
  "Wonder Woman",
  "Black Widow",
  "Spider Man",
  "Storm",
  "Deadpool"
]/>
/*=> (
  <ul>
    <li>Wonder Woman</li>
    <li>Black Widow</li>
    <li>Spider Man</li>
    <li>Storm</li>
    <li>Deadpool</li>
  </ul>
)*/

Componentes de ordem superior

Sabemos que uma função de ordem superior é uma função que aceita uma função como argumento. Em React, qualquer função que retorna JSXé conhecida como Componente Funcional sem Estado. Um Componente Funcional básico parece assim:

const Title = (props) => <h1>{props.children}</h1>

<Title>Higher-Order Components(HOCs) for React Newbies</Title>

//=> <h1>Higher-Order Components(HOCs) for React Newbies</h1>

Um componente de ordem superior é uma função que aceita um Componente como um argumento e retorna um novo Componente. Como você usa o componente passado depende de você. Você pode ignorá-lo completamente:

// Technically an HOC
const ignore = (anything) => (props) => <h1>:)</h1>
const IgnoreHeroList = ignore(HeroList)
<IgnoreHeroList />
//=> <h1> :| </h1>

Você pode escrever um HOC que transforma sua entrada em maiúscula:

const yell = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.toUpperCase()}!
    </PassedComponent>
const Title = (props) => <h1>{props.children}</h1>
const AngryTitle = yell(Title)
<AngryTitle>Whatever</AngryTitle>
//=> <h1>WHATEVER!</h1>

Você também pode retornar um Componente Stateful, porque as classes em Javascript são syntax sugar para funções. Isso permite que você se encaixe nos métodos do lifecycle do React como componentDidMount. É aí que os HOCs se tornam realmente úteis. Agora podemos fazer coisas como passar o resultado de uma solicitação HTTP como adereços para um Componente Funcional.

const withGists = (PassedComponent) =>
  class WithGists extends React.Component {
    state = {
      gists: []
    }
componentDidMount() {
      fetch("https://api.github.com/gists/public")
      .then((r) => r.json())
      .then((gists) => this.setState({
        gists: gists
      }))
    }
render() {
      return (
        <PassedComponent
          {...this.props}
          gists={this.state.gists}
        />
      )
    }
  }
const Gists = ({ gists }) => (
  <pre>{JSON.stringify(gists, null, 2)}</pre>
)
const GistsList = withGists(Gists)
<GistsList />
//=> Before api request finishes:
// <Gists gists={[]} />
//
//=> After api request finishes:
// <Gists gists={[
//  { /* … */ },
//  { /* … */ },
//  { /* … */ }
// ]} />

Você pode ligar withGists para qualquer componente e irá passar para baixo o resultado da chamada api gists. Você pode ver um exemplo mais detalhado disso aqui.

Conclusão: HOCs são 🔥 🔥 🔥

Redux usa um HOC, connect para passar valores da sua loja de aplicativos para componentes "conectados". Também faz algumas verificações de erros e otimizações do ciclo de vida do componente que, se feito manualmente, faria com que você escrevesse uma tonelada de código de referência.

Se você se achar escrevendo muitos códigos em diferentes lugares que faz o mesmo, você poderá refatorar esse código em um HOC reutilizável.

Os HOCs são realmente expressivos e você pode construir muitas coisas legais com eles. No entanto, porque eles são tão expressivos, você pode ir ao mar com eles se quiser.

Tente manter seus HOCs simples e apontar para escrever um código que não exija que você leia um artigo longo para entendê-lo.

Exercícios adicionais

Aqui estão alguns exercícios para solidificar sua compreensão de HOCs:

• Escreva um HOC que reverte sua entrada
• Escreva um HOC que fornece dados de uma API para o Componente Passado
• Escreva um HOC que implemente shouldComponentUpdatepara evitar a reconciliação
• Escreva um HOC que use React.Children.toArray para ordenar as crianças passadas para o componente Passed.

Originally published in the Creditas Tech