Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
I am hooked on React
Maurice de Beijer - @mauricedb
 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: htt...
The React
Newsletter
© ABL - The Problem Solver 3
http://bit.ly/ReactNewsletter
History
of
Components
© ABL - The Problem Solver 4
Original
Component
API
© ABL - The Problem Solver 5
Class
Components
© ABL - The Problem Solver 6
State
&
Lifecycle
© ABL - The Problem Solver 7
The problem
with classes
© ABL - The Problem Solver 8
this
© ABL - The Problem Solver 9
Fat arrow for
some functions
© ABL - The Problem Solver 10
Single
responsibility
in multiple
functions
© ABL - The Problem Solver 11
Functional
Components
© ABL - The Problem Solver 12
The
Problem
© ABL - The Problem Solver 13
And
© ABL - The Problem Solver 14
If your only
tool …
© ABL - The Problem Solver 15
Deeply
Nested
Components
© ABL - The Problem Solver 16
Many are
wrappers to
add props
© ABL - The Problem Solver 17
Render
Props
© ABL - The Problem Solver 18
But…
© ABL - The Problem Solver 19
Introducing
Hooks
© ABL - The Problem Solver 20
Open
Mind
© ABL - The Problem Solver 21
useState()
© ABL - The Problem Solver 22
Just
State
© ABL - The Problem Solver 23
useEffect()
© ABL - The Problem Solver 24
The
Context
© ABL - The Problem Solver 25
Render
Props
© ABL - The Problem Solver 26
useContext()
© ABL - The Problem Solver 27
All hooks
 Basic hooks
 useState()
 useEffect()
 useContext()
 Additional Hooks
 useReducer()
 useMutationEffect()
...
Custom
Hooks
© ABL - The Problem Solver 30
Using
The
Hook
© ABL - The Problem Solver 31
Abortable
Fetch
Hook
© ABL - The Problem Solver 32
Fetch
Request
© ABL - The Problem Solver 33
Rules
of
Hooks
© ABL - The Problem Solver 34
 Hooks can only be used in functional components
 Or in other hooks
 Not i...
Hooks are
optional
© ABL - The Problem Solver 35
Classes will
keep on
working
© ABL - The Problem Solver 36
It’s a
Proposal
© ABL - The Problem Solver 37
https://reactjs.org/hooks
Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 38
Próxima SlideShare
Cargando en…5
×

I am hooked on React

353 visualizaciones

Publicado el

Presentation about the new React hooks capabilities at JS Poland 2018.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

I am hooked on React

  1. 1. I am hooked on React Maurice de Beijer - @mauricedb
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2ABL - The Problem Solver
  3. 3. The React Newsletter © ABL - The Problem Solver 3 http://bit.ly/ReactNewsletter
  4. 4. History of Components © ABL - The Problem Solver 4
  5. 5. Original Component API © ABL - The Problem Solver 5
  6. 6. Class Components © ABL - The Problem Solver 6
  7. 7. State & Lifecycle © ABL - The Problem Solver 7
  8. 8. The problem with classes © ABL - The Problem Solver 8
  9. 9. this © ABL - The Problem Solver 9
  10. 10. Fat arrow for some functions © ABL - The Problem Solver 10
  11. 11. Single responsibility in multiple functions © ABL - The Problem Solver 11
  12. 12. Functional Components © ABL - The Problem Solver 12
  13. 13. The Problem © ABL - The Problem Solver 13
  14. 14. And © ABL - The Problem Solver 14
  15. 15. If your only tool … © ABL - The Problem Solver 15
  16. 16. Deeply Nested Components © ABL - The Problem Solver 16
  17. 17. Many are wrappers to add props © ABL - The Problem Solver 17
  18. 18. Render Props © ABL - The Problem Solver 18
  19. 19. But… © ABL - The Problem Solver 19
  20. 20. Introducing Hooks © ABL - The Problem Solver 20
  21. 21. Open Mind © ABL - The Problem Solver 21
  22. 22. useState() © ABL - The Problem Solver 22
  23. 23. Just State © ABL - The Problem Solver 23
  24. 24. useEffect() © ABL - The Problem Solver 24
  25. 25. The Context © ABL - The Problem Solver 25
  26. 26. Render Props © ABL - The Problem Solver 26
  27. 27. useContext() © ABL - The Problem Solver 27
  28. 28. All hooks  Basic hooks  useState()  useEffect()  useContext()  Additional Hooks  useReducer()  useMutationEffect()  useLayoutEffect ()  useCallback ()  useMemo()  useRef()  useImperativeMethods()  Custom hooks  … © ABL - The Problem Solver 29
  29. 29. Custom Hooks © ABL - The Problem Solver 30
  30. 30. Using The Hook © ABL - The Problem Solver 31
  31. 31. Abortable Fetch Hook © ABL - The Problem Solver 32
  32. 32. Fetch Request © ABL - The Problem Solver 33
  33. 33. Rules of Hooks © ABL - The Problem Solver 34  Hooks can only be used in functional components  Or in other hooks  Not in class based components  Hooks must always be created in the same order  Must be outside loops, conditions or nested functions  Hooks names must be prefixed with `use`  There is an ESLint plugin to enforce these rules
  34. 34. Hooks are optional © ABL - The Problem Solver 35
  35. 35. Classes will keep on working © ABL - The Problem Solver 36
  36. 36. It’s a Proposal © ABL - The Problem Solver 37 https://reactjs.org/hooks
  37. 37. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 38

×