Slide 1
Slide 1 text
WRITING
YOUR
OWN
REACT
RENDERER
@ R A P H A M O R I M S
Slide 2
Slide 2 text
WHO THE HELL IS THIS GUY?
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Sim!
Sou o moleque
que chegou
atrasado!
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Software Developer Engineer @godaddy
JS Foundation Member @jquery
Maintainer React-TV
Raphael Amorim
Previously @globocom, @petrobras
22 years old
Mozillian
Metido a besta
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Não tem desconto
na compra do domínio!
Slide 11
Slide 11 text
React
@ R A P H A M O R I M S
Slide 12
Slide 12 text
difference between
components,
their instances,
and elements in React
Slide 13
Slide 13 text
For example,
you may declare a
Button component
by creating a class.
Slide 14
Slide 14 text
When the program is running,
you may have several instances
of this component on screen,
each with its own properties and
local state.
Slide 15
Slide 15 text
This is the traditional
object oriented UI programming.
Slide 16
Slide 16 text
And why introduce elements?
Slide 17
Slide 17 text
In this traditional UI model,
it is up to you take care of
creating and destroying child
component instances.
Slide 18
Slide 18 text
If a Form component wants to render
a Button component.
It needs to create its instance, and
manually keep it up to date with
any new information.
Slide 19
Slide 19 text
class Form extends TraditionalObjectOrientedView {
render() {
// Read some data passed to the view
const { isSubmitted, buttonText } = this.attrs;
if (!isSubmitted && !this.button) {
// Form is not yet submitted. Create the button!
this.button = new Button({
children: buttonText,
color: 'blue'
});
this.el.appendChild(this.button.el);
}
if (this.button) {
// The button is visible. Update its text!
this.button.attrs.children = buttonText;
this.button.render();
}
if (isSubmitted && this.button) {
// Form was submitted. Destroy the button!
this.el.removeChild(this.button.el);
this.button.destroy();
}
. . .
Slide 20
Slide 20 text
Each component has to keep
references to its DOM node and to
the instances of the children
components, and create, update,
and destroy them when the time is
right.
Slide 21
Slide 21 text
Now let’s talk about React.
Slide 22
Slide 22 text
In React, this is where
the elements come to rescue.
Slide 23
Slide 23 text
An element is a plain
object describing a component
instance or DOM node and its
desired properties.
Slide 24
Slide 24 text
It contains only information
about the component type
(for example, a Button),
its properties
(for example, its color),
and any child elements inside it.
Slide 25
Slide 25 text
An element is not an actual instance.
Rather, it is a way to tell React:
What you want to see
on the screen
Slide 26
Slide 26 text
You can’t call any methods on the element.
It’s just an immutable description object with
two fields:
type: (string | Component)
props: Object.*
Slide 27
Slide 27 text
You can’t call any methods on the element.
It’s just an immutable description object with
two fields:
type: (string | Component)
props: Object.*
Slide 28
Slide 28 text
When the element’s type is a string, an element
represents a DOM node with that tag name,
and props correspond to its attributes.
This is what React will render. For example:
Slide 29
Slide 29 text
{
type: ‘button',
props: {
className: 'button button-blue',
children: {
type: 'b',
children: 'OK!'
}
}
}
Slide 30
Slide 30 text
OK!
Slide 31
Slide 31 text
By convention, when we want to create an
element tree, we specify one or more child
elements as the children prop of their
containing element.
Slide 32
Slide 32 text
What’s important is that both child and
parent elements are just descriptions
and not actual instances
Slide 33
Slide 33 text
They don’t refer to anything on the screen
when you create them. You can create them
and throw them away, and it won’t matter
much.
really…
React-DOM, React-Hardware, React-Native, React-TV […] does it.
Slide 34
Slide 34 text
React Elements are easy to traverse, don’t
need to be parsed, and of course are
much lighter than the actual DOM
elements.
Slide 35
Slide 35 text
they’re just objects!
Slide 36
Slide 36 text
However, the type of an element can also
be a function or class corresponding to a
React component.
Slide 37
Slide 37 text
{
type: Button,
props: {
color: 'blue',
children: 'OK!'
}
}
Slide 38
Slide 38 text
This is the core idea of React.
Slide 39
Slide 39 text
An element describing a component is
also an element, just like an element
describing the DOM node.
They can be nested and mixed with each
other.
Slide 40
Slide 40 text
This feature lets you define
a OkButton component as a Button
with a specific color property value.
Without worrying about
whether Button renders to a button,
a div, or something else entirely.
Slide 41
Slide 41 text
const ConfirmButton = ({ children }) => ({
type: Button,
props: {
color: ‘green',
children: children
}
});
Slide 42
Slide 42 text
const CreateAccount = () => ({
type: 'div',
props: {
children: [{
type: 'p',
props: {
children: ‘Welcome to Nubank!’
}
}, {
type: ConfirmButton,
props: {
children: ‘Yahooo!'
}
}, {
type: Button,
props: {
color: 'red',
children: 'Cancel'
}
}]
});
Slide 43
Slide 43 text
const CreateAccount = () => (
);
Welcome to Nubank
Yahooo! CancelSlide 44
Slide 44 text
When React sees an element with a function
or class type,
it will know to ask that component what
element it renders to with the given props.
Slide 45
Slide 45 text
{
type: Button,
props: {
color: 'blue',
children: 'OK!'
}
}
Slide 46
Slide 46 text
React will ask Button what it renders to,
and it will get:
Slide 47
Slide 47 text
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
children: 'OK!'
}
}
}
Slide 48
Slide 48 text
React will repeat this process until it knows the
underlying DOM tag elements for every
component on the page.
Slide 49
Slide 49 text
const Form = ({ isSubmitted, buttonText }) => {
if (isSubmitted) {
// Form submitted! Return a message element.
return {
type: Message,
props: {
text: 'Success!'
}
};
}
// Form still visible! Return a button element.
return {
type: Button,
props: {
children: buttonText,
color: 'blue'
}
};
};
Slide 50
Slide 50 text
The returned element tree can contain both
elements describing DOM nodes, and elements
describing other components.
This lets you compose independent parts of UI
without relying on their internal DOM structure.
Slide 51
Slide 51 text
We let React create, update, and destroy instances.
Slide 52
Slide 52 text
We describe them with elements we return from the
components, and React takes care of managing the
instances.
Slide 53
Slide 53 text
In the last code, Form, Message, and Button are
React components.
They can either be written as functions, as above, or
as classes descending from React.Component:
Slide 54
Slide 54 text
class Button extends React.Component {
render() {
const { children, color } = this.props;
// Return an element describing a
// {children}
return {
type: 'button',
props: {
className: 'button button-' + color,
children: {
type: 'b',
props: {
children: children
}
}
}
};
}
}
Slide 55
Slide 55 text
When a component is defined as a class, it is a little
more powerful than a functional component.
It can store some local state and perform custom
logic when the corresponding DOM node is created
or destroyed.
Slide 56
Slide 56 text
A functional component is less powerful but is
simpler, and it acts like a class component
with just a single render() method.
Slide 57
Slide 57 text
However, whether functions or classes,
fundamentally they are all components to React.
They take the props as their input, and return the
elements as their output.
Slide 58
Slide 58 text
ReactDOM.render({
type: Form,
props: {
isSubmitted: false,
buttonText: 'OK!'
}
}, document.getElementById('root'));
Slide 59
Slide 59 text
At the end of this process React knows the result DOM
tree, and a renderer like ReactDOM or React
Native applies the minimal set of changes necessary to
update the actual DOM nodes.
Slide 60
Slide 60 text
Extracted from:
https://medium.com/@dan_abramov/react-
components-elements-and-instances-90800811f8ca
Slide 61
Slide 61 text
Reconciliation
@ R A P H A M O R I M S
Slide 62
Slide 62 text
React provides a declarative API so
that you don’t have to worry about
exactly what changes on every
update.
Slide 63
Slide 63 text
Tl;dr;
React’s “diffing” algorithm so that
component updates are predictable
while being fast enough for high-
performance apps.
Slide 64
Slide 64 text
render()
Slide 65
Slide 65 text
Based on current props and
initialState.
Slide 66
Slide 66 text
Create a tree of React elements.
Slide 67
Slide 67 text
Render is based on number of
elements in the tree.
O(n3)
Slide 68
Slide 68 text
displaying 1000 elements
===
one billion comparisons
Slide 69
Slide 69 text
React implements a heuristic O(n)
algorithm based on two
assumptions:
Slide 70
Slide 70 text
1.Two elements of different types will produce different
trees.
Slide 71
Slide 71 text
2. The developer can hint at which child elements
may be stable across different renders with
a key prop.
Slide 72
Slide 72 text
Elements Of Different Types
Slide 73
Slide 73 text
Slide 74
Slide 74 text
When tearing down a tree, old DOM nodes are
destroyed.
Slide 75
Slide 75 text
Component instances receive componentWillUnmount().
When building up a new tree, new DOM nodes are
inserted into the DOM.
Component instances receive componentWillMount() and
then componentDidMount().
Any state associated with the old tree is lost.
Slide 76
Slide 76 text
Component instances receive componentWillUnmount().
When building up a new tree, new DOM nodes are
inserted into the DOM.
Component instances receive componentWillMount() and
then componentDidMount().
Any state associated with the old tree is lost.
Slide 77
Slide 77 text
Slide 78
Slide 78 text
DOM Elements Of The Same Type
Slide 79
Slide 79 text
React looks at the attributes of both,
keeps the same underlying DOM node,
and only updates the changed
attributes
Slide 80
Slide 80 text
Slide 81
Slide 81 text
Recursing On Children
Slide 82
Slide 82 text
By default, when recursing on the children
of a DOM node, React just iterates over
both lists of children at the same time and
generates a mutation whenever there’s a
difference.
Slide 83
Slide 83 text
- first
- second
- first
- second
- third
Slide 84
Slide 84 text
If you implement it naively, inserting an
element at the beginning has worse
performance.
Slide 85
Slide 85 text
- Neymar
- Firmino
- Jesus
- Neymar
- Firmino
Slide 86
Slide 86 text
React will mutate every child.
Slide 87
Slide 87 text
Keys
Slide 88
Slide 88 text
In order to solve this issue, React supports
a key attribute.
Slide 89
Slide 89 text
When children have keys, React uses the
key to match children in the original tree
with children in the subsequent tree.
Slide 90
Slide 90 text
- Neymar
- Firmino
- Jesus
- Neymar
- Firmino
Slide 91
Slide 91 text
Now React knows that the element with
key '9' is the new one, and the elements
with the keys '10' and '20' have just
moved.
Slide 92
Slide 92 text
https://reactjs.org/redirect-to-codepen/
reconciliation/index-used-as-key
Slide 93
Slide 93 text
Tradeoffs
Slide 94
Slide 94 text
Keys should be stable, predictable, and
unique. Unstable keys (like those produced
by Math.random()) will cause many
component instances and DOM nodes to
be unnecessarily recreated.
Slide 95
Slide 95 text
The algorithm will not try to match subtrees
of different component types.
Slide 96
Slide 96 text
React-Reconciler
@ R A P H A M O R I M S
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
React provides a declarative API so
that you don’t have to worry about
exactly what changes on every
update.
Slide 99
Slide 99 text
I would like to announce
something that I’m working on!
Slide 100
Slide 100 text
github.com/raphamorim/
react-ape
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
github.com/raphamorim/
react-dog-renderer
@raphamorims
Slide 103
Slide 103 text
O correto é bixxxxxcoito.
Thanks everybody.
@raphamorims