Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Hello, React Hooks!
Semelhante a Hello, React Hooks! (20)
Mais de Heejong Ahn
Último
Último (20)
Hello, React Hooks!
- 2. Table of Contents • Topic: React Hooks • 1. Motivation: ? • 2. Usage: ? • 3. Internal: ?
- 4. Motivation • React Class Component (from ):
- 5. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components
- 6. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand
- 7. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand • Classes confuse both people and machines
- 8. • : HoC, Render Props
- 9. • : HoC, Render Props • •
- 10. • : HoC, Render Props • • • → Wrapper Hell
- 13. • ( , , …) :
- 14. • ( , , …) : • : componentDidMount
- 15. • ( , , …) : • : componentDidMount • : componentDidUpdate
- 16. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount
- 17. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount •
- 18. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ?
- 19. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? , . . Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies.
- 20. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? , . . Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies.
- 21. •
- 22. • • class (How does this work?)
- 23. • • class (How does this work?) • ,
- 24. • • class (How does this work?) • , •
- 25. • • class (How does this work?) • , • •
- 26. • • class (How does this work?) • , • • • Poor Minification, Flaky & unreliable Hot Reload
- 27. Hooks to the rescue!
- 28. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528
- 29. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528 No more classes, Just functions
- 30. Usage • React Hooks Class Component . • React Hooks, ?
- 31. Usage • Built-in Hooks • useState • useEffect • useRef • useContext • Custom Hooks
- 34. Built-in Hook: useState state useState
- 36. Built-in Hook: useEffect • • • • DOM • … • componentDidMount, componentDidUpdate
- 37. Built-in Hook: useEffect • useEffect DOM
- 38. Built-in Hook: useEffect (w/ cleanup) API • , : componentWillUnmountAPI
- 39. Built-in Hook: useEffect (w/ cleanup) : DOM : , • useEffect ,
- 40. Built-in Hook: useEffect (optimization) . componentDidMount [] .
- 42. Built-in Hook: useRef • • React.createRef , DOM node reference .
- 44. Other Built-in Hooks • useCallback
- 45. Other Built-in Hooks • useCallback • useMemo
- 46. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect
- 47. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • …
- 48. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • … • https://reactjs.org/docs/hooks-reference.html
- 49. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components)
- 50. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • , Hook
- 51. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • , Hook • = “use” , A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks.
- 52. Rule of Hooks (link) • Only call Hooks at the top level.
- 53. Rule of Hooks (link) • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions
- 54. Rule of Hooks (link) • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions • Only call Hooks from React function components.
- 55. Rule of Hooks (link) • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions • Only call Hooks from React function components. • Don’t call Hooks from regular JavaScript functions.
- 56. Rule of Hooks (link) • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions • Only call Hooks from React function components. • Don’t call Hooks from regular JavaScript functions. •
- 57. Custom Hooks example: useInterval https://overreacted.io/making-setinterval-declarative-with-react-hooks/
- 58. Custom Hooks example: useSpring http://react-spring.surge.sh/hooks
- 59. … and more Custom Hook examples https://usehooks.com/
- 60. Internal • React Hooks Class Component . • React Hooks , ( ) . • React Hooks ?
- 61. Rule of Hooks (revisited) • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions • Only call Hooks from React function components. • Don’t call Hooks from regular JavaScript functions. •
- 62. • Only call Hooks at the top level. • , , Don’t call Hooks inside loops, conditions, or nested functions • Only call Hooks from React function components. • Don’t call Hooks from regular JavaScript functions. • Rule of Hooks (revisited) yeah but why?
- 64. From “Rule of Hooks” doc • useState ? So how does React know which state corresponds to which useState call?
- 65. From “Rule of Hooks” doc • useState ? So how does React know which state corresponds to which useState call? • . The answer is that React relies on the order in which Hooks are called.
- 66. From “Rule of Hooks” doc • useState ? So how does React know which state corresponds to which useState call? • . The answer is that React relies on the order in which Hooks are called. • . This is why Hooks must be called on the top level of our components.
- 67. From “Rule of Hooks” doc • useState ? So how does React know which state corresponds to which useState call? • . The answer is that React relies on the order in which Hooks are called. • . This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order?
- 68. From “Rule of Hooks” doc • useState ? So how does React know which state corresponds to which useState call? • . The answer is that React relies on the order in which Hooks are called. • . This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order? • tl;dr: , .
- 69. … • Under the hood of React’s hooks system • React as a UI Runtime • React hooks: not magic, just arrays • react-reconciler/src/ReactFiberHooks.js
- 70. Summary • React Hooks CC(Class Component) . Hooks CC .
- 71. Summary • React Hooks CC(Class Component) . Hooks CC . • React useState, useEffect . , .
- 72. Summary • React Hooks CC(Class Component) . Hooks CC . • React useState, useEffect . , . • React Hooks Hook . , Hook Rules of Hook .
- 73. Summary
- 74. References (1/2) • General • Introducing Hooks • A comment on RFC: React Hooks • React as a UI Runtime • Motivation • React Today and Tomorrow and 90% Cleaner React With Hooks
- 75. References (2/2) • Usage • Making Sense of React Hooks • Making setInterval Declarative with React Hooks • Internal • Why Do React Hooks Rely on Call Order? • React hooks: not magic, just arrays • Under the hood of React’s hooks system • react-reconciler/src/ReactFiberHooks.js