Please enable JavaScript.

Coggle requires JavaScript to display documents.

React Biblioteca Javascript construída pelo Facebook (Módulos Famosos,…

- - - - Serialized on Server | Hydrated into the client
      - Debug | Inspect
      - Undo/Redo
    - - Actions is plain object
      - Every action has an order (type)
      - Immutability
    - - Reducers are pure functions that receives previous state, the action and returns the new state.
  - - - Predictabiliy - para os mesmos inputs os mesmo outputs.
        
        Mutation Tracking - possível seguir as mudanças
        
        Performance - as Tries (estruturas em formato de árvores permitem manter apenas o diff das alterações), e como um novo objeto é retornado podemos fazer a comparação rasa (shallow) ao invés de fazer a profunda (deep) ===. Isso auxilia por exemplo fazer uma memoization mais simples.
      - Persistent Data Structure - Ocorre quando se preserva parte da versão anterior do objeto após o mesmo ser modificado.
- - - - É invocado imediatamente antes do componente ser inserido no DOM.
      - Não tem acesso ao DOM.
      - É chamado apenas uma vez.
      - Não causa re-render, pois o componente ainda não foi rendereizado.
    - - É invocado imediatamente depois do componente ser inserido no DOM.
      - Possui acesso ao DOM.
      - Alteração de estado nesse método causa re-render.
      - É chamado apenas uma vez.
      - É recomendado para a integração com outras bibliotecas. Ex.: jQuery e Select2. $(this._ref).select2({data: this.props.items});
  - - - É invocado imediatamente antes de o componente ser removido do DOM.
      - É o melhor lugar para se fazer a limpeza (cleanup) sem deixar vestígios do componente na interface e aplicação.
        
        Eliminar integrações com outra bibliotecas. $(this._ref).select2('destroy');
        
        Cancelar requisições Ajax.
        
        Cancelar Timers.
        
        Remover elementos do DOM criados pelo componente.
  - - - :!:: Esse método está disponível apenas quando o componente é criado usando React.createClass. Ao utilizar classes (ES6) é possível iniciar o estado direto do construtor da classe.
      - É chamado apenas uma vez na inicialização do componente.
      - Serve para iniciar o estado do componente. O objeto retornado será o estado do componente.
    - - É utilizado para definir as propriedades default do componente.
      - :!:: Esse método está disponível apenas quando o componente é criado usando React.createClass. Ao utilizar classes (ES6) é possível definir as propriedades default através da variável estática defaultProps.
      - É chamado apenas uma vez, cacheada e o objeto com as propriedades default é compartilhado entre as instâncias do componente.
  - - - É invocado sempre que o componente receber/atualizar as propriedades.
      - É um bom lugar para se alterar o estado do componente baseado nas propriedades.
      - A execução do método setState não causará re-render desnecessário.
    - - A utilização do método é indicada para melhorar a performance evitando rerendering desnecessário. Recebe dois parâmetros (nextProps, nextState) que podem auxiliar se há necessidade de se atualizar ou não o componente.
      - Caso retorne false não chamará os demais métodos: render, componentWillUpdate e componentDidUpdate.
    - - É invocado imediatamente antes do re-render, ou seja, sempre que ocorrer uma atualização no estado ou propriedade do componente.
      - O método setState não deverá ser invocado, pois caso aconteça causará um loop infinito.
      - É um bom lugar para se fazer algo antes da atualização.
    - - É invocado imediatamente depois da re-renderização, ou seja, depois que as alterações foram inseridas no DOM.
      - É um bom lugar para se realizar algo pós-render, ou pós atualização do componente.
      - É muito utilizado para atualizar outras biblioteca que estejam sendo integradas. Como por exemplo a atualização do elemento no jQuery que invoca a biblioteca select2.
        Ex.: $(this._ref).select2('destroy'); $(this._ref).select2({data: this.props.items});
- - - - how things work
        
        dispatch actions
        
        subscribe state
        
        aware of behavior
    - - how things look
        
        read data from props
        
        invoke callbacks from props
        
        unaware of behavior