收藏，2.8k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用jsx，开发组件时，发现大量html代码写在js中，非常丑陋而且不好维护。不知道有什么好的解决方案。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Facebook 注意到了有一群写 CoffeeScript 的人死活不要写奇奇怪怪的语法,
实际上也做了一些让步, 我在 Teambition 用的写法就是 CoffeeScript 版本, 可以参考下:
如果你觉得好看的话, 就来吧. 不好看的话估计事情就是这样, 没有太多改变的余地了.
好吧终于认出楼主了.. 补几句..
我试了一下用 Babel 去写, Sublime Text 用 Babel 的插件, 感觉还行.
如果能接纳原生 js 语法的话, 我想还是尝试适应 JSX 的写法更好.
Babel 用的是 ES6, 兼容 JSX, 跟 CoffeeScript 一样也是编译.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一个解决方案就是，不用JSX，手写 React.createElement 函数调用，过一阵子你就会觉得，还是写JSX好。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
没必要, 以前的 js 嵌入 html 的方式影响JS代码的阅读，维护起来也会麻烦。JSX属于一种domain language, 用来动态生成dom， 写view层。本身不是html。所以你不必考虑这样的问题。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
人家生下来就是这样的，你却非要把人家拆开。写 React 代码思维如果不能转过去会悲剧的。
React 有组件这么一说，你还要用以前的框架的思想去编程，是不对的。
JSX 是为了让你写的更爽。
看到有人说 react-template，你看看是不是符合你的需求。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有『大量』的时候，是不是考虑拆分为更小的组件来维护哇
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
20 小时前 回答
现在也遇到了这个问题，头大...解决方案：在FIS中有__inline()这个方法，如果整个方案是用FIS打包，那么问题很好解决在render的时候这样调用：
render(__inline(xxx.dom))
为什么可以这样呢？FIS对每个文件都有一个process的操作，在对文件进行编译的时候，在babel将其转化之前，__inline已经将dom内置了，后面babel再对文件进行react jsx转化。
FIS采用的是component的组件模式，很多组件其实是基于npm包的二次封装，感觉规范还是有点乱，除非在团队中自己封装所需组件，自己定规范。而且components项目已经不维护了，作者提倡使用npm包代替，毕竟现在的趋势是前后端同构，在React中对于后端渲染也相当有用。
FIS可以按需编译，当时感觉在开发基于React和Redux这种需要n个依赖包的项目编译会越来越慢，也有可能是我某些使用方法不对... 总之没有webpack的热替换好用
基于这两点，我暂时投奔了webpack, 那么问题来了
在webpack中，暂时没有找到这个问题的解决方法，参试使用过raw-loader, xxx-template-loader等类似加载器，但感觉方向是错的...原因是：webpack这种loader的方式是对于特性的文件，比如test:'/.js$/', 只针对js, 然而raw-loader这种可以将独立出来的jsx代码（比如xxx.html）转换为string, 在js文件中render(string)就会报错。
如果用babel-loader来转换dom, require到js文件里，然后render(variable)，这个方案是可行的，我们可以将module.export = function(content){return "module.export=content}"} 封装到一个loader,在babel前加载
但是这种抽象只能满足content中没有自定义组件的情况，一旦content中的jsx包含自定义组件如&MyComponent&，Babel编译就会报错，所以显然难以抽象出一个loader
个人觉得解决思路应该是做一个js的loader, 对js中的dom文件引入做替换，然后再进行其他loader，比如：
loader: 'babel!inline-dom'
所以inline-dom这个loader是作用域js，而不是作用域dom文件本身，这涉及到一个编译顺序问题。
总之，webpack怎么解决这个问题呢？求高人指点！
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知我由Angular转向React，为什么？
发表于 16:24|
来源Six Revisions|
作者Kumar Sanket
摘要：Angular在快速开发大型Web项目上很受推崇，但仍存诸多缺陷，React正为JavaScript应用开发者提供新的开发方式。本文将对Angular和React进行对比，评析各自优劣。
【编者按】Kumar Sanket为Toptal公司的全栈Web开发者/工程师，他在一篇文章《Why I Ditched Angular for React》中对Angular和React进行了对比，他表示Angular在快速开发大型Web项目上很受推崇，但其也存在的种种缺陷，如过于依赖DOM操作，双向数据绑定带来性能问题等。而React作为由Facebook和Instagramin领导的新开源项目，为JavaScript应用开发者提供了新的开发方式，同时具有速度快、跨浏览器兼容、模块化等优点，也是这些优点，让Kumar Sanket选择了React。下面为该文章的译文。几年前，我的代码因充满了jQuery选择器和回调函数而十分凌乱，后来AngularJS的出现很好地解决了这个问题。使用AngularJS开发的项目拥有极好的可维护性，AngularJS拥有一系列简单易用的功能，有利于快速开发大型的Web项目。初识时，AngularJs的双向数据绑定和所有的数据源都放在Model中的设计理念让我惊叹，在实际的开发中，有效地减少了应用程序中的数据冗余。随着应用频率越来越多， AngularJs的一些缺陷也渐渐体现，在使用过程中的不如意让我决定寻找一个它的替代品。以下就是我对Angular的一些不满。基于DOM的程序执行。在Angular的执行过程中过于依赖DOM操作。在Angular应用的执行时，会首先扫描所有的DOM，再通过指令进行编译，这让不利于开发者进行调试也很难判断程序执行顺序。双向数据绑定是一把双刃剑。随着组件增加，项目越来越复杂，双向数据绑定带来性能问题。双向数据绑定是如何影响性能的？在JavaScript（ES5）中，并没有实现当变量或对象改变时发出通知的功能，Angular的实现方法被叫做“Dirty-checking（脏检查机制）”，通过跟踪数据的改变再动态更新用户界面（UI）。在Angular的作用域中任何操作的执行都会引发Dirty-checking，随着绑定数量的增加性能就会越低。双向数据绑定的另一个问题是，如果页面上有许多拥有动态数据的组件，这意味着也会有很多的数据来源，如果管理不好会让人感觉混乱不堪。但公平地说，这是开发人员的方式方法问题而不是Angular本身的缺陷。Angular自成一体。Angular的任何操作会引起digest cycle对注册过的监听器的遍历，以实现组件动态地同步数据。这会和其它的依赖产生兼容性问题。如果你使用的其它JavaScript库也需要改变数据就必须用Angular的$apply函数去封装。或者如果它是一个工具库，你就需要把它转换成一个服务。似乎其它JavaScript库都必须经过改动才能和Angular进行交互操作。依赖注入。JavaScript目前没有自己的包管理器和依赖解析器，AMD、UMD和CommonJs很好的解决了这个问题。不幸的是Angular并没有很好地利用这些规范，Angular甚至实现了一个自己的依赖注入(DI)。但是公平地说Angular使用RequireJS依赖项注入的非官方实现已经有了。学习进阶难。使用Angular需要学习大量的概念，包括但不限于：模块控制器指令作用域模板链式函数过滤器依赖注入用好Angular是非常难的，不是一朝一夕的事情。以上的原因导致我改用React。React又哪里牛了？React是一个由Facebook和Instagramin领导的新开源项目，用于构建用户界面，为JavaScript应用开发者提供了新的开发方式。&事先声明：React并不是AngularJs那样的一个应用程序开发框架。把他们作为同一个类型来比较是不公平的。2013年五月，当JSConf EU大会上被推出时，它“单向数据流”和“虚拟DOM”等概念把观众震撼了。React是用于构建用户界面的。引用官方主页上的说法：“对开发者来说，React就是MVC中的V”。你可以自由地写独立的组件，在这一点上或多或少优于Angular的指令集。React省思了目前Web开发中遇到的一些问题并作出了最佳的实践。比如，它鼓励的单向数据流，并坚信组件是被数据驱动的状态机。然而大部分其它类似的框架都是直接操作DOM，React并不喜欢这种方式且尽量避免这种方式。React恰如其分地提供了定义一个UI组件所需的最基本的API。它遵循UNIX的信条：做一件事，做到极致。想知道更详细的关于Angular和React的比较，可以阅读Pete Hunt（Facebook/Instagram职员）写的来获取更多细节。为什么我开始使用React？以下是我喜欢React的一些地方。React速度很快与其它框架相比，React采取了一种特立独行的操作DOM的方式。它并不直接对DOM进行操作。它引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。跨浏览器兼容虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。模块化为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。单向数据流让事情一目了然是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。它只是一个概念，而非特定工具的实现。它可以被其它框架吸纳。例如，Alex Rattray有一个很好的，在React中使用了Backbone的集合和模型。纯粹的JavaScript现代Web应用程序与传统的Web应用有着不同的工作方式。例如，视图层的更新需要通过用户交互而不需要请求服务器。因此视图和控制器非常依赖彼此。许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎，而且，最重要的是，它是纯粹的JavaScript程序。同构的JavaScript单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。React与其它框架/库兼容性好比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。不幸的是，目前的JavaScript版本并没有提供一个打包和加载的模块。（在未来的ES6版本上将使用System.import来解决这个问题）。幸运的是，我们有RequireJS和Webpack这些漂亮整洁的替代品。React是由Browserify构建的，如果你想操作图像资源或者编译和，Webpack或许是一个更好的选择。我需要另一个开发框架来配合React吗？你可以使用React来构建用户界面，但是你仍然需要进行AJAX调用，应用数据过滤以及其它Angular已经实现的功能。如果我们还需要另一个额外的JavaScript开发框架，为什么不使用Angular？框架由一系列模块和规则组成。如果我们不需要它的一些模块，甚至想将某些模块替换，我该怎么做？其中一种实现模块化且能更好地进行依赖管理的方法是通过包管理器。但是，在Angular中怎么进行包管理呢？这还得取决于你，但是得记住，Angular是自成一体的。你很可能需要让第三方包去适配Angular。另一方面，React仅仅只是JavaScript而已。任何用JavaScript写的的包都不需要用React去封装。对我而言，使用npm和Bower这样的包管理器更好。我们可以选择自己的组件和工具集。需要明确的是：这比使用像Angular这样的综合性开发框架更复杂。就这方面而言，React的好处是鼓励使用npm，npm已经拥有了很多现成的包。你可以选择一个开始构建React应用的包。转向使用React也不是一帆风顺的！由于Angular是一个应用开发框架，它带来了很多便利。我放弃了一些好的功能比如：封装好的AJAX用于$http服务，$q用于应答服务，ng-show，ng-hide，ng-class和ng-if作为模板的控制语句——所有这一切都让人惊奇。React不是一个应用开发框架，所以你需要考虑如何处理构建一个应用程序的其它方面。例如，我正在参与一个叫做的开源项目，它可以帮助React进行更简单便捷的开发。就目前而言，社区也在积极的贡献一些类似的组件来填补这一方面的空白。就是这样一个非官方的网站，你可以在这儿找到类似的开源组件。React的信条不鼓励使用双向绑定，这也给处理表单数据和编辑表格数据带来了很多痛苦。无论如何，当你开始理解Flux数据流和存储，事情就变得简单、清晰和简单。React是新生的。这需要一些时间让它周边社区发展。在另一方面，Angular已经非常流行了，且有大量的可用扩展（例如 AngularUI和Restangular）。虽然React的社区刚起步，但是发展得非常迅速。像React Bootstrap这样的扩展就是一个很好的证明。我们早晚会拥有更多更丰富的组件，这只是一个时间问题。总结如果你喜欢Angular的方式，在一开始你可能会不喜欢React。主要是因为它是单向数据流且缺乏开发应用程序的一些功能。最终很多事情还是需要自己来考虑。然而当你开始习惯了Flux的开发模式和React的设计理念，我相信你会看到它的美。Facebook和Instagram都在使用React(因为他们在领导这个项目)。GitHub最新的源码编辑器Atom就是用React构建的。雅虎邮箱也正在使用React重构。React已经被大量的应用程序和科技公司所关注。（责编：陈秋歌）原文来自：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章当前访客身份：游客 [
当前位置：
React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
Facebook开源了React，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建Instagram网站及Facebook部分网站。最近出现了AngularJS、MeteorJS 和Polymer中实现的Model-Driven Views等框架，React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。
ReactJS最新更新资讯，共27条&&(，)
4评/2193阅
10评/2698阅
8评/2938阅
16评/3631阅
授权协议：
开发语言：
操作系统：
收录时间： 日
更多开发者职位上
dcteris 发表于2个月前
，最后回答(2个月前)：
Caio_zcy 发表于2个月前
陈为迪 发表于4个月前
，最后回答(4个月前)：
oceanchen 发表于5个月前
，最后回答(5个月前)：
linxp 发表于5个月前
叶秀兰 发表于6个月前
，最后回答(6个月前)：
OSC编辑部 发表于7个月前
，最后回答(6个月前)：
leogiese 发表于1年前
，最后回答(1年前)：
leogiese 发表于1年前
，最后回答(1年前)：
leogiese 发表于1年前
，最后回答(1年前)：
leogiese 发表于1年前
，最后回答(1年前)：
笔阁 发表于4个月前
使用 ReactJS 中的任何问题
：一直很好奇这种标签式的语法是怎么写在Js里面，才发现FB用js做了一套语法分析
： 部分 UI 使用
组件，赞你一个
：React真是很不错的框架，我翻译了部分文档，可以看看 http://t.cn/zQhJbmA
共有 920 个类似软件
ClickHeat 是一个很酷的 JavaScript 库，它可以帮你统计一个页面上用户点击的热度分...
Kalendae 是一个 JavaScript 实现的日期选择工具，无需依赖其他 JS 库。 在线演示：...
CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法...
Sea.JS 是一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 Java...
PaintWeb 是一个 Web 应用程序，可以让你直接在浏览器上进行绘图，它使用的是新的 ...
Tangram是Baidu开发的一套简单可依赖的Javascript库，它的特点： * 体积小巧，性能...
jsDraw2D是jsFiction公司提供的第一个产品，他们计划创造各种各样的革命性的JavaS...
ControlJS 主要为了是解决网页加载中Js文件的性能问题，ControlJS的原理 ControlJ...
jsdialog 是一个简单的JavaScript对话框，弹出的对话框可拖动。 使用代码： functi...
Date.js 是一个开源的JavaScript库，用来解析、格式化和处理日期数据，支持多种语言...
共有 237 人关注 ReactJS1602人阅读
react学习笔记（7）
Virtual&DOM 毫无疑问是 React 的精髓。
可能很多人包括我看完官方文档之后对Virtual DOM的理解就是：
它通过JS对象模拟原生DOM，加上DOM&Diff&极大提升了DOM操作的性能。
这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。
如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。
Virtual DOM 最大的意义绝不是提升性能，而是他对DOM进行了一层抽象。当我们在浏览器中使用&React的时候，感觉不是特别明显，毕竟我们写的DOM标签跟原生的没什么区别，并且最终都被渲染成了DOM。
但是react native 的推出已经完全说明了 Virtual DOM 的颠覆性意义：它抽象了DOM的具体实现。
在浏览器中，Virtual DOM最终编译成了DOM，但是在&iOS中，Virtual DOM却完全可以编译成 oc 中的组件，甚至在安卓、windows、mac osx 中都完全可以编译成对应的UI组件。
在没有Virtual&DOM之前，我们的代码中JS逻辑和UI是完全耦合的，不具有任何可移植性。
使用了Virtual DOM之后我们的代码编程这样了：
注意上图分为三个部分：
1，其中蓝色部分是JS业务逻辑，完全可以借助Node移植到任意平台上。
2，其中红色部分是 Virtual DOM，虽然抽象了，但是在不同的平台上有不同的实现。不能完全移植，但是用法基本一致。
3，其中绿色的是我们不关心的底层UI调用。
而这正是&React native 的做法。React&native 的iOS实现，就是可以把&Virtual DOM 编译成 iOS的UI组件。除了这些组件的用法和浏览器中的DOM有些不同之外，其他的完全是一样的。
为什么说 React Native 提倡“一次学习，到处编写”，而不是像java一样 “一次编写，到处运行”。是因为它只是把iOS的UI组件做了抽象，但是并没有打算把 浏览器，iOS和Android的所有组件全部抽象成统一接口。所以你在Web上编写的代码在 iOS上一般是跑不通的，因为你会用一些&DOM才有的特性，比如 style=‘hight:20’。
而 java 为什么能做到 “一次编写，到处运行”。是因为它在所有的平台上都提供了统一的UI实现。
其实 React Native 也可以学习java awt的做法来做到 “一次编写，到处运行”。就是把浏览器，IOS，android的组件全部取一个公共子集，抽象成统一的接口。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：168365次
积分：2587
积分：2587
排名：第8295名
原创：88篇
评论：57条
(1)(1)(5)(14)(3)(7)(6)(3)(1)(2)(2)(2)(1)(1)(5)(3)(4)(4)(4)(1)(2)(1)(2)(12)(1)(1)(1)(5)React.js在Codecademy中的实际应用_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
React.js在Codecademy中的实际应用
上传于||暂无简介
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩6页未读，继续阅读
你可能喜欢