用了 vue 大半年了,不過我在2016年暑假的時候就看到了 react 這個項目,學習了一番,不過之前學習的都是基礎語法和一些基礎用法吧,總的來說 mvvm 框架確實都很相似,會一個就可以了;
今天我的配置 react 的時候,搜索過后,發現很多都是一步一步來配置文件的,不過也有好處可以幫助我理解 webpack ,不過這配置也太慢了,如果沒存好,還得再來一遍嗎?
當然不是,我找到了快速搭建項目的指令:
1.
npm install -g create-react-app
2.
create-react-app [你想要的項目名稱]
3.
如果速度太慢的話,可以使用 cnpm;
到這,項目會自動跳出如下提示:
Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd grewer npm start
基本都很清楚了;
文件結構是這樣的:
配置到這基本可以了,有點感冒,后面再更
11.21
首先我想說的是 mvvm 框架真的是很相似,我從最基礎的結構開始說;
Vue 和 react 的數據都是存在一個data 里,每一個組件都有一個存儲的data,如果不用 vuex 和 redux, 這就是唯一的存儲的位置,react 提供了一個函數來修改: setState,而 Vue 是直接修改data
再就是指令,這方面 Vue 的有他的指令,比如 v-on:click="clickMe"可以縮寫成@click="clickMe" 而且可以快速綁定鍵位,比如@keyup.enter="submit",就是綁定了回車鍵 而react 是直接在組件或者 DOM 上寫 onClick={this.clickMe}而且在 事件的傳值方面也會麻煩一點,比如 onClick={this.deleteRow.bind(this, id)} 這樣傳遞,而 Vue 的話 可以直接傳:@click="submit(data)",感覺方便一點;指令雖然都是語法糖,但是用起來還是更爽一點.
Vue和 react 的傳值都是通過props 來傳遞的 (如果沒有其他的插件或框架), 這一點都是差不多的;
再就是最重要的組件.Vue 的組件(我這里只講es6)一般是一個頁面一個組件而且有了新的后綴: page.vue, 他的 HTML,js,css 是寫在一個頁面中的, style 加上 scoped 的指令 就可以實現該頁面單獨的 css,一般 script 里都是 template包裹,
當我使用react 的組件時還是比較震驚的因為他的自由度確實比較大,首先一個組件可以是一個 function 也可以是一個 class(這里說的不是 css里的class),比如,當前頁面有一個組件:
注意從這里開始,代碼里的...(省略號)都表示省略部分代碼!
class grewer extends React.Component{ constructor(props){ super(props); this.state = {} } render(){ return <div>Hello!</div>; } }
react 的引用組件可以是任何位置的,比如他在當前頁面的話:
function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ); } class www extends React.Component { ... render(){ return <div>Hello!<LoginButton onClick="this.methods" /></div>; } ... }
可以直接就放在上面了,而如果是其他頁面,也可以引用,如:
components.js:
class www extends React.Component {...};
export default www;
index.js(主頁面):
import Grewer from './components.js';
然后再 render 里寫上
<Grewer />
就可以了;
而且這一個components.js 文件可以寫成一個組件引用的塊,
在 component.js 里寫多個 function 或者 class 通過 export default {qq,ww,ee}
而 index.js 頁面
import Grewer from './components.js';
后
可以通過
let Q = Grewer.qq
在 render 里寫入:
<Q />
也可以這樣 :
<Grewer.qq />;
要注意 vue和 react 都強調組件首字母都要大寫;
而且我發現 react 可以引用當前組件里的函數當組件,一般來說組件名稱寫成小寫會被認為是 HTML 元素,
但是我這樣寫
class www extends React.Component { ... test=()={...} render(){ return <div><this.test /></div> } }
這樣是可以成功的,但是我也是感覺怪怪的,首先從規范上來說就是不行的,其次能在當前組件里寫出來,為什么不能直接寫出來呢,有點多此一舉;
這個也只是一項小實驗;
然后關於 api ,Vue 確實提供的 api比較多,比如 computed,watch,filters 等等,而 react 就像把函數都放在了 methods 一樣,怪不得人們都說 Vue 適合新手,因為他有着規范,某個函數該寫在哪里就寫在那里,就算水平差,寫出來的也還是能看的;
而 react 就不一樣了,自由度非常大,正因為這樣,也會比較考驗使用者的水平;