您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue轉(zhuǎn)react入門知識點(diǎn)有哪些”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue轉(zhuǎn)react入門知識點(diǎn)有哪些”吧!
因?yàn)樾鹿臼褂胷eact技術(shù)棧,包括Umi、Dva、Ant-design等一系列解決方案。稍微熟悉一下之后,了解到雖然有些不同,但是還是大相徑庭。以下我就以兩個火熱的框架react16&vue2(在積極學(xué)習(xí)vue3中)從設(shè)計、書寫方式、API、生命周期及熱門生態(tài)做一下簡單的對比:
react | vue | 說明 | |
---|---|---|---|
定位 | 構(gòu)建用戶界面的js庫 | 漸進(jìn)式框架 | react側(cè)重于library,vue側(cè)重于framework |
渲染 | setState更新state的值來達(dá)到重新render視圖 | 響應(yīng)式數(shù)據(jù)渲染,修改了響應(yīng)式數(shù)據(jù)對應(yīng)的視圖也進(jìn)行渲染 | react需要考慮何時setState,何時render;vue只需要考慮修改數(shù)據(jù) |
編寫方式 | jsx | template | react是函數(shù)式,all in js;vue區(qū)分tempalte、script、style,提供語法糖,使用vue-loader編譯 |
react:嚴(yán)格的單向數(shù)據(jù)流
向下 props
向上 props func
多級傳遞 context
遵循萬物皆可props,onChange/setState()
vue:單向數(shù)據(jù)流
向下 props down
向上 events up(訂閱發(fā)布)
多級傳遞 $attrs、$listeners
還有各種獲取組件實(shí)例(VueComponent),如:$refs、$parent、$children;通過遞歸獲取上級或下級組件,如:findComponentUpward、findComponentsUpward;高階組件:provide/reject,dispatch/broadcast
react | vue | 說明 | |
---|---|---|---|
子組件數(shù)據(jù)傳遞 | props | props | 都是聲明式 |
組件狀態(tài)機(jī) | state | data | 管理組件的狀態(tài),react使用setState更改,vue直接賦值,新屬性使用$set;vue使用函數(shù)閉包特性,保證組件data的獨(dú)立性,react本就是函數(shù) |
react | vue | 說明 | |
---|---|---|---|
數(shù)據(jù)的初始化 | constructor | created | |
掛載 | componentDidMount | mounted | dom節(jié)點(diǎn)已經(jīng)生成 |
更新 | componentDidUpdate | updated | react:組件更新完畢后,react只會在第一次初始化成功會進(jìn)入componentDidmount,之后每次重新渲染后都會進(jìn)入這個生命周期,這里可以拿到prevProps和prevState,即更新前的props和state。 vue:在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和更新完畢之后被調(diào)用 |
卸載 | componentWillUnmount | destroyed | 銷毀事件 |
react
React 事件的命名采用小駝峰式(camelCase),而不是純小寫
使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù),而不是一個字符串
不能通過返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault
不能卸載非Element標(biāo)簽上,否則會當(dāng)成props傳下去
function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); }
vue
用在普通元素上時,只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時,也可以監(jiān)聽子組件觸發(fā)的自定義事件
//原生事件 <form v-on:submit.prevent="onSubmit"></form> //自定義事件 <my-component @my-event="handleThis(123, $event)"></my-component>
vue事件修飾符:
.stop - 調(diào)用 event.stopPropagation()。
.prevent - 調(diào)用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
.native - 監(jiān)聽組件根元素的原生事件。
.once - 只觸發(fā)一次回調(diào)。
.left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時觸發(fā)。
.right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)。
.middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
react
render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> }
vue
<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div> <div :class="[{ active: isActive }, errorClass]"></div>
react
<div style={{color: 'red', fontWeight: 'bold'}} />
vue
<div :></div>
組件樣式的時候你可以在style標(biāo)簽上聲明一個scoped來作為組件樣式隔離標(biāo)注,如:<style lang="sass" scoped></style>。最后打包時其實(shí)樣式都加入一個hash的唯一值,避免組件間css污染
react:jsx表達(dá)式, &&或者三元表達(dá)式;return false表示不渲染
vue:表達(dá)式返回true被渲染,可嵌套多個v-else-if,v-else
react:使用.map,一個元素的 key 最好是這個元素在列表中擁有的一個獨(dú)一無二的字符串
<ul> {props.posts.map((post) => <li key={post.id}> {post.title} </li> )} </ul>
vue:為了給 Vue 一個提示,以便它能跟蹤每個節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個唯一 key attribute
<li v-for="item in items" :key="item.message"> {{ item.message }} </li>
react
默認(rèn)插槽
<div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div>
具名插槽
<div className="SplitPane"> <div className="SplitPane-left"> {props.left} </div> <div className="SplitPane-right"> {props.right} </div> </div> <SplitPane left={<Contacts />} right={<Chat />} />
vue
默認(rèn)插槽
<main> <slot></slot> </main>
具名插槽
<header> <slot name="header"></slot> </header>
react:管理焦點(diǎn),文本選擇或媒體播放。觸發(fā)強(qiáng)制動畫。集成第三方 DOM 庫
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }
vue:被用來給元素或子組件注冊引用信息
<div ref="div">hello</div> this.$refs.p.offsetHeight
Umi
├── config # umi 配置,包含路由,構(gòu)建等配置 │ ├── config.ts # 項(xiàng)目配置.umirc.ts優(yōu)先級更高,使用此方式需要刪除.umirc.ts │ ├── routes.ts # 路由配置 │ ├── defaultSettings.ts # 系統(tǒng)配置 │ └── proxy.ts # 代理配置 ├── mock # 此目錄下所有 js 和 ts 文件會被解析為 mock 文件 ├── public # 此目錄下所有文件會被copy 到輸出路徑,配置了hash也不會加 ├── src │ ├── assets # 本地靜態(tài)資源 │ ├── components # 業(yè)務(wù)通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 約定式路由時的全局布局文件 │ ├── models # 全局 dva model │ ├── pages # 所有路由組件存放在這里 │ │ └── document.ejs # 約定如果這個文件存在,會作為默認(rèn)模板 │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ ├── global.ts # 全局 JS │ └── app.ts # 運(yùn)行時配置文件,比如修改路由、修改 render 方法等 ├── README.md └── package.json
vue_cli
├── mock # 項(xiàng)目mock 模擬數(shù)據(jù) ├── public # 靜態(tài)資源 │ └── index.html # html模板 ├── src # 源代碼 │ ├── api # 所有請求 │ ├── assets # 主題 字體等靜態(tài)資源 │ ├── components # 全局公用組件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── utils # 全局公用方法 │ ├── views # views 所有頁面 │ ├── App.vue # 入口頁面 │ └── main.js # 入口文件 加載組件 初始化等 ├── tests # 測試 ├── vue.config.js # vue-cli 配置如代理,壓縮圖片 └── package.json # package.json
react-router
history.push(/list?id=${id})
history.push({pathname: '/list', query: {id}})
history.push(/list/id=${id})
history.push({pathname: '/list', params: {id}})
獲取 props.match.query / props.match.params
vue-router
this.$router.push({path: '/list', query: {id}})
this.$router.push({path: '/list', params: {id}})
獲取 this.$router.query / this.$router.params
-react
{ path: '/', component: '@/layouts/index', routes: [ { path: '/list', component: 'list' }, { path: '/admin', component: 'admin' }, ], } <div style={{ padding: 20 }}>{ props.children }</div>
使用props.children渲染子路由
vue-router
{ path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile }, { path: 'posts', component: UserPosts } ] } <div id="app"> <router-view></router-view> </div>
使用vue原生組件/<router-view/>組件渲染子路由
umi
<NavLink exact to="/profile" activeClassName="selected">Profile</NavLink> history.push(`/list?id=${id}`)
vue
<router-link to="/about">About</router-link> this.$router.push({path: '/list', query: {id}})
Umi
vue-router
全局路由守衛(wèi)
全局前置守衛(wèi):router.beforeEach
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
全局后置守衛(wèi):router.beforeEach
router.afterEach((to, from) => { // ... })
多個視圖依賴于同一狀態(tài)或來自不同視圖的行為需要變更同一狀態(tài);才需要使用狀態(tài)管理機(jī)。
dva | vuex | 說明 | |
---|---|---|---|
模塊 | namespace | modules | 解決應(yīng)用的所有狀態(tài)會集中到一個比較大的對象,store對象可能變得相當(dāng)臃腫 |
單一狀態(tài)樹 | state | state | 唯一數(shù)據(jù)源 |
提交狀態(tài)機(jī) | reducer | mutations | 用于處理同步操作,唯一可以修改 state 的地方 |
處理異步操作 | effects | action | 調(diào)用提交狀態(tài)機(jī)更改狀態(tài)樹 |
dva: model connect UI
// new model:models/products.js export default { namespace: 'products', state: [], reducers: { 'delete'(state, { payload: id }) { return state.filter(item => item.id !== id); }, }, }; //connect model export default connect(({ products }) => ({ products, }))(Products); //dispatch model reduce dispatch model reduce({ type: 'products/delete', payload: id, })
如有異步操作,如ajax請求,dispath model effects,然后effects調(diào)用model reduce
vuex
// new module const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) //bind UI <input v-model="$store.state[modelesName].name"/> //commit module mutation store.commit('increment')
如有異步操作,如ajax請求,dispath module actions,然后actions調(diào)用module mutations
store.dispatch({ type: 'incrementAsync', amount: 10 })
感謝各位的閱讀,以上就是“vue轉(zhuǎn)react入門知識點(diǎn)有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue轉(zhuǎn)react入門知識點(diǎn)有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。