最近因為一些小型網頁的需求，想說順便來研究一下react的寫法，開始把一些書跟網路教學範例都試著上手一下，一作下去，簡直是個大坑！
雖然之前已經把npm, yarn, nodejs, webpack稍微上手了！但是還是覺得react學習曲線很陡峭，很多寫法也非常不直覺！在要不要繼續往下深入時，就開始找一些文章來看，比較Vue跟React的差異，發現不少人也是因為React的寫法跟css in js and html in js的語法感到困惑或是難以上手，進而投入Vue。
一發現新大陸後，馬上轉向Vue開始研究，發現真的比React好上手很多，而且還是可以維持html css javascript三者分離並互相控制達到簡化程式邏輯的概念，不需要全部混在一起！至少在邏輯上也很清楚，而且在製作元件時，也不太需要去管怎麼雙向綁定資料或是狀態更新等等的status設定跟function重複撰寫，只要綁定後就會自己updateUI！真的很爽，感覺很像jQuery這種利器，所以Vue vs React感覺很像上一個世代的jQuery vs YUI的感覺，一個好上手，一個可以客製化很多api與事件！但是就我的目前的使用模式，基本上是好上手是最重要的，這樣比較好找人維護。而且Vue感覺是集Angular跟React各自的優點而結合，而且creater居然是中國人，中文教學資料超級多！
廢話不多說，馬上用React跟Vue各自寫一個一樣的簡單應用元件，就知道了！
這個元件很簡單，就是以前在做表單檢核時，textarea常需要限制使用者字數，以前寫的時候累死了，要一直計算textarea onchage時，不斷去更新計算字數並顯示在user info欄位中:
React:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
var TextAreaCounter = React.createClass({ propTypes: { defaultValue: React.PropTypes.string, }, getInitialState: function(){ return { text: this.props.defaultValue, }; }, _textChange: function(ev) { this.setState({ text: ev.target.value, }); }, componentWillReceiveProps: function(newProps){ this.setState({ text: newProps.defaultValue, }) }, render: function() { return ( <div> <textarea onChange={this._textChange}> {this.state.text} </textarea> <h3> {this.state.text.length} </h3> </div> ) } }) // 從外部存取整個元件的api var MyTextAreaCounter = ReactDOM.render( React.createElement(TextAreaCounter, { defaultValue : 'Hello World!!!', }), document.getElementById('app') ); |
Vue：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="app"> <textarea v-model="message">{{ message }}</textarea> <h3>{{ countNumber }}</h3> </div> <script> var app7 = new Vue({ el: '#app', data:{ message : 'Hello World!!!' }, computed: { countNumber: function() { return this.message.length; } } }) <script> |
以上的範例都是做到一樣的效果，這樣就知道我為什麼會只想好好用Vue了吧！XDDD