fast, 3kb alternative to React, with the same ES2015 API.
| Lifecycle method | When it gets called |
|---|---|
componentWillMount |
before the component gets mounted to the DOM |
componentDidMount |
after the component gets mounted to the DOM |
componentWillUnmount |
prior to removal from the DOM |
componentDidUnmount |
after removal from the DOM |
componentWillReceiveProps |
before new props get accepted |
shouldComponentUpdate |
before render(). Return false to skip render |
componentWillUpdate |
before render() |
componentDidUpdate |
after render() |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <div id="why"></div> <script src="../preact.js"></script> <script> var h = preact.h; var createClass = preact.createClass; var render = preact.render; var Clock = createClass({ getInitialState: function () { return { time: Date.now() } }, componentDidMount: function () { var that=this; this.timer = setInterval(function () { that.setState({ time: Date.now() }); }, 1000); }, componentWillUnmount: function () { clearInterval(this.timer); }, render: function (props, state) { var time = new Date(state.time).toLocaleTimeString(); return h('span', null, time); } }); render(document.getElementById('why'), h(Clock)); </script> </body> </html>
modify from (preact)[https://github.com/developit/preact]