下载：20130709125708248 原文：jquery ui仿腾讯web qq界面desktop酷炫特效
September 19, 2020
浅谈React与jQuery的思维差异, React和jQuery的区别
为什么越来越多的互联网公司都在转向React.js去开发前端组件，除了性能因素外，很大一部分原因是因为用jQuery去写很复杂的DOM操作，后期代码会变得越来越难维护。现在大部分的 Web APP 都有一个特点：后端的Model层很简单，但是随着产品业务的拓展前端View却变得越来越复杂，这个时候如果还在用纯jQuery去写DOM操作将会变得很不直观，代码也会变的很臃肿进而变的越来越难以维护，下面就拿一个微博发送框的简单例子来展示一些React的简洁与强大。
注意：
- React并不适合所有项目，需要结合实际情况综合考虑
- jQuery与React并不是一个层面上的东西，jQuery只是一个工具库，这里只是展示两种编程模式的思维差异
- 理解一个技术的思想比学会怎么用它更重要，同时我们还需要知道不同的技术间的区别的核心在哪，这样我们才能学会用合适的技术去解决合适的问题
- 这里的tweet box只是一个简化版的UI模型，仅用来说明jQuery和React的思维差异，并不具备发Twitter的功能
- 你也可以写出简洁的jQuery代码。但是你必须想出良好的代码结构，每次想要增加新功能的时候还需要特别注意是否影响代码的重构，使用React会帮助你团队内部拥有更好的代码结构，页面性能也会得到相应的提高
需要实现的效果
- tweet box为空时，tweet button显示为灰色不可点击状态
- tweet box下方显示还可以输入的字符数量
- 点击add photo，剩余字符数量及add photo按钮状态发生改变（假定图片占用23个字符）
先来看看React版本：
React.js的提供了一整套Virtual DOM，所有的操作都在这个Virtual DOM上，只有当事件发生的时候，state才发生改变，之后，React自动调用render()来更新UI
下面是我托管在jsBin上的Demo：
React代码处理问题的思路：
- 创建一个状态变量用来追踪textarea中的字符的数量
- 在textarea的onChange事件发生时改变其状态
- 使用render()重新渲染tweet box，显示还可以输入的字符的数量
var TweetBox = React.createClass({
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
togglePhoto: function(event) {
this.setState({ photoAdded: !this.state.photoAdded });
},
remainingCharacters: function() {
if (this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
},
render: function() {
return (
<div className="well clearfix">
<textarea className="form-control" onChange={this.handleChange}></textarea>
<br/>
<span>{ this.remainingCharacters() }</span>
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0 && !this.state.photoAdded}>
Tweet
</button>
<button className="btn btn-default pull-right" onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
</div>
);
}
});
React.render(
<TweetBox />,
document.body
);
再来看看熟悉的jQuery版本
这里用到了Bootstrap框架，但是仅仅只是为了好看，如果不熟悉BootStrap的话请自动忽略CSS Class 因为jQuery只是一个工具库，它处理问题的思路是，用选择器选择DOM元素，有需要的话就对某个DOM元素进行监听，然后再事件监听函数里进行相对应的处理
jQuery处理问题的思路
- 给按钮或者文本框绑定监听事件
- 如果事件触发则开始判断，各个DOM对象的当前状态（通常会借助css class来表示状态）
- 改变对应的DOM来实现想要达到的效果（tweet box下方显示还可以输入的字符数量，按钮是否可点击）
<div class="well clearfix">
<textarea class="form-control"></textarea><br>
<span>140</span>
<button class="js-tweet-button btn btn-primary pull-right" disabled>Tweet</button>
<button class="js-add-photo-button btn btn-default pull-right">Add Photo</button>
</div>
// 给文本框绑定事件，监听是否有输入
$("textarea").on("input", function() {
if ($(".js-add-photo-button").hasClass("is-on")) {
// add phtot按钮已经点击，剩余输入文本数量再减23
$("span").text(140 - 23 - $(this).val().length);
} else {
// 计算剩余文本数量
$("span").text(140 - $(this).val().length);
}
if ($(this).val().length > 0 || $(".js-add-photo-button").hasClass("is-on")) {
// 如果文本框里有内容或者add phtot按钮已经点击，tweet button设置为可点击状态
$(".js-tweet-button").prop("disabled", false);
} else {
// tweet button设置为不可点击状态
$(".js-tweet-button").prop("disabled", true);
}
});
// 给添加照片的按钮绑定点击事件监听
$(".js-add-photo-button").on("click", function() {
if ($(this).hasClass("is-on")) {
$(this).removeClass("is-on").text("Add Photo"); // 切换add photo按钮显示状态
$("span").text(140 - $("textarea").val().length);
if ($("textarea").val().length === 0) {
// 切换tweet按钮前需要先判断textarea当前状态
$(".js-tweet-button").prop("disabled", true);
}
} else {
$(this).addClass("is-on").text("✓ Photo Added"); // 切换add photo按钮显示状态
$("span").text(140 - 23 - $("textarea").val().length);
$(".js-tweet-button").prop("disabled", false);
}
});
总结
- 在React中，只有当事件发生的时候，state才发生改变，之后，React自动调用render()来更新UI
- state成为了事件以及render()之间过渡：
- 每个事件不需要担心哪一部分的DOM发生变化，他们只需要设置state就可以了
- 相应的，当你写render()的时候，你也只需要担心现在的state是什么
- jQuery没有中间的过渡层’state’，我们需要花费很大的精力来解决它们之间相互的联系(对于复杂的组件，建议使用React而不是jQuery)
- React中把各个UI组件独立出来，有利于提高UI组件的复用率同时降低各个UI组件的耦合
- 新手在直接操作DOM时很难写出高效而又优雅的代码，从而使得前端代码满满变得越来越难以维护
也就是说，React适合用在那些DOM操作复杂的单页面应用，有利于提高代码可读性以及提高页面性能（可以参考React Diff算法）； jQuery则是个用来帮你完成一些基本操作的工具库
本文：浅谈React与jQuery的思维差异, React和jQuery的区别
About Author
