Publicado em: 02/Dec/2019
Atualizado em: 16/Dec/2019

Preact - Petit React

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

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Preact sem Babel or JSX</title>
 5  </head>
 6  <body>
 7    <script src="https://unpkg.com/preact"></script>
 8    <script src="index.js"></script>
 9  </body>
10</html>

index.js

 1'use strict';
 2
 3const { Component, h, render } = window.preact;
 4
 5/** Example classful component */
 6class App extends Component {
 7  componentDidMount() {
 8    this.setState({ message:'Hello!' });
 9  }
10  render(props, state) {
11    return (
12      h('div', {id:'app'},
13        h(Header, { message: state.message }),
14        h(Main)
15      )
16    );
17  }
18}
19
20
21/** Components can just be pure functions */
22const Header = (props) => {
23  return h('header', null,
24    h('h1', null, 'App'),
25    props.message && h('h2', null, props.message)
26  );
27};
28
29
30/** Instead of JSX, use: h(type, props, ...children) */
31class Main extends Component {
32  render() {
33    const items = [1,2,3,4,5].map( (item) => (
34      h('li', {id:item}, 'Item '+item)
35    ));
36    return (
37      h('main', null,
38        h('ul', null, items)
39      )
40    );
41  }
42}
43
44
45render(h(App), document.body);

Exemplo de preact com mitt

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

Referências

comments powered by Disqus