為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

##React無限好,只是我矯情 前置知識點:

ES6的class

ES6的模板字符串

ES6的模塊Modules

本文帶有強烈的個人觀點,雖然我真的很喜歡React,React真的好用! 但是喜歡不等于無腦,學習其中的精髓才是重點.

其實,我也中了React的毒.什么項目一到我手上,我就想著用React來寫.React的思想和項目的結(jié)構(gòu),可以說我是一見鐘情.組件化,數(shù)據(jù)單流與唯一都讓我愛不釋手.有一段時間,我都接受不了不用React的項目.

但是今天,我就是來到當攪屎棍的,待會將用ES6來代替React.在此之前,想想操作DOM的模式已經(jīng)存活了很久,可以說非常的成熟,各種資源也非常的多,要說他的缺點,我認為以下是最主要的點:

DOM操作的龜速.

直接操作DOM雖然簡單暴力,但在一定程度上會導致操作的沖突,好比某個DOM在幾處不同的地方在不同的時間被修改,出現(xiàn)問題的話就難以判斷是哪個操作何時導致的(也就是維護性差),也很難保存統(tǒng)一DOM的狀態(tài),導致數(shù)據(jù)不一致等問題.

考慮到這些點,我覺得React的優(yōu)勢在某些情況下,并沒有想象中的大,比如說展示性的頁面,后臺等.本身DOM操作就并不頻繁,且不追求性能,那么React的VD(Virtual-DOM)就變得殺雞用牛刀,甚至可以說是代碼冗余

##未來的世界,React可能已經(jīng)逝去,但ES6肯定還在 就如標題所表達的,原生JavaScript是不會被淘汰的,學ES6肯定不虧,這也是為什么我想用ES6來治好我的React病的原因.接下來,我們就進入主題,來假裝我們在用React開發(fā).他有個名字叫Feact(Fake React)

因為ES6兼容性還不是很好,所以我們需要一系列工具來輔助我們開發(fā),以下就是我們的開發(fā)棧.

ES6(本體)

jquery(為了讓代碼看起來簡潔點,姑且跟他玩玩)

Babel(編譯ES6)

webpack(模塊化開發(fā),壓縮等各種處理)

ES6這里我就不多說了,學習的話,深入淺出ES6和MDN文檔這2個足已,webpack+babel網(wǎng)上資料也是一大把,要不然可以參考下這個最小化React構(gòu)建項目

##世界那么大,我不想只寫React

先看下我的React組件代碼:

import React, {Component} from 'react'; import './css/css.less'; //組件的獨有樣式class Feact extends Component {constructor(props) { //構(gòu)造初始化組件super(props);this.state = { _dom: props.dom,_txt: 'So Nice!'}}change(txt) { //自定義事件(函數(shù))this.setState({_txt: txt })}click() {} //定于點擊事件render() { //渲染模板const {_txt} = state;return (<div className='acv' onClick={this.click}>{_txt}</div>);} }export default Feact;

接下來看看我的feact組件代碼:

import './css/css.less'; //組件的獨有樣式class Feact {constructor(props) { //初始化構(gòu)建this.state = { //保存必要的數(shù)據(jù)_dom: props.dom}this.render(props.html); //開始渲染html$(props.dom).on('click', () => {}); //事件綁定}change(txt) { //組件的自定義事件(函數(shù))$('.acv').html(txt);}render(html) {const {_dom} = this.state,_html = ``;_html = ` //ES6的字符串模板<div class='acv' > //這里如果是循環(huán)列表的話也可So Nice! //用ejs等模板來渲染,反正大同小異</div>`;$(_dom).html(_html);} }export default Feact;

調(diào)用方面React與Feact的對比

import Feact from 'feact';//React---------------------------someplace(){this.ref.feact.change('Very Cool!');}//or------------------------------render (return <Feact ref='feact' dom='.class' />)//Feact---------------------------const feact = new Feact({dom: '.class'});feact.change('Very Cool!');

從上面的代碼來看,代碼風格其實相差不大.Feact用ES6的class和字符串模板加上webpack和babel,形成了一個模塊化組件化開發(fā)的模式,除了說上面的Feact代碼是用很low的DOM操作之外,其他的基本上沒啥問題.

Feact也很符合傳統(tǒng)只搭配jq來做項目,只是盡量的把js代碼組件化,包括:組件數(shù)據(jù)集中,組件渲染集中,組件獨立開發(fā)(沒有依賴)等.你看,其實Feact已經(jīng)挺好用了.而且上手并不難.

##Feact的真面貌 心聲:React真的好用!其實Feact只做了最基礎(chǔ)的一些東西,就是代碼的組織化,模塊化.然而React卻不止這些,讓我們來看看Feact的真身:

React的渲染是自動的,你只要改變了他的state,他就重新渲染.然而Feact需要你自己手動調(diào)用this.render,但其實這種情況也不算很多,直接操作DOM用html()來修改DOM的情形下,就基本不需要調(diào)用this.render了.

React有不算健全的jsx當模板,搭配起來用一句話來概括:Not best but good enough,然后Feact當然也需要一款模板引擎,比如ejs,其實單純用模板字符串的話也不是不可以,但是如果你可以接受活生生套一層for來生成列表的話,我也無話可說.要不然,你還是得乖乖的用第三方模板引擎.

Feact其實可以加上觀察者模式,用來實現(xiàn)個雙向綁定,這樣可以解放對DOM的操作,重點是HTML本來就是在組件內(nèi)渲染的,所以在組件內(nèi)綁定數(shù)據(jù)也可以做到統(tǒng)一管理.但是這無疑加大了學習難度.

Feact做的事情其實只有一件:把代碼模塊化規(guī)范化.

我真的編不下去了!!

說到底,Feact只是套上了ES6模塊發(fā)開發(fā)思想的原生代碼,他只是起到了組織代碼的功能,也因為是原生的緣故,配合傳統(tǒng)的第三方庫類非常的方便.

##最后吐槽下React,再回去繼續(xù)寫React

上手React并不難,但是學懂可就因人而異.一段中庸的js代碼和一段糟糕的React代碼,我還是會毫不猶豫的選擇前者,畢竟維護與日后的更新,并不一定是同個人.糟糕的React代碼,也會讓人窒息.

簡單的層級用React真的好用,因為你壓根就不會碰到在各個組件里依賴各種值,然后在父組件里傳來傳去的現(xiàn)象.當層級多了之后,真的是很需要很好的組件結(jié)構(gòu),要不然真心和回調(diào)地獄是同個等級的惡心.因為React提倡的就是單向數(shù)據(jù)流,只往子組件傳(當然,用回調(diào)和ref等方法,也不是不可以實現(xiàn)逆?zhèn)?只是這真的對不起React的設(shè)計思想),然后你就會覺得父親組件越來越臃腫.之后驚訝的發(fā)現(xiàn),到最后大部分組件都是最外層模塊是數(shù)據(jù)的獲取與處理,然后模塊里有一個或者多個只用來渲染的子組件,這也就是傳說中的高階組件形成的一種最初始模式.

React有一個特別流弊的技能,就是每當setState之后,他都會自己重新渲染組件,React真的好用,這很React! 炒雞方便,獲取到數(shù)據(jù),就set進去,然后React就自動渲染了.但如果你的數(shù)據(jù)是在最外層的組件里set的,React不管3721都幫你把里面的所有東西都重新渲染了.解決重新渲染的關(guān)鍵字:Immutable,shouldComponentUpdate,但是這就像是用setTimeout(300)來解決異步導致的先后問題一樣,有效,可是丑陋.自動卻不人性化的渲染,有時候的確不太稱心,即使React幫我們做了很多優(yōu)化.特別是在鼠標移進移出的時候,碰巧他渲染了組件,你也就只能在鼠標事件里做一件偉大的事:setTimeout.

Redux,好吧,React的親兄弟.Redux提供的一種解決方案其實是挺完美的,但是當和React結(jié)合起來之后,你就會遇到第三點的問題,丑而且麻煩!!!吐槽Redux的話,其實之前也有寫過一遍文章,這里我就不過多討論了,但總的來說,除了高階組件,他們2兄弟的確是現(xiàn)在最好的解決方案,只是我期望能有更好的出現(xiàn).

說React不好,我也寫了這么多字了,但他的好處可以寫一個系列文章,我很期待React ver.200的樣子,因為React從一開始的確帶給了我們很不一樣的思想,與解決方案.

###寫在最后: React真的好用,你們不用數(shù),整篇文章我用了5次"React真的好用",表達我真心看好他.但如果你已經(jīng)會用React寫項目了,不妨也安靜仔細的思考下React帶給我們什么,并不是什么都適合派React上陣,畢竟使用它也是需要成本的.

相關(guān)思想的文章:

• 為什么我不再使用MVC框架
• Flux用過了，Redux也用過了，還是覺得不順手？要不要自己造一個？

轉(zhuǎn)載于:https://my.oschina.net/l3ve/blog/746878

總結(jié)

以上是生活随笔為你收集整理的谈谈React的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。