React Fiber (Zurich Edition)

Transcript

1. React Fiber by Glenn Reyes • @glnnrys
2. " React Zurich!
6. React Fiber
7. What is React Fiber?
8. • Complete rewrite of React core algorithm • Same Public API • Still being tested at Facebook internally • Release with v16 (pretty soon)
9. isfiberreadyyet.com Is Fiber Ready Yet?
11. Why Fiber?
12. Fiber resolves long-standing problems
16. React Fiber
17. Scheduling
18. Prioritizing
19. ReactPriorityLevel { NoWork: 0, // No work is pending. SynchronousPriority: 1, // For controlled text inputs. TaskPriority: 2, // Completes at the end of the current tick. AnimationPriority: 3, // Needs to complete before the next frame. HighPriority: 4, // Interaction that needs to complete soon LowPriority: 5, // Data fetching, or result from updating stores. OffscreenPriority: 6, // Won't be visible };
20. Pause, abort & reuse work
21. requestAnimationFrame(cb) requestIdleCallback(cb)
24. Fiber
25. Fiber
26. Stack
27. • Error boundaries • No PropTypes in prod builds • Render multiple elements
28. const Foo = () => ([ <tr>foo</tr>, <tr>bar</tr>, ]);
29. How to use Fiber now?
30. Wait until there is an officially release!
32. yarn add react@next react-dom@next npm install —-save react@next react-dom@next // index.js import ReactDOM from ‘react-dom’; // default DOM
33. yarn add react@next react-dom@next npm install —-save react@next react-dom@next // index.js import ReactDOMFiber from ‘react-dom/lib/ReactDOMFiber';
34. yarn add react@next react-dom@next npm install —-save react@next react-dom@next // index.js import ReactDOMFiber from ‘react-dom/lib/ReactDOMFiber'; Don’t do this!!!
37. UMD build git clone https://github.com/facebook/react.git yarn yarn run build → /build/react-dom-fiber.min.js
38. facebook.com/groups/ reactfiberbeta
39. www.beta.facebook.com
40. How can I prove if it is React Fiber or Stack?
42. How to 1. Join https://facebook.com/groups/reactfiberbeta 2. Visit https://www.beta.facebook.com
43. Useful resouces • Things: github.com/koba04/react-fiber-resources • Beta: facebook.com/groups/reactfiberbeta • Chat: https://m.me/g/Abas8IcWxIvjVxHN • Tests: isfiberreadyyet.com • News: Follow GH issues & PRs (using “fiber” filter)
44. Thank you! @glnnrys