React
高性能迷你React框架anu发布
发布时间：2019-06-08 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了高性能迷你React框架anu发布，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
随着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...
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>
脚本宝典总结
以上是脚本宝典为你收集整理的高性能迷你React框架anu发布全部内容，希望文章能够帮你解决高性能迷你React框架anu发布所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的React相关文章
- 告别webpack react 搭建多页面之痛 2019-06-16
- React-Native 写了个 Douban App 2019-06-05
- react可高度配置表格/列表组件（react-tabllist） 2019-08-05
- reactjsweekly -- React Chrome Dev Tool!! React.js开发者的福音啊！ 2019-06-28
- React Router V4 正式版发布 2019-06-19
- React学习笔记1---起步 2019-06-06
- react 自学之路 2019-06-06
- react生成二维码的插件 2019-06-23
- React-StepPitGuide《React踩坑指南》- React基础知识 2019-06-13
- 学习 React:是 ES6还是 React? 2018-11-17
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新React教程