[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">&nbsp;</h3>
      <h4 id="post_card_price" style="color:red;">&nbsp;</h4>
      <p id="post_card_description">&nbsp;</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"));

用这个例子来说明力量当然是不够的。

虽然篇幅有限,所以请稍后继续介绍!

联系我们

13751415268

853408942

:853408942@qq.com

:9:30-22:30

QR code