Back to TIL list

Preact - Petit React

Created at

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

Referências

No related pages found.