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

Что такое "реконсиляция" в React и какой путь проходит компонент от кода до отрисовки на экран, какие рендереры уже существуют и как написать свой собственный на примере отрисовки React-компонентов в Figma

Дополнительные материалы: https://github.com/LosYear/react-reconciler-talk

Transcript

1. React Reconciler Как написать собственный рендерер
2. Ярослав Лосев LosYear github.com/losyear twitter.com/losyear
3. React
4. React Figma react-figma.now.sh github.com/react-figma
5. function components hooks class components lifecycle ref suspense context concurrent mode error boundaries key prop div span img props state
6. function components hooks class components lifecycle ref suspense context concurrent mode error boundaries key prop div span img View Text Image props state
7. ref suspense context props class components function components hooks concurrent mode error boundaries lifecycle key prop div span img View Text Image state Host-components Reconciler
9. Component const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> );
10. const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> ); !=> {
11. const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> ); !=> {
12. const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> ); !=> {
13. const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> ); !=> {
14. createElement const App = ({username}) => ( <div className="app"> <p>Hello, {username}!</p> </div> ); !=> { const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), );
15. React Element { $$typeof: Symbol(react.element), type: 'div', props: { className: 'app', children: { $$typeof: Symbol(react.element), type: 'p', props: { children: ['Hello', ‘tver.io’, '!'], }, }, }, }
16. f(state, props) "=> React.Element
17. React – декларативный API
19. !=> props, state deleted updated
20. Реконсиляция
21. Рендерер получает изменения 
 и применяет их
22. Reconciler Renderer • Оперирует деревьями • UI agnostiс • Отрисовывает представление в конкретной среде • UI dependent
23. React Native const WelcomeScreen = () => ( <View> <Header title="Welcome to React Native" /> <Text style={header}>Step One</Text> <Text>Edit App.js to change this screen and turn it into your app.</Text> … </View> );
24. Ink const Counter = () => { const [i, setI] = useState(0); useEffect(() => { setInterval(() => { setI(prev => prev + 1); }, 100); }, []); return <Color green> {i} tests passed </Color>; };
25. React Hardware const App = () => { const [ledState, setLedState] = useState(false); useEffect(() => { setInterval(() => { setLedState(prev => !prev); }, 1000); }, []); return <Led pin={13} value={ledState ? 255 : 0} />; }; const PORT = '/dev/tty.usbmodem1411'; ReactHardware.render(<App />, PORT);
26. React Figma const App = () => ( <Frame name="Awesome frame"> <Rectangle name="More awesome rectangle" width={200} height={100} backgroundColor="#dd55aa" /> </Frame> );
27. Let’s code
28. +
29. Figma Plugin API
30. FrameNode <frame /> RectangleNode <rectangle />
31. Вместо заключения
32. Всегда последние фишки React Определяется только средозависимая часть React DevTools Hot Reloading Дает лучшее понимание React Весело
33. ☹ Мало документации ☹ “Use it at your own risk” ☹ Иногда интегрироваться с host-environment сложно
34. Что дальше?
35. LosYear github.com/losyear twitter.com/losyear bit.ly/react-reconciler-talk Вопросы?