谈谈React
為什么80%的碼農都做不了架構師？>>> ??
##React無限好,只是我矯情 前置知識點:
本文帶有強烈的個人觀點,雖然我真的很喜歡React,React真的好用! 但是喜歡不等于無腦,學習其中的精髓才是重點.
其實,我也中了React的毒.什么項目一到我手上,我就想著用React來寫.React的思想和項目的結構,可以說我是一見鐘情.組件化,數據單流與唯一都讓我愛不釋手.有一段時間,我都接受不了不用React的項目.
但是今天,我就是來到當攪屎棍的,待會將用ES6來代替React.在此之前,想想操作DOM的模式已經存活了很久,可以說非常的成熟,各種資源也非常的多,要說他的缺點,我認為以下是最主要的點:
考慮到這些點,我覺得React的優勢在某些情況下,并沒有想象中的大,比如說展示性的頁面,后臺等.本身DOM操作就并不頻繁,且不追求性能,那么React的VD(Virtual-DOM)就變得殺雞用牛刀,甚至可以說是代碼冗余
##未來的世界,React可能已經逝去,但ES6肯定還在 就如標題所表達的,原生JavaScript是不會被淘汰的,學ES6肯定不虧,這也是為什么我想用ES6來治好我的React病的原因.接下來,我們就進入主題,來假裝我們在用React開發.他有個名字叫Feact(Fake React)
因為ES6兼容性還不是很好,所以我們需要一系列工具來輔助我們開發,以下就是我們的開發棧.
ES6這里我就不多說了,學習的話,深入淺出ES6和MDN文檔這2個足已,webpack+babel網上資料也是一大把,要不然可以參考下這個最小化React構建項目
##世界那么大,我不想只寫React
先看下我的React組件代碼:
import React, {Component} from 'react'; import './css/css.less'; //組件的獨有樣式class Feact extends Component {constructor(props) { //構造初始化組件super(props);this.state = { _dom: props.dom,_txt: 'So Nice!'}}change(txt) { //自定義事件(函數)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) { //初始化構建this.state = { //保存必要的數據_dom: props.dom}this.render(props.html); //開始渲染html$(props.dom).on('click', () => {}); //事件綁定}change(txt) { //組件的自定義事件(函數)$('.acv').html(txt);}render(html) {const {_dom} = this.state,_html = ``;_html = ` //ES6的字符串模板<div class='acv' > //這里如果是循環列表的話也可So Nice! //用ejs等模板來渲染,反正大同小異</div>`;$(_dom).html(_html);} }export default Feact;調用方面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,形成了一個模塊化組件化開發的模式,除了說上面的Feact代碼是用很low的DOM操作之外,其他的基本上沒啥問題.
Feact也很符合傳統只搭配jq來做項目,只是盡量的把js代碼組件化,包括:組件數據集中,組件渲染集中,組件獨立開發(沒有依賴)等.你看,其實Feact已經挺好用了.而且上手并不難.
##Feact的真面貌 心聲:React真的好用!其實Feact只做了最基礎的一些東西,就是代碼的組織化,模塊化.然而React卻不止這些,讓我們來看看Feact的真身:
說到底,Feact只是套上了ES6模塊發開發思想的原生代碼,他只是起到了組織代碼的功能,也因為是原生的緣故,配合傳統的第三方庫類非常的方便.
##最后吐槽下React,再回去繼續寫React
###寫在最后: React真的好用,你們不用數,整篇文章我用了5次"React真的好用",表達我真心看好他.但如果你已經會用React寫項目了,不妨也安靜仔細的思考下React帶給我們什么,并不是什么都適合派React上陣,畢竟使用它也是需要成本的.
相關思想的文章:
- 為什么我不再使用MVC框架
- Flux用過了，Redux也用過了，還是覺得不順手？要不要自己造一個？
轉載于:https://my.oschina.net/l3ve/blog/746878
總結
- 上一篇： MAVEN 自定义骨架
- 下一篇： NDN与TCP/IP