ReactJS 编程风格方面的疑惑

[simonlify]

首先我介绍一下大概情况，本人一直从事服务器端，前端开发工作，但是极少用到 AngularJS,ReactJS 这类框架技术，常用的就是 javascript ， jQuery 等等，所以这方面的知识还是有的

最近一段时间，自我感觉有必要学一下当下流行的 JS 框架，决定从 React 入手，经过一周断断续续的官方文档的阅读，已经对它有了一定的了解，也自己写过一些 demo ，那么我的问题来了

我发现 React 和 JQuery 从风格上最大的一点不同就是 React 把 js 和 html 融合在一起了，不像之前的， html 页面中， body 中间放 html 结构，下面 script 标签中放 js ，当然官方文档中也提到了这样做的好处，我也在 github 上下了一些简单的项目作为参考，但还是没搞太明白，所以我想问的是，这种 js 和 html 交叉融合是否是 React 的正常风格？或者说常规写法是否如我理解的那样？还请各位不吝赐教！再次感谢！

[mdluo]

React 并不是 JS 和 HTML 融合，而是 JSX ，一种类似于 HTML 的语法（其实是 JS ），用来定义虚拟 DOM 的结构

由于 React 已经把页面拆分成了一个个 Component ，每个模块管理自己的状态，所以不再需要用 jQuery 的 HTML DOM 选择器了，其他的工具函数也可以用 lodash 等替换。

然后至于浏览器中的 HTML 结构，一般是用 webpack 或者 browserify 来把 JS 打包成一个文件，嵌入到服务器输出的一个简单 HTML 中。当然可以用 SPA 的模式，也可以用 Isomorphic 的模式

[ianva]

react 把业务抽象成一个个组件，组件又即是标签
js 和 html 交叉融合这件事情本身不是前端逻辑维护上的问题
前端最大的问题其实就是 jquery 和 dom 直接操作，带来的操作 dom 的同时用又融入业务逻辑，这样 dom 的操作和业务逻辑无法分离，而产生维护性和复用性的问题
所以不管是 angular 还是 react 都更容易维护

关于 js 和 html 融合的维护性问题主要是早期，所有东西都写在 html 文档上，其实相当于， js ， css ， html 糅杂再一起然后再加上 dom 操作做和业务逻辑交错产生的更麻烦的问题
很显然 react 如果组件化抽象并并不会带来以上问题，当然如果你把整个页面和所有模块都丢在一个 render 里上述事情就会发生

[SuperMild]

lz ，你说的 html 应该是指真实 DOM ，而在 react 里是尽量避免直接操作真实 DOM 的，应该用 JSX 来写组件，然后操作组件， react 会自动帮你采用最高效的方式更新真实 DOM 。

这种方式非常优秀，简直是革命性进步，你可以先写一个包含一切的大组件，当觉得太复杂时随时可以非常方便的把其中一部分抽出来做小组件，这样做逻辑非常清晰，过十年回头一看代码都能秒懂其业务逻辑。

[yaochiqkl]

该类 MV*框架对前端带来了很多优势，比如说数据绑定，数据得到了更新，直接页面上就可以变化，而不是需要 JQuery 那样不想断地选择 DOM 和更新节点。当重前端的 web 富应用代码复杂到一定程度时，做到前端的数据和页面的分离是有必要的。

[ChefIsAwesome]

jQuery -> 前端模板 -> MVC -> react
你直接从头跳到尾，步子迈大了，当然不知道怎么回事。

[simonlify]

@ChefIsAwesome 哈哈，看了上面的回复，觉得你说得很有道理！

[simonlify]

@ianva
@mdluo
@SuperMild
@yaochiqkl
非常感谢各位的讲解，对我很有启发！