Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Sinergia - React - Por Baixo Dos Panos

    Enviado por

    Jeffer Marcelino
    13 visualizações45 páginas

    Título original

    Sinergia - React_ por baixo dos panos

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    13 visualizações45 páginas

    Sinergia - React - Por Baixo Dos Panos

    Enviado por

    Jeffer Marcelino

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 45

    Jeffer Marcelino Sunde

    @jeffermarcelino

    - Host do Debugando na Estrada


    - Tech Lead na Maputo Frontenders
    - Gramo de animes e open source
    React: por
    baixo dos panos
    Critical Rendering Path
    O que é React?
    O que é JSX?
    Como React atualiza a DOM?
    Porque precisamos da VDOM?
    Diffing algorithm
    Q&A
    Critical Rendering
    Path (CRP)
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <style>
    body {
    background-color: #010101;
    color: white;
    }

    .title {
    font-size: 2rem;
    }
    </style>
    </head>
    <body>
    <h1 class=”title”>Hello, World!</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    React
    O que é React?
    O React é uma biblioteca
    front-end JavaScript de
    código aberto com foco
    em criar interfaces de
    usuário.
    https://github.com/facebook/react/tree/main/packages/react
    JSX
    Usado para criar
    componentes que
    descrevem o que
    queremos em tela.
    import ReactDOM from 'react-dom/client'

    function App() {
    return (
    <>
    <h1>Hello, World!</h1>
    </>
    )
    }

    ReactDOM.createRoot(document.getElementById('root'))
    .render(<App />);

    import React from 'react'


    import ReactDOM from 'react-dom/client'

    const App = React.createElement(


    "h1",
    null,
    "Hello World"
    );

    ReactDOM.createRoot(document.getElementById('root'))
    .render(App);
    Como o React atualiza o conteúdo em tela (DOM)?
    Trigger Render Commit
    1. Trigger

    Primeira vez que sua aplicação está a ser renderizada

    ReactDOM.createRoot(document.getElementById('root'))
    .render(<App />);
    1. Trigger
    Quando um ou muitos estados mudam no componente
    import { useState } from 'react';

    function App() {
    const [ count, setCount ] = useState(0);

    const handleClick = () => {


    setCount(count + 1);
    };

    return (
    <>
    <button
    onClick={ handleClick }
    >
    You clicked { count } times
    </button>
    </>
    )
    }
    1. Trigger

    const handleClick = () => {


    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    };
    1. Trigger

    const handleClick = () => {


    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1
    };
    2. Render
    2. Render
    3. Commit
    Porque precisamos da Virtual DOM?
    O(n^3)
    Diffing algorithm
    1. Elementos de tipos diferentes
    criam árvores diferentes.

    2. As keys não mudam.


    Q&A

    Você também pode gostar