React Reconciler: как написать собственный рендерер – HolyJS Moscow 2020

React — удивительно универсальная технология, прочно вошедшая в нашу жизнь. Применение React уже давно вышло за пределы веба, его используют в огромном множестве задач: от разработки мобильных приложений и до генерации макетов. Интересно ли вам, как такое стало возможно?

В ходе доклада мы разберем, что такое React Reconciler и как с его помощью создаются рендеры, напишем мини-версию привычного React DOM и увидим, как можно связать React с более экзотичными средами на примере отрисовки React-компонентов в Figma.

Доклад окажется полезным практикующим разработчикам и прольет свет на внутреннее устройство архитектуры React и React DOM.

Transcript

1. React Reconciler Как написать собственный рендерер HolyJS Moscow 2020
2. Ярослав Лосев LosYear github.com/losyear twitter.com/losyear Redis, креативное агентство
3. React Figma react-figma.dev github.com/react-figma @ilialesik @losyear
4. О чем поговорим? React Reconciler React → DOM Figma & Figma API React → Figma Итоги
5. О чем поговорим? React Reconciler React → DOM Figma & Figma API React → Figma Итоги
6. import React from ‘react’; import ReactDOM from ‘react-dom’;
7. Reconciler hostConfig Набор функций, специфичных для среды отрисовки. Например, как создать или изменить узел. Модуль react-reconciler с npm. Является общим для всех отрисовщиков
8. Reconciler • UI agnostic • Находит изменения дерева элементов • Передает найденные изменения отрисовщику
9. Renderer • UI dependent • Оперирует хост-компонентами • Атомарно применяет изменения в конкретной среде
10. О чем поговорим? React Reconciler React → DOM Figma & Figma API React → Figma Итоги
11. import ReactDOM from ‘react-dom’; . . . ReactDOM.render(<App/>, root);
12. import Reconciler from 'react-reconciler'; const hostConfig = {}; const render = (jsx, root) => { const reconciler = Reconciler(hostConfig); const container = reconciler.createContainer(root, false, false); reconciler.updateContainer(jsx, container); };
13. import Reconciler from 'react-reconciler'; const hostConfig = {}; const render = (jsx, root) => { const reconciler = Reconciler(hostConfig); const container = reconciler.createContainer(root, false, false); reconciler.updateContainer(jsx, container); };
14. import Reconciler from 'react-reconciler'; const hostConfig = {}; const render = (jsx, root) => { const reconciler = Reconciler(hostConfig); const container = reconciler.createContainer(root, false, false); reconciler.updateContainer(jsx, container); };
15. import Reconciler from 'react-reconciler'; const hostConfig = {}; const render = (jsx, root) => { const reconciler = Reconciler(hostConfig); const container = reconciler.createContainer(root, false, false); reconciler.updateContainer(jsx, container); };
16. import Reconciler from 'react-reconciler'; const hostConfig = {}; const render = (jsx, root) => { const reconciler = Reconciler(hostConfig); const container = reconciler.createContainer(root, false, false); reconciler.updateContainer(jsx, container); };
17. Режимы работы
18. Режимы работы supportsMutation: true Мутирует существующие ноды: • appendChild, insertBefore, removeChild • commitUpdate Например: React DOM, React Figma, …
19. Режимы работы supportsPersistence: true Клонирует и заменяет ноды: • replaceContainerChildren, createContainerChildSet • сloneInstance Например: React Native, canvas, console, …
21. Live code • Отрисовываем React в DOM • Компоненты • <div>, <p>, <img> • Атрибуты • className, onClick, src
22. Первоначальная отрисовка
23. const InitialRenderExample = () => ( <div className="initial-render-example"> <img src="/public/1.png" /> <p>Hello!</p> </div> );
24. const InitialRenderExample = () => ( <div className="initial-render-example"> <img src="/public/1.png" /> <p>Hello!</p> </div> );
25. const InitialRenderExample = () => ( <div className="initial-render-example"> <img src="/public/1.png" /> <p>Hello!</p> </div> );
26. 1. getRootHostContext
27. Передает первоначальный контекст между вызовами методов getRootHostContext(rootContainerInstance: Container): HostContext
28. 1. getRootHostContext 2. getChildHostContext
29. Передает контекст от родителя к детям getChildHostContext(parentContext: HostContext, type: string, …): HostContext
30. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent
31. Нужно ли обрабатывать текст как отдельные ноды shouldSetTextContent(type: string, props: Props): boolean
32. shouldSetTextContent setTextContent: false const paragraph = document.createElement('p'); const helloText = document.createTextNode('Hello!'); paragraph.appendChild(helloText);
33. shouldSetTextContent setTextContent: true const textarea = document.createElement('textarea'); textarea.value = "Hello!";
34. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent
35. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance
36. Создает представление хост-компонента в среде createInstance(type: string, props: Props, …): Instance
37. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren
38. Совершает дополнительные действия после создания узла finalizeInitialChildren(parent: Instance, type: string, props: Props): boolean
39. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent
40. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 10. createTextInstance
41. Создает представление текстового листа createTextInstance(text: string, …): TextInstance
42. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 10. createTextInstance
43. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance
44. Добавляет вершину родителю при первоначальной отрисовке appendInitialChild( parent: Instance, child: Instance | TextInstance ): void
45. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren
46. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren
49. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren 18. prepareForCommit
50. Осуществляет подготовку к внесению изменений prepareForCommit(containerInfo: Container): void
51. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren 18. prepareForCommit 19. appendChildToContainer
52. Добавляет ребенка в представление appendChildToContainer( container: Container, child: Instance | TextInstance ): void
53. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren 18. prepareForCommit 19. appendChildToContainer 20. resetAfterCommit
54. Осуществляет дополнительные действия после внесения изменений resetAfterCommit(containerInfo: Container): void
55. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren 18. prepareForCommit 19. appendChildToContainer 20. resetAfterCommit 21. commitMount 22. commitMount 23. commitMount
56. Дополнительная обработка узлов после их отрисовки commitMount(instance: Container, type: string, …): void
57. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. createInstance 7. finalizeInitialChildren 8. getChildHostContext 9. shouldSetTextContent 11. createInstance 12. appendInitialChild 10. createTextInstance 13. finalizeInitialChildren 14. createInstance 15, 16. appendInitialChild 17. finalizeInitialChildren 18. prepareForCommit 19. appendChildToContainer 20. resetAfterCommit 21. commitMount 22. commitMount 23. commitMount
58. изменение пропсов Отрисовка изменений
60. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent
61. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent 5. prepareUpdate
62. Проверяет есть ли изменения и находит их prepareUpdate( instance: Instance, type: string, oldProps: Props, newProps: Props, …, ): null | UpdatePayload;
63. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent 5. prepareUpdate 6. prepareForCommit
64. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent 5. prepareUpdate 6. prepareForCommit 7. commitUpdate
65. Применяет изменения к элементу commitUpdate(instance: Instance, updatePayload: UpdatePayload, type: string, … ): void;
66. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent 5. prepareUpdate 6. prepareForCommit 7. commitUpdate 8. resetAfterCommit
67. 1. getRootHostContext 2. getChildHostContext 3. getChildHostContext 4. shouldSetTextContent 5. prepareUpdate 6. prepareForCommit 7. commitUpdate 8. resetAfterCommit
68. вставка узлов Отрисовка изменений
69. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 7. getChildHostContext 8. shouldSetTextContent 6. prepareUpdate 9. createInstance 10. finalizeInitialChildren 11. prepareUpdate 13. appendChild 12. prepareForCommit 14. resetAfterCommit
70. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 7. getChildHostContext 8. shouldSetTextContent 6. prepareUpdate 9. createInstance 10. finalizeInitialChildren 11. prepareUpdate 13. appendChild 12. prepareForCommit 14. resetAfterCommit
71. Добавляет ребенка в конец списка детей appendChild( parentInstance: Instance, child: Instance | TextInstance ): void
72. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 11. prepareUpdate 13. insertBefore 12. prepareForCommit 14. resetAfterCommit 4. getChildHostContext 5. shouldSetTextContent 8. getChildHostContext 9. shouldSetTextContent 6. createInstance 10. prepareUpdate 7. finalizeInitialChildren
73. Добавляет ребенка после определенного элемента insertBefore( parentInstance: Instance, child: Instance | TextInstance, beforeChild: Instance | TextInstance ): void
74. Добавляет ребенка после определенного элемента в контейнере insertInContainerBefore( container: Container, child: Instance | TextInstance, beforeChild: Instance | TextInstance ): void
75. удаление узла Отрисовка изменений
76. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. getChildHostContext 5. shouldSetTextContent 6. prepareUpdate 7. prepareUpdate 8. prepareForCommit 10. resetAfterCommit 9. removeChild
77. Удаляет поддерево removeChild( parentInstance: Instance, child: Instance | TextInstance ): void
78. Удаляет поддерево из контейнера removeChildFromContainer( container: Container, child: Instance | TextInstance ): void
79. текстовые листья Отрисовка изменений
80. 1. getRootHostContext 2. getChildHostContext 3. shouldSetTextContent 4. prepareUpdate 5. prepareForCommit 6. commitTextUpdate 7. resetAfterCommit
81. Вносит изменения в текстовый лист commitTextUpdate( textInstance: TextInstance, oldText: string, newText: string ): void
82. Что осталось? • Поддержка гидрации • Работа в режиме persistence • Поддержка тестовых селекторов https://github.com/facebook/react/tree/master/packages/react-reconciler
83. О чем поговорим? React Reconciler React → DOM Figma & Figma API React → Figma Итоги
85. Figma Plugin API
87. Figma API demo https://www.figma.com/plugin-docs/intro/
88. Live code • Отрисовываем React в Figma • Компоненты • <frame>, <text>, <rectangle> • Атрибуты • x, y, width, height, backgroundColor
89. А можно ли из Figma в React? • github.com/bernaferrari/FigmaToCode • overlay-tech.com • Зар Захаров, Александр Каменяр — Figma to React: доставка дизайна в код
90. А можно универсально? https://holyjs-moscow.ru/2020/msk/talks/5udhzhsrgbzzg3r496hmge/
91. О чем поговорим? React Reconciler React → DOM Figma & Figma API React → Figma Итоги
92. React Native const WelcomeScreen = () => ( <View> <Header title="Welcome to React" /> <Text style={header}> Step One </Text> <Text> Edit App.js to change… </Text> … </View> );
93. Ink const Counter = () => { const [i, setI] = useState(0); useEffect(() => { setInterval(() => { setI((prev) => prev + 1); }, 100); }, []); return <Color green> {i} tests passed </Color>; };
94. React Hardware const App = () => { const [led, setLed] = useState(false); useEffect(() => { setInterval(() => { setLed((prev) => !prev); }, 1000); }, []); return <Led pin={13} value={led ? 255 : 0} />; }; const PORT = "/dev/tty.usbmodem1411"; ReactHardware.render(<App />, PORT);
95. React Figma const App = () => ( <Frame name="Awesome frame"> <Rectangle name="More awesome rectangle" width={200} height={100} backgroundColor="#dd55aa" /> </Frame> );
96. React PDF const MyDocument = () => ( <Document> <Page style={styles.body}> <Text style={styles.header} fixed> ~ Created with react-pdf ~ </Text> … <Image style={styles.image} src="/images/quijote1.jpg" /> … </Page> </Document> );
97. Всегда последние фишки React Определяется только средозависимая часть React DevTools Hot Reloading Дает лучшее понимание React Весело
98. ☹ Мало документации ☹ “Use it at your own risk” ☹ Иногда интегрироваться с host-environment сложно
99. bit.ly/react-reconciler-holy LosYear github.com/losyear twitter.com/losyear