);

}
});

var Message = React.createClass({
render: function() {
return (

{this.props.message}

);

}
});

var Link = React.createClass({
render: function() {
return (

    https://segmentfault.com/a/{this.props.link});

}
});

ReactDOM.render(
,
document.getElementById('main-container')
);

组件化的方式带来了UI功能模块之间的分离。对于MVC开发模式来说，开发者将实现表现层，数据层，控制层的分离。对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI界面分成不同的组件，每个组件都独立封装。## 4. 虚拟DOM提升性能传统的web开发中，我们通常使用JS或jQuery操作DOM的方式将不断变化的数据实时地反映到页面上，随着页面逻辑复杂度的提升，频繁大量的DOM操作往往会造成网站性能较低，代码也变得越来越难维护。即使使用了MVC框架来重新架构代码，但也没有办法减少你所维护的状态，也就是说没有办法减少DOM操作。后来又出现了MVVM模式，通过视图模板和状态的双向绑定，双向绑定引擎就会在状态更新的时候自动更新视图。MVVM模式很大程度的减少了视图更新的逻辑，即减少了DOM操作。但这种方法也是存在问题的，每次状态发生变化时，模板引擎都会重新渲染整个视图，即用新的视图替换掉旧的视图。我们知道，这样做是影响性能的，因为即使一处小小的修改都会引起重新渲染DOM。在React的思想里，是完全不需要操作DOM的。React提出了新概念，即虚拟DOM。使用React进行开发时，所有的DOM构造都是通过虚拟DOM进行的，每当数据发生变化时，React都会重新构造DOM树，然后将新构造的DOM树与上一次的DOM树进行对比（这就用到了React的DOM Diff算法），得到两者之间的差异后，仅需将变化的DOM部分进行更新。由于每次生成虚拟DOM都很快，DOM Diff算法找出两个DOM树之间的差异也很快（时间复杂度O(n)），所以跟传统的操作DOM相比，使用虚拟DOM的方法在速度和性能上的优势是十分明显的。我们举一个简单的例子，假设我们有一个list如下：

1. 11. 21. 31. 4

现在想把它更新成：

1. 61. 71. 81. 91. 10

我们传统的做法是先删除1，2，3，4这些节点，然后再追加6，7，8，9，10这几个新节点，这就意味这会有4次删除操作和5次添加操作。但React会把旧的和新的DOM树做一下Diff，然后发现其实不用删除1，2，3，4节点，而是可以直接修改这四个节点的innerHTML为6，7，8，9，然后再追加一个节点10就可以了。这样就比9次节点DOM操作快多了。## 5. 总结本文只是个人对React的设计思想的一些浅显的认识，写的比较零散，当然React的优点还有很多的，还待大家去慢慢学习与体会。当然，事物都有相对性，在实际的开发过程中，还是要挑选最适合的框架，而不是盲目从众。#JavaScript、react.js、jsx、dom#

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！