anu

npm version Travis CI Status

npm install anujs

anu, 读作[安努],原意为苏美尔的主神。

众所周知,React 一直存在体积过大的诟病,集成了许多在线上环境不需要功能, 因此我在熟读其源码的基础上,去芜存精,重新实现了 React 所有公开接口,体积只有其五分之一,从而解决它在移动端上加载过慢的问题。由于没有使用高级 API,因此只需在 webpack ,uglify 上修改配置,便能运用于 IE8 上,从而解决 PC 端同学使用 React 的问题。

与其他迷你react的比较

相对于preact, 它的通用性更好, preact是通过preact-compat实现对React的API的兼容,里面用于了Object.definePropety,这会造成两个问题。 一是无法运用于IE8中,二,用于Object.defineProperty,其性能立即从70帧掉到30帧。

相对于react-lite, anujs的事件系统更具扩展性。官方的react-dom,近2万行,有一半花在事件系统上,对mouseenter/mouseleave/focus/blur/change等不可冒泡的事件进行模拟冒泡,react-lite简单几行是实现不了那个效果的。 anujs是作者是精通DOM操作,也费了好大劲才实现的。

image

需要 npm i -g jsize ----------

特点:

  1. 支持React的无狀态组件,纯组件,高阶组件,受控组件与非受控组件
  2. 命名空间就是React,此外还暴露了另一个别名ReactDOM在window上
  3. 体积足够少,min为60kb, gz后为10kb中,2000多行代码(相对于react+react-dom是3MB与3万行代码)
  4. 性能稳定在60帧,使用的是基于列队的异步机制
  5. 生命周期函数的参数与官方保持一致
  6. 直接与react-redux, react-router-dom, react-router-redux混用
  7. 支持后端渲染
  8. 支持官方的chrome DevTools

image

详细用法与示例见 wiki

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script type='text/javascript' src="./dist/React.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>

    <script  type="text/babel" >
       class A extends React.PureComponent {
            constructor(props) {
                super(props)
                this.state = {
                    aaa: {
                        a: 7
                    }
                }
            }

            click() {
                this.setState(function(state){
                   state.aaa.a = 8
                })
            }
            render() {
                return  <div onClick={this.click.bind(this) }>{this.state.aaa.a}</div>
            }
        }
        window.onload = function () {
            ReactDOM.render(<A />, document.getElementById('example'))
        }
    </script>
</head>

<body>
    <div>这个怎么点击也不会变</div>
    <blockquote id='example'></blockquote>


</body>

</html>

与Redux使用的例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script type='text/javascript' src="./dist/React.js"></script>
    <script src="https://cdn.bootcss.com/redux/3.6.0/redux.js"></script>

    <script src="./test/babel.js"></script>
    <script type='text/babel'>
        var addTodoActions = function (text) {
            return {
                type: 'add_todo',
                text: text
            };
        }
        var todoReducer = function (state, action) {

            if (typeof state === 'undefined') {
                return [];
            }

            switch (action.type) {
                case 'add_todo':
                    return state.slice(0).concat({
                        text: action.text,
                        completed: false
                    });
                    break;
                default:
                    return state;
            }
        };
        var store = Redux.createStore(todoReducer);
        class App extends React.Component {
            constructor(props){
                super(props)
                this.state = {
                    items: store.getState()
                }
                this.onChange = this.onChange.bind(this)
                this.handleKeyUp = this.handleKeyUp.bind(this)
                this.handleAdd = this.handleAdd.bind(this)
            }
            componentDidMount(){
                var unsubscribe = store.subscribe(this.onChange);
            }
            onChange(){
                this.setState({
                    items: store.getState()
                });
            }
            handleKeyUp(e){
                if(e.which === 13){
                   this.handleAdd()
                }
            }
            handleAdd(){
                var input = this.refs.todo
                var value = input.value.trim();

                if(value)
                    store.dispatch(addTodoActions(value));

                input.value = '';
            }
            render(){
                return (
                    <div>
                        <input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} onKeyUp={this.handleKeyUp} />
                        <button onClick={this.handleAdd}>点击添加</button>
                        <ul>
                            {this.state.items.map(function(item){
                                return <li>{item.text}</li>;
                            })}
                        </ul>
                    </div>            
                    );
            }
        };

ReactDOM.render(
    <App />, 
    document.getElementById('example')
    );
    </script>
</head>

<body>

    <div>测试</div>
    <blockquote id='example'></blockquote>


</body>

</html>
Copyright © 司徒正美 2013-2016 all right reserved,powered by Gitbook该文件修订时间: 2017-09-19 09:53:56

results matching ""

    No results matching ""