https://github.com/AimWhy/simple-react

Fast 3kb React alternative. Components & Virtual DOM
https://github.com/AimWhy/simple-react

Last synced: 3 months ago
JSON representation

Fast 3kb React alternative. Components & Virtual DOM

• Host: GitHub
• URL: https://github.com/AimWhy/simple-react
• Owner: AimWhy
• Created: 2016-03-22T05:11:47.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-20T23:19:10.000Z (over 8 years ago)
• Last Synced: 2024-06-20T20:56:43.957Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 55.7 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - simple-react

README

        
**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()`                                 |

```html

    

    

    


    

    

        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));

    

``` 

modify from (preact)[https://github.com/developit/preact]