Preact - Petit React

Date: 2019-12-02Last modified: 2022-10-07

preact

Ciclo de vida

componentWillMount: Antes que o componente seja montado no DOM
componentDidMount: Depois que o componente é montado no DOM
componentWillUnmount: Antes da remoção do DOM
componentWillReceiveProps: Antes que novas props sejam aceitas
shouldComponentUpdate: Antes de render(). Retorne false caso queiram pular o render()
componentWillUpdate: Antes render()
componentDidUpdate: Depois render()

Preact sem babel ou JSX

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Preact sem Babel or JSX</title>
  </head>
  <body>
    <script src="https://unpkg.com/preact"></script>
    <script src="index.js"></script>
  </body>
</html>

index.js

'use strict';

const { Component, h, render } = window.preact;

/** Example classful component */
class App extends Component {
  componentDidMount() {
    this.setState({ message:'Hello!' });
  }
  render(props, state) {
    return (
      h('div', {id:'app'},
        h(Header, { message: state.message }),
        h(Main)
      )
    );
  }
}


/** Components can just be pure functions */
const Header = (props) => {
  return h('header', null,
    h('h1', null, 'App'),
    props.message && h('h2', null, props.message)
  );
};


/** Instead of JSX, use: h(type, props, ...children) */
class Main extends Component {
  render() {
    const items = [1,2,3,4,5].map( (item) => (
      h('li', {id:item}, 'Item '+item)
    ));
    return (
      h('main', null,
        h('ul', null, items)
      )
    );
  }
}


render(h(App), document.body);

Exemplo de preact com mitt

https://codepen.io/developit/pen/rjMEwW?editors=0010

Preact - Petit React

Ciclo de vida

Preact sem babel ou JSX

Referências