作者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/cn.aspx?n=bbs/Web_Design/M.1502381693.A.AAC.html
1F：推 duck10704: 推 08/12 11:18