高性能迷你React框架anu發佈

時間 2019-12-05

原文原文鏈接

隨着react的流行，針對其改良方案也逐漸增多起來。有的在體積上進行優化，有的在性能上進行優化，有的在二者上作努力。anu就是最後一種狀況。javascript

anu是我繼avalon以後又一個新框架，解決移動端打包過大的問題而誕生的。內部名字叫qreact，它早期是基於preact改進來的，已經在公司業務上使用了。html

preact, react-lite是如今比較流行的react-like框架。固然也有人提到inferno，但inferno要改動過多。參考這些框架，個人迷你react框架anu走得更遠，徹底兼容react-redux, react-router, 官方chrome調試工具。性能上也很是優秀。java

下面是dbmonster的測試結果：react

preact想在業務線用其實還須要用preact-compat，用了後性能可能折損過半。git

體積大概是原來的1/10, 從3萬行變成1.7Kgithub

更多例子能夠見GITHUB倉庫chrome

https://github.com/RubyLouvre...redux

https://github.com/RubyLouvre...瀏覽器

我會繼續優化anu，讓它的瀏覽器兼容性更好，性能更好。歡迎你們加星與試用babel

<!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="./test/babel.js"></script>
    <script type='text/babel'>
    var s
   var str = ''
        class Component1 extends React.Component {
            componentWillUnmount() {
                str += 'xxxx'
            }
            render() {
                return <div className="component1">{this.props.children}</div>
            }
        }
        class Component2 extends React.Component {
            componentWillUnmount() {
                str += ' yyyy'
            }
            render() {
                return <div className="component1">xxx</div>
            }
        }
        var index = 1
        function detect(a) {
            if (index === 1) {
               // expect(typeof a).toBe('object')
            } else {
               // expect(a).toBeNull()
            }
        }
        class App extends React.Component {
            constructor(props) {
                super(props)
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick() {
                index = 0
                this.forceUpdate()
            }
            render() {
                return index ?
                    <div ref='a' onClick={this.handleClick.bind(this)}>
                        <Component1>
                            <p ref={detect}>這是子節點</p>
                            <Component2 />
                        </Component1>
                    </div> : <div>文本節點</div>

            }
        };

    window.onload = function(){
        s = ReactDOM.render( <App />, document.getElementById('example'))
    }
    </script>
</head>

<body>

    <div>這個默認會被清掉</div>
    <div id='example'></div>


</body>

</html>

腳手架： https://github.com/Levan-Du/a...