class: center, middle, inverse # Pure & Higher Order Components [@gunar](https://twitter.com/gunar) ??? Introduce yourself --- class: middle # Pure Components .hidden[ # Pure Function ] ??? - Premisa que FP e Composicao de Funcoes é algo bom - React 0.14 introduziu a possibilidade de usar funcoes puras como componentes. --- class: middle .linethrought[ # Pure Components ] # Pure Function --- class: center, middle, inverse # Dado um input, # sempre retorna o mesmo output --- class: center, middle, inverse ``` Math.max(5, 10) === Math.max(5, 10) ``` ??? Funcao propriamente dita, da matematica --- class: right, middle # Não produz side-effects --- class: middle ``` function deleteFile(fileId) { api.post({ action: 'delete', fileId }) // side-effect } // returns nothing ``` ??? - Note que Item 2 nao retorna nada. --- class: center, middle, inverse # Nao depende de estado mutável externo --- class: middle, inverse ``` // "counter" is a global mutable state function incrementCounter() { counter = counter + 1 } ``` --- class: middle, inverse ``` // could be rewritten as the following pure function function incrementCounter(counter) { return counter + 1 } ``` --- class: middle, inverse ``` // "counter" is a global mutable state function incrementCounter() { counter = counter + 1 } ``` ``` // could be rewritten as the following pure function function incrementCounter(counter) { return counter + 1 } ``` ??? - Material do Eric elliot - non-determinism = parallel programming + mutable state --- class: left, middle # Pure Components .linethrought[ # Pure Function ] ??? - Vou só dar uma geral, podemos conversar depois sobre os benefícios de usar --- class: center, middle, reverse # Nem Classes ES6 #### Nem `createClass()` --- class: middle, inverse ``` const Saudacao = props =>
Olá, {props.name}!
``` -- > "Uma app React idiomática consiste principalmente de componentes funcionais (puros)." -- .footnote[Idiomática: que é próprio e característico de um idioma] --- class: right, middle #### Componentes puros tem # várias vantagens --- class: center, middle # Previnem o abuso de setState() #### em favor da utilizacao de props --- class: left, middle #### Encorajam o padrão # "smart" vs "dumb" components --- class: center, middle ### Encorajam código # reutilizável e modular --- class: right, middle #Desencorajam complexidade #### evitando componentes gigantes, complicados, e que fazem demais --- class: middle, inverse ``` const Welcome = props => (
Hello, {props.name}
) const App = () => (
) ReactDOM.render(
, document.getElementById('root') ); ``` .footnote[[Codepen](http://codepen.io/gunar/pen/vmJLJL)] --- class: center, middle, inverse # Higher Order Components --- class: left, middle, inverse ####Compõem componentes #usando componentes ??? - React - Por exemplo, um componente `
` pode ser composto de vários `
`. --- class: right, middle, inverse ####Compõem componentes #usando funções --- class: center, middle # Higher Order Components .hidden[ # Higher Order Functions ] ??? - HoC trabalham com outra unidade de composição. - HoC sao funcoes que recebem um componente base e retornam um componente com funcionalidade adicional. - Enhancers (dar um upgrade) - HoC podem ser utilizados para abstrair tarefas comuns em pedacos reutilizáveis. --- class: center, middle .linethrought[ # Higher Order Components ] # Higher Order Functions ??? - "a function which takes in a function parameter or returns a function” - Because React components are really just functions, higher order components are in fact just higher order functions. --- class: center, middle, inverse # Manipulando Props [CodePen](https://codepen.io/gunar/pen/wdPogr?editors=0010) ??? - Manupulando Props --- class: right, middle # Composição [CodePen](https://codepen.io/gunar/pen/oWMZeb?editors=0010) --- class: middle #Recompose [Docs](https://github.com/acdlite/recompose/blob/master/docs/API.md#branch) --- class: right, middle # Unit testing ??? - [Unit testing React components without a DOM](https://simonsmith.io/unit-testing-react-components-without-a-dom/) - [Enzyme](http://airbnb.io/enzyme/docs/guides/tape-ava.html) - HoCs necessitam Componentes Puros - HoC permite testar o comportamento do componente e do HoC separadatamente --- class: center, middle, inverse # Invisible Technologies, Inc. http://invisible.email/go ??? - React-redux uses HOC - Radium uses HOC - compose() multiple hoc - examples in http://blog.scottlogic.com/2016/09/20/the-power-of-the-higher-order.html --- class: right # Further reading ### [Use of Recompose in Universal React Apollo Example](https://medium.com/welikegraphql/use-of-recompose-in-universal-react-apollo-example-3d1f89bc945b)  ### [Why The Hipsters Recompose Everything](https://medium.com/javascript-inside/why-the-hipsters-recompose-everything-23ac08748198) 