为什么是React-浅谈React与jQuery的思维差异
需要实现的效果
先来看看React版本:React.js的提供了一整套Virtual DOM,所有的操作都在这个Virtual DOM上,只有当事件发生的时候, 下面是我托管在jsBin上的Demo: React代码处理问题的思路:
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版本
因为jQuery只是一个工具库,它处理问题的思路是,用选择器选择DOM元素,有需要的话就对某个DOM元素进行监听,然后再事件监听函数里进行相对应的处理 jQuery版演示代码 jQuery处理问题的思路
<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适合用在那些DOM操作复杂的单页面应用,有利于提高代码可读性以及提高页面性能(可以参考React Diff算法);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |