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