高性能迷你React框架anu发布

发布时间：2020-12-15 07:17:52 所属栏目：百科来源：网络整理

导读：随着react的流行，针对其改良方案也逐渐增多起来。有的在体积上进行优化，有的在性能上进行优化，有的在两者上做努力。anu就是最后一种情况。 anu是我继avalon之后又一个新框架，解决移动端打包过大的问题而诞生的。内部名字叫qreact，它早期是基于preact改

随着react的流行，针对其改良方案也逐渐增多起来。有的在体积上进行优化，有的在性能上进行优化，有的在两者上做努力。anu就是最后一种情况。

anu是我继avalon之后又一个新框架，解决移动端打包过大的问题而诞生的。内部名字叫qreact，它早期是基于preact改进来的，已经在公司业务上使用了。

preact,react-lite是现在比较流行的react-like框架。当然也有人提到inferno，但inferno要改动过多。参考这些框架，我的迷你react框架anu走得更远，完全兼容react-redux,react-router,官方chrome调试工具。性能上也非常优秀。

下面是dbmonster的测试结果：

preact想在业务线用其实还需要用preact-compat，用了后性能可能折损过半。

体积大概是原来的1/10,从3万行变成1.7K

更多例子可以见GITHUB仓库

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

我会继续优化anu，让它的浏览器兼容性更好，性能更好。欢迎大家加星与试用

<!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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!