[ReactJS] 01. 为什么要用React JS
._card{ width: 300px; height: 230px; position: relative; overflow: hidden; float: left; } ._card > .card-content{ position: absolute; background-color: rgba(0, 0, 0, 0.3); color: white; text-align: left; margin: auto; bottom: 0; height: 100%; width: 100%; }
一般而言,现在谈到潮代表,不外乎ReactJS和VueJS,所以喜欢和别人走不同路线的「进度条小编」先写一篇吧。
再进一步考虑,也许这个项目不需要使用ReactJS。
对ReactJS进行了简单的负标题介绍。
尽管如此,当项目开始变得复杂,功能也越来越多。另外,由于AJAX不同步,收集数据的工作变得越来越复杂。此时,基础扎实的工程师们发现传统的不同步解决方案应该被移除。但是再次发现松散的JavaScript设计使得实现变得不那么容易。
的确,世界上的高手如此之多,因此也发明了许多解决办法。时至今日,集大成者的主流作品是ReactJS和VueJS两种。虽然网站的功能越来越复杂,但即使是现在很多人都在使用的,在不久的将来被取代的可能性还是很大的。
这篇文章既然是用面介绍的,现在就谈谈实际例子。目前网站上最麻烦的大概就是即时交互了。在后台通过拍卖网站上架商品。通常的做法是一页纸就能搞定。
<form> <input name="product[name]"> <input name="product[price]"> <textarea name="product[description]"> <button type="submit">送出</button> </form>
肯定会加一些漂亮的CSS和其它商品应该有的字段。比如图片,或者商品分类等。
然而,目前看来,事情可能还有待解决。当输入时,您就能看到最后在前台长出来的样子。
好像在下面一样。
题目:
价格:
说明:
function posts_36_card_update(){ $("#post_card_name").html("商品名稱:" + $("#post_example_name").val()); $("#post_card_price").html("商品價格:" + $("#post_example_price").val()); $("#post_card_description").html("商品敘述:" + $("#post_example_description").val()); } posts_36_card_update(); $("#post_example_name").on('input', posts_36_card_update); $("#post_example_price").on('input', posts_36_card_update); $("#post_example_description").on('input', posts_36_card_update);
您输入的文字会自动显示在卡上。
以上这些功能都是通过纯JavaScript实现的,并且只是ES5的一个版本。
编码如下:
<!-- HTML input--> <div> <p> 标题:<input id="post_example_name" name="product[name]" placeholder="請輸入標題" type="text" value="新標題" /> </p> <p> 價錢:<input id="post_example_price" min="0" name="product[price]" placeholder="請輸入價錢" type="number" value="100" /> </p> <p> 敘述:<textarea id="post_example_description" name="product[description]"></textarea> </p> </div>
<!-- HTML card--> <div class="_card"> <div class="card-container"> <div class="card-content"> <h3 id="post_card_name"> </h3> <h4 id="post_card_price" style="color:red;"> </h4> <p id="post_card_description"> </p> </div> </div> </div> <!-- javaScript --> <script> function initDynamicCard(){ var cardNameElement = document.querySelector("#post_card_name"); var cardPriceElement = document.querySelector("#post_card_price"); var cardDescriptionElement = document.querySelector("#post_card_description"); var exampleNameInput = document.querySelector("#post_example_name"); var examplePriceInput = document.querySelector("#post_example_price"); var exampleDescriptionInput = document.querySelector("#post_example_description"); exampleNameInput.addEventListener('input', posts_36_card_update); examplePriceInput.addEventListener('input', posts_36_card_update); exampleDescriptionInput.addEventListener('input', posts_36_card_update); function posts_36_card_update(){ var name = exampleNameInput.value; var price = examplePriceInput.value; var description = exampleDescriptionInput.value; cardNameElement.innerHTML = name; cardPriceElement.innerHTML = price; cardDescriptionElement.innerHTML = description; } posts_36_card_update(); } initDynamicCard(); </script>
<!-- css --> <style> ._card{ width: 300px; height: 230px; position: relative; overflow: hidden; float: left; } ._card > .card-container{ position: absolute; background-color: rgba(0, 0, 0, 0.3); color: white; text-align: left; margin: auto; bottom: 0; height: 100%; width: 100%; } ._card > .card-container > .card-content{ padding: 16px; } ._card > .card-container > .card-content > .price{ color: red; } </style>
本例只是一个比较明显的例子,而上面的视频示例则更加简单。
那样写当然可以,不过他有些毛病。
1.对每个已更改的字段都设置id,通过attributename即可获取id。但是,卡片上的字段是不能修改的。ID是唯一的,因此如果在同一个页面中可以修改许多card,id就可能变成唯一的。
card1#,#post_card2。
像这样的流水号这段代码有很多变化,并且会出现字符串组合("post_card"+number+"_name"等),可读性也会突然下降。
2.如果现在使用AJAX来获取组成Table的数据,那么将有大量的createElement通过append去动态组出card。
如有维护过的程序应该都知道这一点,只是一个Table表都很容易出现40~50行代码,更不要说遇到了编写不好的程序了。
即使用React重写,程序也可能不会变短。不过,您可以在实现时不需要id,也不会遇到带有append的createElement。
下一段代码在现阶段我们可能无法理解,但可以看出,HTML和JavaScript是一致的。
下面是代码(CardCSS使用的版本与JavaScript相同):
(JSFiddle)
或者象上面那样的文字版本。
<!-- html --> <div id="demo"> </div> <script src="js/main.js" type="text/javascript"></script>
<!-- jsx --> import React from 'react'; import ReactDOM from 'react-dom'; class Card extends React.Component { constructor(props) { super(props); this.state = {name: "新標題", price: 100, description: "description"}; } handleNameChange(e){ this.setState({name: e.target.value}); } handlePriceChange(e){ this.setState({price: e.target.value}); } handleDescriptionChange(e){this.setState({description: e.target.value}); } render() { return(<div> <div> <p>標題:<input name="product[name]" placeholder="請輸入標題" type="text" value={this.state.name} onChange={this.handleNameChange.bind(this)}/></p> <p>價錢:<input min="0" name="product[price]" placeholder="請輸入價錢" type="number" value={this.state.price} onChange={this.handlePriceChange.bind(this)} /></p> <p>敘述:<textarea name="product[description]" onChange={this.handleDescriptionChange.bind(this)} value={this.state.description}></textarea></p> </div> <div className="_card"> <div className="card-container"> <div className="card-content"> <h3>商品名稱:{this.state.name}</h3> <h4 className="price">商品價格:{this.state.price}</h4> <p>商品敘述:{this.state.description}</p> </div> </div> </div> </div>) }} ReactDOM.render(<Card />, document.querySelector("#demo"));
用这个例子来说明力量当然是不够的。
虽然篇幅有限,所以请稍后继续介绍!