作者steven11329 (清新柳橙)
看板Web_Design
標題Re: [問題] 用React.js的好處？
時間Fri Aug 11 00:14:45 2017
※ 引述《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>" );
-------------------------------------------------------------
減少element：
document.getElementById('doSomething-' + (count--)).remove();
jQuery寫法：
$('
#doSomething-' + (count--)).remove();
-------------------------------------------------------------
而React只要對控制li的array做push/pop即可簡單達成上述繁瑣的code。
以上是我對"純"React好處的感受。
而React更大的好處在於其豐富的套件。
要做Single Page App(react-router)
資料流追蹤(react-redux)
非同步function控制(react-saga)等等..
在此就不詳述每個套件的主要功用。
可能還有其他好處，但是小弟我只用react半年左右，
才疏學淺，目前只能體悟這麼多。
希望高手大大們能再補充。
--
人生宗旨：摔不死！那就再來吧！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.225.173.95
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1502381693.A.AAC.html
1F：推 duck10704: 推 08/12 11:18