Neact

Neact is a fast alternative to React, support ie8

Usage

 
Neact.render(Neact.createElement('div', null, 'Hello Neact!'), document.body);
 

Install

npm install neact

bower install neact

Getting Started

How to use JSX

// 1.best to configure it globally in a .babelrc
// 2.Tell Babel to transform JSX into Neact.createElement() calls:
/** @jsx Neact.createElement */
 
function App(){
    return (
        <div id="foo">
            <span>Hello, world!</span>
            <button onClick={ e => alert("hi!") }>Click Me</button>
        </div>
    );
};
 
Neact.render(<App />, document.body);

hooks Lifecycle

Lifecycle method	When it gets called
create	see componentDidMount
beforeUpdate	see componentWillUpdate
update	see componentDidUpdate
destroy	see componentDidUnmount

let hooks = {
    create(vNode) {
        //TODO:
        //vNode.dom
    },
    beforeUpdate(lastVNode, nextVNode){
        //TODO:
    },
    update(nextVNode){
        //TODO:
    },
    destroy(vNode){
        //TODO:
    }
}

Neact.render(<div hooks={hooks}>Test</div>,document.body)

Class Components Lifecycle

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
componentWillReceiveProps	before new props get accepted
shouldComponentUpdate	before render(). Return false to skip render
componentWillUpdate	before render()
componentDidUpdate	after render()

var App = Neact.createClass({
    render(){
        return 'Test'
    },
    componentWillMount(){},
    componentDidMount(){},
    componentWillUnmount(){},
    componentWillReceiveProps(){},
    shouldComponentUpdate(){},
    componentWillUpdate(){},
    componentDidUpdate(){}
});

Neact.render(<App />,document.body)

Functional Components Lifecycle

Lifecycle method	When it gets called
onComponentWillMount	before the component gets mounted to the DOM
onComponentDidMount	after the component gets mounted to the DOM
onComponentWillUnmount	prior to removal from the DOM
onComponentShouldUpdate	before render(). Return false to skip render
onComponentWillUpdate	before render()
onComponentDidUpdate	after render()

let Lifecycle = {
    onComponentWillMount(vNode){},
    onComponentDidMount(vNode){},
    onComponentWillUnmount(vNode){},
    onComponentShouldUpdate(lastProps, nextProps, context){},
    onComponentWillUpdate(lastProps, nextProps, vNode){},
    onComponentDidUpdate(nextVNode){}
}

var App = function(){
    return 'Test'
};

Neact.render(<App {...Lifecycle} />,document.body)

License

MIT