高性能迷你React框架 anu1.2.1 发布

2024年3月5日 203次阅读 来源: 司徒正美

anu1.2.1这次更新主要是改善了对焦点的处理及react16.2的Fragment语法糖的支持

  1. 优化fiberizeChildren的性能，将原方法内部用到函数与对象提到全局上来，这就比官方的对象池技术更能提升性能。
  2. 修复受控组件在textarea, radio的BUG，将受控事件放到用户事件后集中执行
  3. 添加焦点系统的支持
  4. 解决多次引入React时，事件系统的option.async有问题的BUG
  5. 简化createPortal的实现
  6. 添加对React16.2的Fragment语法糖的支持（这需要babel7.beta32+才行）
  7. 对antd3的支持情况，还差dropdown与mention组件

Fragment例子：

<!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://unpkg.com/@babel/standalone/babel.js"></script>
</head>

<body>

    <h1>测试</h1>
    <h1 id='app-root' className="root">

    </h1>
    <script type='text/babel'>
            var check = function () {
                return null;
            };
            check.isRequired = check;
            var PropTypes = React.PropTypes || {
                string: check
            }
            if(!window.ReactDOM){
              window.ReactDOM = React
            }
            var container = document.getElementById("app-root")
  
            function Example() {
                return (
                <>
                    Some text.
                    <h2>A heading</h2>
                    More text.
                    <h2>Another heading</h2>
                    Even more text.
                </>
                );
            }
            ReactDOM.render(<Example />, container);

 
          </script>

</body>

</html>

使用

npm i anujs

或者使用架手架 https://github.com/Levan-Du/a…

npm i -g anu-cli

webpack.config中如何代替原来用React编写的项目

resolve: {
   alias: {
      'react': 'anujs',
      'react-dom': 'anujs',
        // 若要兼容 IE 请使用以下配置
        // 'react': 'anujs/dist/ReactIE',
        // 'react-dom': 'anujs/dist/ReactIE',
    
        // 如果引用了 prop-types 或 create-react-class
        // 需要添加如下别名
        'prop-types': 'anujs/lib/ReactPropTypes',
        'create-react-class': 'anujs/lib/createClass'
        //如果你在移动端用到了onTouchTap事件
        'react-tap-event-plugin': 'anujs/lib/injectTapEventPlugin',  
   }
},

欢迎大家为anujs加星星与试用！！！

https://github.com/RubyLouvre…

    原文作者：司徒正美
    原文地址: https://segmentfault.com/a/1190000012607716
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞