D2前端技术论坛

闫畅 React Suspense

1. Migration to React Suspense 闫畅 twitter@cyan_binary
2. Instead of learning a new feature…
3. Instead of learning a new feature… let's fix real problems 😄
4. Suspend /səˈspend/ verb a. to cause to stop temporarily b. to set aside or make temporarily inoperative
5. A riddle: Why is it called “Suspense” ?
6. Demo
7. Demo • Manage your code budget with code splitting • A new way to do async data fetching • Make the application more “performant”, with a better user experience
8. code splitting
9. bundle.js
10. … 1.chunk.js 0.chunk.js bundle.js
11. Recap: • React.lazy() • <Suspense fallback={<Spinner />}>
12. Async data fetching (not ready, yet)
13. Let’s go back to the demo 🚗💨 and see if there’s any anti-patterns
14. What’s the problems behind the spinners? 🤔
15. 1. Fetching data and showing the spinners are tightly coupled in a single component
16. 1. Fetching data and showing the spinners are tightly coupled in a single component 2. Overuse of local state and life-cycle methods
17. 1. Fetching data and showing the spinners are tightly coupled in a single component 2. Overuse of local state and life-cycle methods 3. It’s an anti-pattern to use state as cache
18. Suspense coming to rescue, again!
19. Demo
20. 1. Decoupled fetching data and showing spinners
21. 1. Decoupled fetching data and showing spinners 2. No more local state or life-cycle.
22. 1. Decoupled fetching data and showing spinners 2. No more local state or life-cycle. 3. Global cache instead of local state as cache
23. What’s the magic behind <Suspense> ?
24. <ErrorBoundary> <Foo /> </ErrorBoundary>
25. <Suspense fallback> <Foo /> </Suspense>
26. <Suspense fallback> <Bar /> <Foo /> <SyncContent /> </Suspense>
27. Is the loading spinner always necessary?
28. Show the spinner only after a certain threshold
29. Concurrent Rendering
30. Demo
31. Sync mode vs. Concurrent mode
32. When updating a React component, the JavaScript call stack might look like this: @linclark
33. Rendering Commiting
34. User input 😭 Rendering Commiting
35. Rendering Commiting
36. Rendering Commiting User input 😄
37. In “Sync Mode”, the “fallback” is shown immediately.
38. In “Concurrent Mode”, React “pauses” rendering if a child component of <Suspense> is suspended.
39. In “Concurrent Mode”, React “pauses” rendering if a child component of <Suspense> is suspended React will wait as long as maxDuration, while the data is being loaded
40. Git as a Metaphor
41. Git as a Metaphor We work on our own branch
42. Git as a Metaphor Other people can continue working, even if we got suspended in our own branch
43. Git as a Metaphor Later, the blocker gets resolved
44. Git as a Metaphor Rebase our branch to master
45. Git as a Metaphor Our pull request gets merged
46. Git as a Metaphor Our pull request gets merged
47. Suspense Hands-on code splitting API Much easier to compose loading states More idiomatic React, less state or life-cycles Feels faster, with a better user experience
48. Roadmap v16.6: Suspense for code splitting ✅ v16.8: Concurrent Mode (~Q1 2019) v16.9: Suspense for data fetching (~mid 2019) https://reactjs.org/blog/2018/11/27/react-16-roadmap.html
49. Thank you See slides and code at: github.com/cyan33

相关幻灯片