React Behind The Scenes

React Behind The Scenes Thiago Alves @taltk9

Thiago Alves Luiz FrontEnd Developer @taltk9 /taltk9

codeminer42.com [email protected]

Atualmente popular

Pessoas tendem a usar/fazer algo porque é popular...

... sem saber o real objetivo

Precisamos ter controle das ações...

Precisamos manter o que criamos...

Talvez você não precise de React

jQuery var $myList = $('#my-list'); $.ajax({ url: 'https://api.domain.com/some-list', success: function
(resp) { var data = resp.data; data.map(function (value) { var $myListItem = $('<li>').html(value.title); $myList.append($myListItem); }); } });

jQuery · Editor de texto · jquery.js

React · Editor de texto · terminal · npm ·
webpack · tasks runners · react

Momento de reflexão...

Não tente resolver tudo sempre da mesma forma

Busque entender conceitos e métodos

Conheça as tecnologias existentes

Saiba que tecnologia muda

Entenda o que você está fazendo...

Entenda React

Vamos deixar tudo claro

Biblioteca para criação de interfaces

Framework

Camada de View

Componentes

Lembre de entender o objetivo...

Construção de aplicações Web

Parece complicado, mas é simples

Simples !== Familiar

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <ul id="my-list"></ul> </body> </html>

HTML Resultante <!DOCTYPE html> ... <body> <ul id="my-list"> <li>Item 1</li>
<li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>

"Mexer" com o DOM tem um custo alto

Você sabe por quê?

?????????

Browser Rendering

HTML <html> <head> <meta name="viewport" content="initial-scale=1"> <title>Critial Path: Hello world!</title>
</head> <body> <p> Hello <span>web performance</span> students </p> <div><img src="dog.jpg"></div> </body> </html>

CSS body { font-size: 16px; } p { font-weight: bold;
} span { color: red; } img { float: right; } p > span { display: none; }

Render Tree

Layout

Esse processo ocorre sempre!

DOM Manipulation

Repaint

var $body = $(body); var $p = $('.target'); $body.css({ backgroundColor:
'red', borderColor: 'blue', color: 'blue' }); $p.css({ visibility: 'hidden' });

Reflow

var $body = $(body); $body.css({ padding: '20px', border: '2px solid
blue', fontSize: '1.2rem' }); var $p = $('<p>').html('New node'); $body.append($p);

Alterações desnecessárias causam o gargalo

Como evitar essas alterações?

Virtual DOM

Reconciliation

Isso resolve o problema né?

Michael Jackson: Rendering with React https://youtu.be/7S8v8jfLb1Q

Controla alterações na aplicação

this.setState({ foo: 'bar', test: 123, oData: [ { id: 1,
title: 'Item 1'}, { id: 2, title: 'Item 2'}, { id: 3, title: 'Item 3'}, { id: 4, title: 'Item 4'}, ] });

Stateful e Stateless

Um elemento poder ter diferentes estados

Um elemento altera seu próprio estado em condições específicas

Propriedades configuram um novo elemento

<App /> // Stateful Component <Header /> // Stateless Component
<List /> // Stateless Component <button /> // Stateless Element

less states == less DOM updates

Agora resolveu o problema né?

Lembrar: Propriedades configuram um novo elemento

var App = React.createClass({ ... render: function () { return
( <section> <Header title="Fixed title" /> <List items={ this.state.data } /> <button onClick={ this.handleClick }>Refresh</button> </section> ); } });

<Header/> nunca muda! Preciso atualizá-lo sempre?

Modificações desnecessárias no DOM

LifeCycle

Controle seus componentes

shouldComponentUpdate

var Header = React.createClass({ ... shouldComponentUpdate: function (nextProps, nextState) {
return this.props.value !== nextProps.value; } ... });

Recapitulando

React é uma biblioteca para construção de interfaces

Virtual DOM garante o mínimo de alterações no DOM

State garante quando e quais alterações ocorrerão

LifeCycle garante o controle sobre os componentes

Estamos contratando [email protected]

Obrigado! @taltk9

React Behind The Scenes

React Behind The Scenes

More Decks by Thiago Alves Luiz

Other Decks in Programming

Featured

Transcript