ReactJS 真的好吗？ - 知乎1250被浏览119676分享邀请回答xufei.github.io/slides/2015/components%20and%20templates.html我的主要内容其实不是用来当做对“React真的好吗”这个话题的回答，而是针对React或者其他框架所能够带给我们的组件化开发方式的一些思考，以及这些组件化开发方式可能会对我们的工程应用造成什么样的影响和改变，组件化是否必然好，在工程实践中有怎样的权衡。我的观点是，大面积的模板是有它的意义的，全组件化体系的工程负担是比较重的，在Web应用领域全面组件化还是一个比较长期的路，而且Web体系当前自身的一些特性，也对全组件化有一些制约。 的答案中，引用了一个链接：，这里面有个回答是我的，但我要说的是
当时的那个回答，这个回答非常好，组件化的实施也做得好，但我们需要认识到，他这个项目有其特殊性，目前存在的绝大部分Web应用并不是这个形态，这世界上大部分东西都不过是普通的东西，对这些东西来说，把各方面门槛提高太高并不一定是好事，正好比我们现在有能加工0.1毫米精度的机床，但在加工大部分产品的时候，只会使用1毫米精度的，因为绝大部分产品并不需要这样的精度，提高不必要的精度可能会导致成本上升，对人员技能的要求也大幅提高。我们看到ReactJS本身的定位还是一个相对大众化的框架，它并不期望自己会成为小众，一切组件化框架都不会期望自己成为小众，那么，为它们推出组件化的工程实施方案的时候，是不是需要存在兼顾高端和低端产品、人群的考虑？所以，我提出，在大部分Web应用中，只适合使用“半组件化”，也就是基础部分组件化，业务上层适当松散的方式，就是基于这些权衡。在移动端，适合全组件化的产品比重会较高，因为方寸之地，组件树一般不会特别复杂，工程代价不会很高，对生产力的提高比较明显。11114 条评论分享收藏感谢收起23231 条评论分享收藏感谢收起查看更多回答这么多人吹捧ReactJS，但是真的好吗？
这么多人吹捧ReactJS，但是真的好吗？
答|百度派 @随心最近用react做了一个聊天类型的应用，说一下大概的看法吧：言简意赅的说，react+redux+immutable+其它辅助lib的方案，在多状态、多交互的产品中，还是有很大的应用场景，一图胜千言：以下是根据自己体验和社区经验，得出的一些想法：mvvm 是架构层面的模式，函数式是编程上的范式，两者不是对立面，react+flux 是函数式，mvvm 里一样可以用函数式，恰恰在不少 mvvm 的实现框架中，FPR 是很重要的实现双绑的方案：比如 ReactiveCocoa 用到的 RAC。&是否有实际的案例去证明，应用规模大了后，mvvm 就不能用了？非要你的 flux？ flux 才出现多久，以前用 mvvm 实现的大规模应用都是假的？react 支持者都是直接根据官方文档照读：双绑很混乱，flux 才能解决一切，事实是，你喜欢单向数据流，mvvm 一样支持啊，不要双绑就行了呀。react 我没有实际用过，不发表负面评论，但让我觉得比较亮的是透明的virtual dom和同构方案。&性能这块，ng 未必会比 react 慢，但不好的地方在于，ng 需要知道 track by 这些黑魔法才能做到优化，而很多开发者并不知道这点，在这上面，react 是领先的。virtual dom 的引入也让 react 脱离了视图的具体实现，可以很方便的切换底层平台，这是一个大优势，而 ng2的架构也会做到这点。react是 view 层，你要愿意，mvvm 里的 v 同样可以用 react 来做，不要随便把 mvvm 和 react 等价，认为只有 react 能用 flux，认为 react 只能用于 flux。用还是不用？客观：因地制宜主观：因人而异其实：你高兴就好以上内容由百度派作者提供
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
百家号 最近更新：
简介: 百度旗下高质量问答讨论社区
作者最新文章博客分类：
场景是这样的:
我们项目里有一个比较复杂的表格20多列每一列里也不是简单把值展示出来,很多还有比较复杂的运算. 应用本身就是一个SPA模式的. 画面的元素很多. 目前这个表格使用Kendo UI的Grid实现的. Kendo的数据绑定是Observable模式的, 你给它一个POJO的对象数组, 它会把这个数组转换为ObservableArray, 表面上看接口跟js的原生数组一样. 但是每当你改变里面的值的时候, 都会触发事件. KendoUI 通过监听这些事件 自动更改页面上的DOM元素, 以实现数据模型和View的同步.
这种方式的好处是可以用最快的速度找到哪些model值发生变化, 不会像AngularJS这种dirty check的那样, 随着页面的绑定的元素增多, 检查model变化的性能会下降.
但是KendoUI对数组类型的元素变化的检查算法太SB了. 只要数组有元素变化, 一律重新生成整个Grid. Grid只有几条的时候还好, Grid中又几百条记录, 并且内容又比较复杂时, 简直慢出翔来了.
相比之下React.js就聪明的多, 会去尽量分析你的变化, 把dom元素的操作降到最低.
从原理看, React.js不是直接操作DOM元素. 它在内存中保持一个virtual dom, 其实就是一个javascript的内存结果, 在javascript上的计算要比dom计算快很多. 最后就是把计算出来的偏差反应到真实dom上.
所以真正牛B的就是这套计算差异的diff算法, 一要高效, 逐个比较肯定不行, 二要精确, 要把需要变化的dom元素降到最低.
具体diff算法的解释, 又一篇很好的文章:
翻译:
原版:
这里有一个例子, 大家可以自己体验一下. 可以用chrome的F12开发者工具查看dom变化情况.
我也试了一下angularjs, add和push不会全更新, 但是把数组中的第一个和最后一个对调就会全更新, 看来diff算法还是不科学啊:
更新: React.js也一样: 把数组中的第一个和最后一个对调就会全更新, 为啥会这样
更新0430 :
我编了段程序试了一下:
以下几个场景:
1. 数组最后加一条记录: 最后apppend一个元素
2. 数组第一个元素shift掉: 最后加一条: 第一个元素remove, 最后append
3. 在数组中间插入一个元素: 中间append
4. 把数组第一个元素和最后一个元素对调: 整个table都刷新了, 也就是remove所有的tr, 然后再append
5. 把数组中间一个元素和最后一个元素对调: 后半的tr都remove,然后再append.
按我的理解react.js应该按照key来判断是否一个元素该remove. 在4,5的场景中, 其实中间的元素完全不需要发生变化. 感觉react的diff算法应该还有改进的空间.
var UserTable = React.createClass({
render: function() {
var createItem = function(user) {
return &tr key={user.id}&
&td&{user.id}&/td&
&td&{user.name}&/td&
&td&{user.age}&/td&
return &table&&tbody&{this.props.users.map(createItem)}&/tbody&&/table&;
var UserPanel = React.createClass({
getInitialState: function() {
var users = [];
var id = new Date().getTime();
for(var i=0;i&10;i++){
users.push({
id: id + i,
"row" + i,
return {users: users};
onChange: function(e) {
this.setState({text: e.target.value});
handleSubmit: function(e) {
e.preventDefault();
addBtnClick: function(e) {
this.state.users.push({
id: new Date().getTime(),
this.refs.name.getDOMNode().value,
age: this.refs.age.getDOMNode().value
this.setState({users: this.state.users});
pushBtnClick:function(e) {
if(this.state.users.length == 0){
this.state.users.shift();
this.state.users.push({
id: new Date().getTime(),
this.refs.name.getDOMNode().value,
age: this.refs.age.getDOMNode().value
this.setState({users: this.state.users});
sortBtnClick:function(e) {
if(this.state.users.length & 2){
var f = this.state.users[0];
var l = this.state.users[this.state.users.length - 1];
this.state.users[0] =
this.state.users[this.state.users.length - 1] =
this.setState({users: this.state.users});
sort2BtnClick:function(e) {
var users = this.state.
if(users.length & 2){
var f = users[users.length / 2];
var l = users[users.length - 1];
users[users.length / 2] =
users[users.length - 1] =
this.setState({users: users});
addMidBtnClick:function(e) {
this.state.users.splice(5, 0, {
id: new Date().getTime(),
this.refs.name.getDOMNode().value,
age: this.refs.age.getDOMNode().value
this.setState({users: this.state.users});
render: function() {
return &div&
&UserTable users={this.state.users}/&
&form onSubmit={this.handleSubmit}&
&input ref="name" /&
&input ref="age" /&
&button onClick={this.addBtnClick}&Add&/button&
&button onClick={this.pushBtnClick}&Push&/button&
&button onClick={this.sortBtnClick}&Sort&/button&
&button onClick={this.sort2BtnClick}&Sort2&/button&
&button onClick={this.addMidBtnClick}&AddMid&/button&
React.render(&UserPanel/&, document.getElementById('container'));
浏览: 151670 次
来自: 上海
看了你的文章，我用的是mongodb3.2.7，mongo-j ...
windows是CTRL+Shift+F9非常感谢，终于可以不 ...
forcer521 写道openJPA: QueryImpl& ...
openJPA: QueryImpl&Map&St ...
cai83225 写道我在官方上也看到这样的例子，可是我想问下 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'老学长总结的ReactJs基础，一看就懂
老学长总结的ReactJs基础，一看就懂
如今最抢手的前端结构有AngularJS、React、Bootstrap等。自从触摸了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的招引了我，下面来跟我一同领会ReactJs的风貌吧~~ 文章有点长，耐性读完，你会有很大收成哦~一、ReactJS简介React 起源于 Facebook 的内部项目，由于该公司对市场上一切 JavaScript MVC 结构，都不满足，就决议自个写一套，用来架起 Instagram 的网站。做出来今后，发现这套东西很好用，就在2013年5月开源了。由于 React 的规划思维极端共同，归于革命性立异，功用出众，代码逻辑却十分简略。所以，不断增加的人开端重视和运用，以为它可能是将来 Web 开发的主流工具。Github地址：/facebook/react二、对ReactJS的知道及ReactJS的长处首要，关于React，有一些知道误区，这儿先总结一下：React不是一个完好的MVC结构，最多能够以为是MVC中的V（View），乃至React并不十分认可MVC开发形式；React的服务器端Render才能只能算是一个锦上添花的功用，并不是其间心起点，事实上React官方站点几乎没有提及其在服务器端的运用；有人拿React和Web Component相提并论，但两者并不是彻底的竞赛联系，你彻底能够用React去开发一个实在的Web Component；React不是一个新的模板言语，JSX仅仅一个表象，没有JSX的React也能作业。1、组件化虚拟DOM(virtual-dom)不只带来了简略的UI开发逻辑，一同也带来了组件化开发的思维，所谓组件，即封装起来的具有独立功用的UI部件。React引荐以组件的办法去从头考虑UI构成，将UI上每一个功用相对独立的模块界说成组件，然后将小的组件经过组合或许嵌套的办法构成大的组件，终究完结全体UI的构建。例如，Facebook的整站都采用了React来开发，全部页面即是一个大的组件，其间包括了嵌套的很多其它组件，咱们有兴趣能够看下它背面的代码。假如说MVC的思维让你做到视图-数据-操控器的别离，那么组件化的考虑办法则是带来了UI功用模块之间的别离。咱们经过一个典型的Blog谈论界面来看MVC和组件化开发思路的差异。关于MVC开发形式来说，开发者将三者界说成不相同的类，完结了体现，数据，操控的别离。开发者更多的是从技能的视点来对UI进行拆分，完结松耦合。关于React而言，则彻底是一个新的思路，开发者从功用的视点动身，将UI分红不相同的组件，每个组件都独立封装。在React中，你依照界面模块天然区分的办法来组织和编写你的代码，关于谈论界面而言，全部UI是一个经过小组件构成的大组件，每个组件只关怀自个有些的逻辑，互相独立。（图片下方群）React以为一个组件应当具有如下特征：（1）可组合（Composeable）：一个组件易于和其它组件一同运用，或许嵌套在另一个组件内部。假如一个组件内部创立了另一个组件，那么说父组件具有（own）它创立的子组件，经过这个特性，一个杂乱的UI能够拆分红多个简略的UI组件；（2）可重用（Reusable）：每个组件都是具有独立功用的，它能够被运用在多个UI场景；（3）可保护（Maintainable）：每个小的组件仅仅包括本身的逻辑，更简单被了解和保护；2、ReactJS的背景和原理在Web开发中，咱们总需求将改动的数据实时反应到UI上，这时就需求对DOM进行操作。而杂乱或频频的DOM操作通常是功用瓶颈发生的原因（怎么进行高功用的杂乱DOM操作通常是衡量一个前端开发人员技能的重要目标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript完结了一套DOM API。依据React进行开发时一切的DOM结构都是经过虚拟DOM进行，每逢数据改动时，React都会从头构建全部DOM树，然后React将当时全部DOM树和上一次的DOM树进行比照，得到DOM结构的差异，然后仅仅将需求改动的有些进行实践的浏览器DOM更新。并且React能够批处理虚拟DOM的改写，在一个事件循环（Event Loop）内的两次数据改动会被兼并，例如你连续的先将节点内容从A成为B，然后又从B成为A，React会以为UI不发生任何改动，而假如经过手动操控，这种逻辑通常是极端杂乱的。尽管每一次都需求结构完好的虚拟DOM树，可是由于虚拟DOM是内存数据，功用是极高的，而对实践DOM进行操作的仅仅是Diff有些，因而能到达提高功用的目的。这么，在确保功用的一同，开发者将不再需求重视某个数据的改动怎么更新到一个或多个具体的DOM元素，而只需求关怀在任意一个数据状况下，全部界面是怎么Render的。假如你像在90年代那样写过服务器端Render的纯Web页面那么应当知道，服务器端所要做的即是依据数据Render出HTML送到浏览器端。假如这时由于用户的一个点击需求改动某个状况文字，那么也是经过改写全部页面来完结的。服务器端并不需求知道是哪一小段HTML发生了改动，而只需求依据数据改写全部页面。换句话说，任何UI的改动都是经过全体改写来完结的。而React将这种开发形式以高功用的办法带到了前端，每做一点界面的更新，你都能够以为改写了全部页面。至于怎么进行有些更新以确保功用，则是React结构要完结的事情。借用Facebook介绍React的视频中谈天运用的比如，当一条新的音讯过来时，传统开发的思路如上图，你的开发进程需求知道哪条数据过来了，怎么将新的DOM结点增加到当时DOM树上；而依据React的开发思路如下图，你永久只需求关怀数据全体，两次数据之间的UI怎么改动，则彻底交给结构去做。能够看到，运用React大大下降了逻辑杂乱性，意味着开发难度下降，可能发生Bug的时机也更少。二、下载ReactJS，编写Hello，worldReactJs下载十分简略，为了便利咱们下载，这儿再一次给出下载地址http://facebook.github.io/react/downloads.html,下载完结后，我么看到的是一个压缩包。解压后，咱们新建一个html文件，引证react.js和JSXTransformer.js这两个js文件。html模板如下(js途径改成自个的):这儿咱们可能会奇怪，为何script的type是text/jsx,这是由于 React 特有的 JSX 语法，跟 JavaScript 不兼容。但凡运用 JSX 的当地，都要加上 type=&text/jsx& 。 其次，React 供给两个库： react.js 和 JSXTransformer.js ，它们有必要首要加载。其间，JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很耗费时刻，实践上线的时分，应当将它放到服务器完结。到这儿咱们就能够开端编写代码了，首要咱们先来知道一下ReactJs里边的React.render办法：React.render 是 React 的最基本办法，用于将模板转为 HTML 言语，并刺进指定的 DOM 节点。下面咱们在script标签里边编写代码，来输出Hello，world，代码如下：React.render( Hello, world!,这儿需求留意的是，react并不依赖jQuery，当然咱们能够运用jQuery，可是render里边第二个参数有必要运用JavaScript原生的getElementByID办法，不能运用jQuery来选择DOM节点。然后，在浏览器翻开这个页面，就能够看到浏览器显现一个大大的Hello，world,由于咱们用了标签。到这儿，祝贺，你现已步入了ReactJS的大门~~下面，让咱们来进一步学习ReactJs吧~~三、Jsx语法HTML 言语直接写在 JavaScript 言语当中，不加任何引号，这即是 JSX 的语法，它答应 HTML 与 JavaScript 的混写，了解过AngularJs的看到下面的代码一定会感受很了解的，咱们来看代码：var names = ['Jack', 'Tom', 'Alice'];这儿咱们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出成果如下：JSX 答应直接在模板刺进 JavaScript 变量。假如这个变量是一个数组，则会展开这个数组的一切成员，代码如下：var arr = [Hello world!,React is perfect!, ];显现成果如下：这儿的星号仅仅做标识用的，咱们不要被她利诱了~~你看到这儿，阐明你对React还是蛮感兴趣的，祝贺你，坚持下来了，那么下面，咱们开端学习React里边的&真功夫&了~~ Are you ready?四、ReactJS组件1、组件特点前面说了，ReactJS是依据组件化的开发，下面咱们开端来学习ReactJS里边的组件，React 答应将代码封装成组件（component），然后像刺进一般 HTML 标签相同，在页面中刺进这个组件。React.createClass 办法就用于生成一个组件类。下面，咱们来编写第一个组件Greet，有一个name特点，然后输出hello + name的值，代码如下：var Greet = React.createClass({Hello {this.props.name}; }看到这段代码，触摸过AngularJS的朋友们是不是有一种了解的感受，不过这儿有几点需求留意：1、获取特点的值用的是this.props.特点名2、创立的组件名称首字母有必要大写。3、为元素增加css的class时，要用className.4、组件的style特点的设置办法也值得留意，要写成style={{width: this.state.witdh}}2、组件状况组件免不了要与用户互动，React 的一大立异，即是将组件看成是一个状况机，一开端有一个初始状况，然后用户互动，致使状况改动，然后触发从头烘托 UI 。下面咱们来编写一个小比如，一个文本框和一个button，经过点击button能够改动文本框的修正状况，制止修正和答应修正。经过这个比如来了解ReactJS的状况机制。先看代码：var InputState = React.createClass({这儿，咱们又运用到了一个办法getInitialState,这个函数在组件初始化的时分履行，必需回来NULL或许一个目标。这儿咱们能够经过this.state.特点名来拜访特点值，这儿咱们将enable这个值跟input的disabled绑定，当要修正这个特点值时，要运用setState办法。咱们声明handleClick办法，来绑定到button上面，完结改动state.enable的值.作用如下：原理剖析：当用户点击组件，致使状况改动，this.setState 办法就修正状况值，每次修正今后，主动调用 this.render 办法，再次烘托组件。这儿值得留意的几点如下：1、getInitialState函数有必要有回来值，能够是NULL或许一个目标。2、拜访state的办法是this.state.特点名。3、变量用{}包裹，不需求再加双引号。3、组件的生命周期组件的生命周期分红三个状况：Mounting：已刺进实在 DOMUpdating：正在被从头烘托Unmounting：已移出实在 DOMReact 为每个状况都供给了两种处理函数，will 函数在进入状况之前调用，did 函数在进入状况今后调用，三种状况合计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()此外，React 还供给两种特别状况的处理函数。componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判别是不是从头烘托时调用下面来看一个比如：var Hello = React.createClass({上面代码在hello组件加载今后，经过 componentDidMount 办法设置一个定时器，每隔100毫秒，就从头设置组件的透明度，然后引起从头烘托。4、组件的嵌套React是依据组件化的开发，那么组件化开发最大的长处是什么？毫无疑问，当然是复用，下面咱们来看看React中到底是怎么完结组件的复用的，这儿咱们还写一个比如来说吧，代码如下：var Search = React.createClass({Welcome!);（图片下方群）这儿咱们创立了一个Search组件，然后又创立了一个Page组件，然后咱们在Page组件中调用Search组件，并且调用了两次，这儿咱们经过特点searchType传入值，终究显现成果如图：五、ReactJs小结关于ReactJS今日就先学习到这儿了，下面来总结一下，主要有以下几点：1、ReactJs是依据组件化的开发，所以终究你的页面应当是由若干个小组件构成的大组件。2、能够经过特点，将值传递到组件内部，同理也能够经过特点将内部的成果传递到父级组件(留给咱们研讨)；要对某些值的改动做DOM操作的，要把这些值放到state中。3、为组件增加外部css款式时，类名应当写成className而不是增加内部款式时，应当是style={{opacity: this.state.opacity}}而不是style=&opacity:{this.state.opacity};&。4、组件名称首字母有必要大写。5、变量名用{}包裹，且不能加双引号。欢迎大家关注小编，小编只想与大家一起学习交流，一起进步，有什么写的不好的地方可以及时指出，可以加图片下方的群。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
百家号 最近更新：
简介: 为大家及时更新最新的资讯，提供更多的资源登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 九月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
More than React（一）为什么ReactJS不适合复杂交互的前端项目？
More than React（一）为什么ReactJS不适合复杂交互的前端项目？
1&他的粉丝
日. 估计阅读时间:
：Facebook、Snapchat、Tumblr等背后的核心技术
相关厂商内容
相关赞助商
然而，随着我越来越深入的使用ReactJS，我发现用ReactJS编写交互复杂的网页很困难。我希望有一种方式，能够像ReactJS一样简单解决简单问题。此外，还要能简单解决复杂问题。
于是我把ReactJS用Scala重新写了一个。代码量从近三万行降到了一千多行。
用这个框架实现的
应用，。而用ReactJS实现相同功能的TodoMVC，。
下图是用Binding.scala实现的TodoMVC应用。
这个框架就是。
问题一：ReactJS组件难以在复杂交互页面中复用
ReactJS中的最小复用单位是组件。ReactJS的组件比AngularJS的Controller和View 要轻量些。每个组件只需要前端开发者提供一个 render 函数，把 props 和 state 映射成网页元素。
这样的轻量级组件在渲染简单静态页面时很好用，但是如果页面有交互，就必须在组件间传递回调函数来处理事件。尤其是复杂的网页结构，往往需要多个组件层层嵌套，导致回调函数也必须在父子组件间层层传递，代码变成一团乱麻，维护就很难了。
我将在中用原生DHTML API、ReactJS和Binding.scala实现同一个需要复用的页面，介绍Binding.scala如何简单实现、简单复用复杂的交互逻辑。
问题二：ReactJS的虚拟DOM 算法又慢又不准
ReactJS的页面渲染算法是虚拟DOM差量算法。
开发者需要提供 render 函数，根据 props 和 state 生成虚拟 DOM。然后 ReactJS 框架根据 render 返回的虚拟 DOM 创建相同结构的真实 DOM.
每当 state 更改时，ReacJS 框架重新调用 render 函数，获取新的虚拟 DOM 。然后，框架会比较上次生成的虚拟 DOM 和新的虚拟 DOM 有哪些差异，然后把差异应用到真实DOM上。
这样做有两大缺点：
每次 state 更改，render 函数都要生成完整的虚拟 DOM. 哪怕 state 改动很小，render函数也会完整计算一遍。如果 render 函数很复杂，这个过程就白白浪费了很多计算资源。
ReactJS框架比较虚拟DOM差异的过程，既慢又容易出错。比如，假如你想要在某个 &ul& 列表的顶部插入一项&li& ，那么ReactJS框架会误以为你修改了 &ul& 的每一项 &li&，然后在尾部插入了一个 &li&。
这是因为 ReactJS收到的新旧两个虚拟DOM之间相互独立，ReactJS并不知道数据源发生了什么操作，只能根据新旧两个虚拟DOM来猜测需要执行的操作。自动的猜测算法既不准又慢，必须要前端开发者手动提供 key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法或者 componentWillUpdate 等方法才能帮助 ReactJS 框架猜对。
我将在中比较ReactJS、AngularJS和Binding.scala渲染机制，介绍简单性能高的Binding.scala精确数据绑定机制。
问题三：ReactJS的HTML模板功能既不完备、也不健壮
ReactJS支持用JSX编写HTML模板。
理论上，前端工程师只要把静态HTML原型复制到JSX源文件中，增加一些变量替换代码，就能改造成动态页面。理论上这种做法要比Cycle.js、Widok、ScalaTags等框架更适合复用设计师提供的HTML原型。
不幸的是，ReactJS对HTML的支持残缺不全。开发者必须手动把class和for属性替换成className和htmlFor，还要把内联的style样式从CSS语法改成JSON语法，代码才能运行。这种开发方式下，前端工程师虽然可以把HTML原型复制粘贴到代码中，但还需要大量改造才能实际运行。比Cycle.js、Widok、或者、ScalaTags省不了太多事。
除此之外，ReactJS还提供了propTypes机制校验虚拟DOM的合法性。然而，这一机制也漏洞百出。即使指定了propTypes，ReactJS也不能在编译前提前发现错误。只有测试覆盖率很高的项目时才能在每个组件使用其他组件时进行校验。即使测试覆盖率很高，propTypes仍旧不能检测出拼错的属性名，如果你把onClick写成了onclick，ReactJS就不会报错，往往导致开发者额外花费大量时间排查一个很简单的bug。
我将在中比较ReactJS和Binding.scala的HTML模板，介绍Binding.scala如何在完整支持XHTML语法的同时静态检查语法错误和语义错误。
问题四：ReactJS与服务器通信时需要复杂的异步编程
ReactJS从服务器加载数据时的架构可以看成MVVM(Model&View&ViewModel)模式。前端工程师需要编写一个服务访问层作为Model，把ReactJS的state当做ViewModel，而render当做View。Model负责访问后端API并把数据设置到state(即View Model)上，可以用Promise和fetch API实现。然后，render，即View，负责把View Model渲染到页面上。
在这整套流程中，前端程序员需要编写大量闭包组成的异步流程，设置、访问状态的代码五零四散，一不小心就会bug丛生，就算小心翼翼的处理各种异步事件，也会导致程序变得复杂，既难调试，又难维护。
我将在《More than React（五）为什么别用异步编程？》中比较ReactJS和Binding.scala的数据同步模型，介绍Binding.scala如何自动同步服务器数据，避免手动异步编程。
尽管Binding.scala初看上去很像ReactJS，但隐藏在Binding.scala背后的机制更简单、更通用，与ReactJS和Widok截然不同。
所以，通过简化概念，Binding.scala灵活性更强，能用通用的方式解决ReactJS解决不了的复杂问题。
比如，除了上述四个方面以外，ReactJS的状态管理也是老大难问题，如果引入Redux或者react-router这样的第三方库来处理状态，会导致架构变复杂，分层变多，代码绕来绕去。而Binding.scala可以用和页面渲染一样的数据绑定机制描述复杂的状态，不需要任何第三方库，就能提供服务器通信、状态管理和网址分发的功能。
以下表格中列出了上述Binding.scala和ReactJS的功能差异：
Binding.scala
最小复用单位
不论交互内容还是静态内容都容易复用
容易复用静态内容组件，但难以复用交互组件
页面渲染算法
精确的数据绑定
自动保证正确性
需要开发者手动设置 key 属性，不然复杂的页面会错乱。
Scala XML 字面量
是否支持 HTML 或 XHTML 语法
完整支持 XHTML
残缺支持。正常的 XHTML 无法编译。开发者必须手动把 class 和 for 属性替换成 className 和 htmlFor，还要把内联的 style 样式从 CSS 语法改成 JSON 语法。
如何校验模板语法
自动编译时校验
运行时通过 `propTypes` 校验但无法检测简单的拼写错误。
服务器通讯
自动远程数据绑定
MVVM + 异步编程
如何分派网址或者锚点链接
支持把网址当成普通的绑定变量来用，无需第三方库。
不支持，需要第三方库 react-router
功能完备性
完整的前端开发解决方案
本身只包含视图部分功能。需要额外掌握 react-router 、 Redux 等第三方库才能实现完整的前端项目。
API 简单，对没用过 Scala 的人来说也很好懂
上手快。但功能太弱导致后期学习第三方库时曲线陡峭。
Binding.scala
两个多月前，我在Scala.js的论坛发布Binding.scala时，当时Scala.js社区最流行的响应式前端编程框架是。Tim Nieradzik是Widok的作者。他在看到我发布的框架后，称赞这个框架是Scala.js社区最有前途的 HTML 5渲染框架。
他是对的，两个月后，现在Binding.scala已经成为Scala.js社区最流行的响应式前端编程框架。
对比了Scala的响应式前端编程框架，Binding.scala的活跃程度和流行度都比Udash、Widok等其他框架要高。
我在最近的几个项目中，也逐渐放弃JavaScript和ReactJS，改用Scala.js和Binding.scala搭建新时代的前端技术栈。
感谢张凯峰和郑培真帮我检阅了这一系列文章，你看到的文章的结构和内容许多地方都来自他们提出的修改意见。
More than React 系列文章
杨博是 Haxe 和 Scala 社区的活跃贡献者，发起和维护的开源项目包括&、、、、、、&。杨博曾在网易任主程序和项目经理，开发过多款游戏。现在ThoughtWorks任Lead Consultant，为客户提供移动、互联网、大数据、人工智能和深度学习领域的解决方案。
感谢对本文的策划，对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（，），微信（微信号：）关注我们。
Author Contacted
语言 & 开发
51 他的粉丝
架构 & 设计
214 他的粉丝
函数式编程
9 他的粉丝
9 他的粉丝
376 他的粉丝
JavaScript
28 他的粉丝
0 他的粉丝
前端框架React
1 他的粉丝
1200 他的粉丝
101 他的粉丝
前端开发框架
0 他的粉丝
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Reactjs只是视图层工具
Re: Reactjs只是视图层工具
Re: Reactjs只是视图层工具
Re: Reactjs只是视图层工具
React Flux模式
Re: React Flux模式
过于贬低React了...
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。