Os componentes do React são bits de código independentes e reutilizáveis. Um componente React recebe uma entrada opcional e retorna um elemento React que é renderizado na tela.

Existem dois tipos principais de componentes React:

1. Os componentes funcionais são sem estado.
2. Os componentes de classe são stateful.

Um componente funcional é apenas uma função javascript simples que recebe props como argumento e retorna um elemento react. Os componentes funcionais não requerem dados de outros componentes e não interagem com nenhum outro componente .

O que os componentes funcionais PODEM fazer:

1. Aceitar e usar adereços
2. Exibir dados de alguma forma (retorne um elemento react)

1. Usarthis.state
2. Use métodos de ciclo de vida (por exemplo, componentDidmount).
3. Usar o método de renderização

import React from "react"

const Welcome = props => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  )
}

export default Welcome

Esses componentes são criados usando a sintaxe de classe do ES6. Eles têm alguns recursos adicionais, como a capacidade de conter lógica (por exemplo, métodos que manipulam eventos onClick), estado local (mais sobre isso no próximo capítulo) e outros recursos a serem explorados em seções posteriores do livro.

O que os componentes de classe PODEM fazer:

1. Faça uso da classe ES6 e estenda a Componentclasse em React
2. Usarthis.state
3. Use métodos de ciclo de vida (por exemplo, componentDidmount).
4. Usar o método de renderização
5. Aceite adereços de passe e acesse-os comthis.props

import React, {Component} from "react"

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
      </div>
    )
  }
}
export default Welcome

Sempre use um componente funcional, a menos que você precise:

1. Gerenciar estado
2. Adicionar métodos de ciclo de vida ao componente
3. Adicionar lógica para manipuladores de eventos

Componentes de apresentação

O componente de apresentação é frequentemente chamado de componente funcional sem estado que recebe props e renderiza a interface do usuário. Assim como um componente funcional, um componente de apresentação não pode:

1. Usarthis.state
2. Use métodos de ciclo de vida (por exemplo, componentDidmount).
3. Usar o método de renderização

import React from 'react'

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={ img_url } alt={title}/>
    <h3>{ title }</h3>
  </div>
)

export default Book

Os componentes do contêiner lidarão com a parte comportamental. Um componente de contêiner informa ao componente de apresentação o que deve ser renderizado usando props. Ele não deve conter marcações e estilos DOM limitados. Se você estiver usando o Redux, um componente de contêiner contém o código que despacha uma ação para uma loja. Alternativamente, este é o local onde você deve colocar suas chamadas de API e armazenar o resultado no estado do componente.

Aqui está uma definição concisa do padrão de componente do contêiner:

• Os componentes do contêiner estão principalmente preocupados com como as coisas funcionam
• Eles raramente têm qualquer marcação HTML própria, além de um wrapper<div>
• Muitas vezes são stateful
• Eles são responsáveis ​​por fornecer dados e comportamento para seus filhos (geralmente componentes de apresentação).

class BookList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: []
    };
  }

  componentDidMount() {
    fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
      .then(response => response.json())
      .then(bookData => this.setState({ books: bookData.books }))
  }

  renderBooks = () => {
    return this.state.books.map(book => {
      return (
        <div className="book">
          <img src={ book.img_url } />
          <h3>{ book.title }</h3>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="book-list">
        { this.renderBooks() }
      </div>
    )
  }
}

PureComponent

Componentes puros são usados ​​principalmente para fornecer otimizações. Eles são os componentes mais simples e rápidos que podemos escrever. Eles não dependem ou modificam o estado das variáveis ​​fora de seu escopo. Portanto, por que componentes puros podem substituir componentes funcionais simples.

Mas, uma grande diferença entre um regular React.Componente um React.PureComponenté que componentes puros realizam comparações superficiais na mudança de estado. Componentes puros cuidam shouldComponentUpdate()sozinhos. Se o anterior statee/ou propsfor o mesmo que o próximo, o componente não será renderizado novamente.

React.PureComponenté usado para otimizar o desempenho e não há motivo para você considerar usá-lo, a menos que encontre algum tipo de problema de desempenho.

import React from ‘react
class Welcome extends React.PureComponent{
  render(){
    return (
      <div>
        <h1>Welcome!</h1>
      </div>
    )
  }
}
export default Welcome