Please enable JavaScript.

Coggle requires JavaScript to display documents.

React.js - Coggle Diagram

- - - - Functional
        
        only contain render methods
        
        called stateless components
        
        have no state of their own
        
        They may derive data from other components as props
        
        Can have props
        
        Cannot be reused
      - Class
        
        can hold and manage their own state
        
        have a separate render method
        
        called Stateful components
        
        Can be reused
      - High Order
        
        container for other components
        
        enables re-usability
        
        generally used when multiple components have to use a common logic
        
        takes a component and returns a new component
        
        pure components
    - - Solely output HTML
    - - Handle state and provide data
      - Logic on render
  - - - functions which "hook into" React state and lifecycle features from function components
    - - functions
    - - can only be called at the top level of a component
      - can only be called inside React function components
      - cannot be conditional
    - - flexibility in reusing an existing piece of code
      - no need to refactor the functional component into a class component when it grows complex
      - simpler to distinguish logic and UI
  - - - setState
- - - - plain JavaScript object that contains information
      - the only source of information for the store
      - only tell what to do, but they don’t tell how to do
      - Action Creators
        
        function that creates actions
      - have a type field that tells what kind of action to perform and all other fields contain information or data
    - - just pure functions that take the previous state and an action as parameters, and return the next state
      - state and action are passed as parameters
      - tell the store how to do
    - - is the object which holds the state of the application
  - - - pure functions
    - - only way to change the state is to emit an action