[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"));

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

虽然篇幅有限，所以请稍后继续介绍！