Re: [問題] 用React.js的好處?

作者: steven11329 (清新柳橙)   2017-08-11 00:14:45
※ 引述《BullFrog0975 (BullFrog0975)》之銘言:
: 小弟最近要入坑react.js
: 以往都是用jquery跟傳統javascript來開發網站
: 但老實說我對於react.js有點不太懂它可以做什麼
: 有人可以告訴我他能解決什麼很麻煩的問題嗎?(舉實例)
以純React來說我目前感受到的幾個好處。
1.對網頁tag顯示與隱藏的控制更加方便。
以純js來說要隱藏(不是移除)一個element
並且顯示一個隱藏的element可能的寫法如下:
document.getElementByID('A').classList.remove('hide');
document.getElementById('B').classList.add('hide');
另外要在<style>裡加上class .hide { display: none; }
jQuery寫法:
$("#A").hide();
$("#B").show();
而React只要{ (this.props.needDisplay)? {A} : null; }
在elements少的情況下,純js的寫法還算OK。
但如果今天要顯示AB隱藏CDEF,然後按一個Button要隱藏B顯示EF...
就會感覺一直在寫重複的東西而且很長一串。
而對React來說只需控制
needDisplayA
needDisplayB
的ture/false就可以輕鬆達到hide/show的效果。
2.增加減少elements
如果我們要對ul增加li為了操作上的方便,對ul跟li給上id。
同時要有個紀錄目前有幾項的變數count;
增加element(count = 2):
<ul id="list">
<li id="doSomething-1">Sleep</li>
<li id="doSomething-2">Play game</li>
</ul>
let ul = document.getElementById('list');
let newLi = document.createElement('li');
newLi.id = "doSomething-" + (++count);
newLi.innerHTML = "Read book";
ul.appendChild(newLi);
jQuery寫法:
$("#list").append( "<li id="doSomething-3">Read book</li>" );
作者: duck10704 (duck)   2017-08-12 11:18:00

Links booklink

Contact Us: admin [ a t ] ucptt.com