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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Ярослав Лосев LosYear github.com/losyear twitter.com/losyear

Slide 3

Slide 3 text

React

Slide 4

Slide 4 text

React Figma react-ﬁgma.now.sh github.com/react-ﬁgma

Slide 5

Slide 5 text

function components hooks class components lifecycle ref suspense context concurrent mode error boundaries key prop div span img props state

Slide 6

Slide 6 text

function components hooks class components lifecycle ref suspense context concurrent mode error boundaries key prop div span img View Text Image props state

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Component const App = ({username}) => (

Hello, {username}!

);

Slide 10

Slide 10 text

const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => (

Hello, {username}!

); !=> {

Slide 11

Slide 11 text

const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => (

Hello, {username}!

); !=> {

Slide 12

Slide 12 text

const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => (

Hello, {username}!

); !=> {

Slide 13

Slide 13 text

const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), ); createElement const App = ({username}) => (

Hello, {username}!

); !=> {

Slide 14

Slide 14 text

createElement const App = ({username}) => (

Hello, {username}!

); !=> { const App = ({username}) => React.createElement( 'div', className: 'app', }, React.createElement( 'p', null, 'Hello, ', username, '!' ), );

Slide 15

Slide 15 text

React Element { $$typeof: Symbol(react.element), type: 'div', props: { className: 'app', children: { $$typeof: Symbol(react.element), type: 'p', props: { children: ['Hello', ‘tver.io’, '!'], }, }, }, }

Slide 16

Slide 16 text

f(state, props) "=> React.Element

Slide 17

Slide 17 text

React – декларативный API

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

!=> props, state deleted updated

Slide 20

Slide 20 text

Реконсиляция

Slide 21

Slide 21 text

Рендерер получает изменения   и применяет их

Slide 22

Slide 22 text

Reconciler Renderer • Оперирует деревьями • UI agnostiс • Отрисовывает представление в конкретной среде • UI dependent

Slide 23

Slide 23 text

React Native const WelcomeScreen = () => ( Step One Edit App.js to change this screen and turn it into your app. … );

Slide 24

Slide 24 text

Ink const Counter = () => { const [i, setI] = useState(0); useEffect(() => { setInterval(() => { setI(prev => prev + 1); }, 100); }, []); return {i} tests passed ; };

Slide 25

Slide 25 text

React Hardware const App = () => { const [ledState, setLedState] = useState(false); useEffect(() => { setInterval(() => { setLedState(prev => !prev); }, 1000); }, []); return ; }; const PORT = '/dev/tty.usbmodem1411'; ReactHardware.render(, PORT);

Slide 26

Slide 26 text

React Figma const App = () => ( );

Slide 27

Slide 27 text

Let’s code

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Figma Plugin API

Slide 30

Slide 30 text

FrameNode RectangleNode

Slide 31

Slide 31 text

Вместо заключения

Slide 32

Slide 32 text

Всегда последние фишки React Определяется только средозависимая часть React DevTools Hot Reloading Дает лучшее понимание React Весело

Slide 33

Slide 33 text

☹ Мало документации ☹ “Use it at your own risk” ☹ Иногда интегрироваться с host-environment сложно

Slide 34

Slide 34 text

Что дальше?

Slide 35

Slide 35 text

LosYear github.com/losyear twitter.com/losyear bit.ly/react-reconciler-talk Вопросы?