react 體驗 react與vue的比較

用了 vue 大半年了,不過我在2023年暑假的時候就看到了 react 這個專案,學習了一番,不過之前學習的都是基礎語法和一些基礎用法吧,總的來說 mvvm 框架確實都很相似,會乙個就可以了;

今天我的配置 react 的時候,搜尋過後,發現很多都是一步一步來配置檔案的,不過也有好處可以幫助我理解 webpack ,不過這配置也太慢了,如果沒存好,還得再來一遍嗎?

當然不是,我找到了快速搭建專案的指令:

1.2.

3.如果速度太慢的話,可以使用 cnpm;

inside that directory, you can run several commands:

npm start

starts the development server.

npm run build

forproduction.

npm test

starts the test runner.

npm run

eject

removes this tool and copies build dependencies, configuration files

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=而且在事件的傳值方面也會麻煩一點,比如 onclick= 這樣傳遞,而 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
} render() 
}

react 的引用元件可以是任何位置的,比如他在當前頁面的話:

function
loginbutton(props) 
class www extends react.component 
...}

可以直接就放在上面了,而如果是其他頁面,也可以引用,如:

components.js:

class www extends react.component ;
export default www;

index.js(主頁面):

import grewer from './components.js';

然後再 render 裡寫上

就可以了;

而且這乙個components.js 檔案可以寫成乙個元件引用的塊,

在 component.js 裡寫多個 function 或者 class 通過 export default

而 index.js 頁面

import grewer from './components.js';

後可以通過

let q = grewer.qq

在 render 裡寫入:

也可以這樣 :

要注意 vue和 react 都強調元件首字母都要大寫;

而且我發現 react 可以引用當前元件裡的函式當元件,一般來說元件名稱寫成小寫會被認為是 html 元素,

但是我這樣寫

class www extends react.component 
render()
}

這樣是可以成功的,但是我也是感覺怪怪的,首先從規範上來說就是不行的,其次能在當前元件裡寫出來,為什麼不能直接寫出來呢,有點多此一舉;

這個也只是一項小實驗;

然後關於 api ,vue 確實提供的 api比較多,比如 computed,watch,filters 等等,而 react 就像把函式都放在了 methods 一樣,怪不得人們都說 vue 適合新手,因為他有著規範,某個函式該寫在**就寫在那裡,就算水平差,寫出來的也還是能看的;

而 react 就不一樣了,自由度非常大,正因為這樣,也會比較考驗使用者的水平;

react 體驗 react與vue的比較

React開發初體驗

27 用webpack自搭react和vue框架

React 360 初體驗介紹與環境搭建

react 體驗 react與vue的比較

React開發初體驗

27 用webpack自搭react和vue框架

React 360 初體驗介紹與環境搭建

相關推薦