前言

大家好呀，我是一名專注于Vue的前端萌新。 國慶后如約和大家見面了。經(jīng)歷了金九銀十和十一長假后的我也要開始努力寫文章了，這次主要是分享下我是如何快速橫切到React技術(shù)棧。如果看文章的你正在學習React或者說也是轉(zhuǎn)換技術(shù)棧，那么本文一定能夠給你有一些啟發(fā)和幫助。

如果覺得不錯的話，小手輕點下贊哦，有好的想法和問題可以在評論區(qū)中留言。作為摸魚小能手，我每天都會刷掘金的哦。

為什么換React

為什么換React呢，是因為新公司是屬于React技術(shù)棧。包括Taro，Umi等一系列的解決方案。雖然在技術(shù)棧方向上進行了更換，但對于需要隨時適應新技術(shù)棧且保持學習的小王同學來說，上手難度一般，熟練使用Vue的同時對于一些組件化和工程化項目都是有著自己的理解的。因此在學習了兩三天后就對于簡單的模塊上收起來還是非常簡單的。因此，在這個9月，我成為了一名Reacter。但同時，我依舊也是積極的在學習Vue3，做一名雙開的前端看起來并不是一件非常困難的事情。Vue 和 React的區(qū)別

本質(zhì)上的區(qū)別

誠然，都是組件化的解決方案，但其實Vue 和 React區(qū)別還是比較巨大的。同時，這也是一道非常廣義的面試題。因此，在這里和大家說一個重點，別在弄錯了，在弄錯出去面壁思過：

我，React，我只是一個構(gòu)建頁面的library，不是一個framework，不要在把我和隔離那個流氓進行扒底褲的分析對比了，你以為我在大氣層，其實我在臭氧層。

數(shù)據(jù)渲染的區(qū)別

在數(shù)據(jù)渲染的方式上，

Vue采用的是響應式數(shù)據(jù)渲染，你修改了響應式數(shù)據(jù)對應的視圖也進行渲染，相當于更新通知時Vue幫你做了，開發(fā)者只需要關(guān)注數(shù)據(jù)的修改。

React則是setState手動更新數(shù)據(jù)，通過setState更新state的值來達到重新render視圖的效果，開發(fā)者只需要關(guān)注什么時候進行state的更改和重新render。

API上的區(qū)別

在我使用React以來，一直覺得Vue的template在處理上更加優(yōu)雅于React的jsx，并不是語法上的優(yōu)于，而是從數(shù)據(jù)代理的根本上，在Class Component中在render中會存在大量porps, state的解構(gòu)算是一個痛點，畢竟如果每次都需要把this寫上整個代碼塊就變得非常的亂了，因此Vue對template則不需要通過this.data.xxx來渲染options api等內(nèi)容。

其次就是我一直覺得Vue的生命周期是比較好理解的，而React的生命周期確是有點混亂，在新的版本當中更是廢棄和取代了一些鉤子，這就導致了技術(shù)差異性，很多文章可能還停留在以前的一個API版本。

不過在Vue和React新的API都是進化為Hooks的模式了，所以這些問題也就顯得不怎么重要了，在2020年，如果你還在學習前端，Hook思想是必備的學習之路之一。

腳手架開始

年輕人的第一款腳手架為何只能是create-react-app？眾所周知，官方的腳手架非常的難用，不僅配置起來麻煩，一些plugin都需要自己去集成，可謂是新手勸退第一步，我不學了，我要用VueCli。所以，如果是Vue開發(fā)者剛接手React，我推薦umi，作為React的重要開源團隊，螞蟻團隊給React貢獻了非常多的開源工具，如ant design, dva, umi等大大方便了開發(fā)的整合。從現(xiàn)有角度來說，一般公司腳手架都不需要自己操心的，畢竟架構(gòu)組可能需要刷一波KPI了，因此現(xiàn)在的任務(wù)就是學習好React本身，而不是在腳手架直接跪了。

路由，第一步

既然使用了umi，那么就又回到了那個vueCli的年代了，簡簡單單一個demo，讓你找回熟悉的感覺：

export default {routes: [{ path: '/login', component: 'login' },{path: '/',component: '@/layouts/index',routes: [{ path: '/list', component: 'list' },{ path: '/admin', component: 'admin' },],}, ], }

有沒有很熟系，沒錯和vue-router熟悉的味道，一模一樣。除了children換成了routes之外，基本就是react-router的配置了。那么我想要路由守衛(wèi)的鉤子，有沒有？

• umi: 老子一早就知道你們這些逼想的是什么了。

沒錯，umi還真提供了類似守衛(wèi)的路由監(jiān)聽功能，在app.js中就約定了一個方法叫做onRouteChange，作用就是當路由切換的時候會觸發(fā)的一個鉤子函數(shù)，是不是熟悉的配方，熟悉的味道。

// 修改標題 export function onRouteChange({ matchedRoutes }) {if (matchedRoutes.length) {document.title = matchedRoutes[matchedRoutes.length - 1].route.title || '';} }

同樣的，對于路由表來說，很多時候都需要做權(quán)限過濾，篩選出符合身份的路由，Vue有addRoutes，敢問足下何解啊？

• umi: 我也有，萬花筒寫輪眼。

可以看到，通過patchRoutes對routes進行表操作，也是可以達到addRoutes的相同效果。

export function patchRoutes({ routes }) {routes.unshift({path: '/test',exact: true,component: xxxxx,}); }

當具備這些條件后，我立馬就是將Vue的一個路由權(quán)限校驗的demo拉進來了，我發(fā)現(xiàn)，竟然可以無痛的進行替換，只是書寫的地方不一樣，但是代碼改動大差不差，瞬間學習動力+1000有沒有。

狀態(tài)管理

先有Redux后有天，一手Dva賽神仙。狀態(tài)管理一直是React頭痛的一個問題，因為有太多的解決方法，如redux全家桶,Mobx等等現(xiàn)今大量使用的依賴庫，無疑學習成本很大，也是螞蟻大佬開源的dva整合大大減少了開發(fā)者的配置壓力，而不需要進行redux和saga的一些配置和結(jié)構(gòu)分層。且使用成本上來說，如果你使用過vuex，基本算是一個無縫對接的狀態(tài)。
通過下面的一個Dva Model可以看出，是不是非常像一個Vuex的Modules。對于使用Vuex熟練的我來說，上手Dva真的只是一杯咖啡和一個下午茶的時間。

export default {// 同樣的命名空間namespace: 'todo',state: {// 類似Vuex Statelist: []},reducers: {// 類似Vuex Mutationssave(state, { payload: { list } }) {return { ...state, list }}},effects: {*queryUserInfo({ payload: value }, { call, put, select }) {// 對比Vuex Actions}},subscriptions: {setup({ dispatch, history }) {// 監(jiān)聽路由的變化，請求頁面數(shù)據(jù)}} }

高階組件？

在React中，有一個非常有意思的東西，被稱之為HOC,可以將其理解為一個嵌套層，在Vue中我們對于邏輯復用我們可以用Mixin配合vue組件來進行一些封裝，來確保一個組件組件的多態(tài)，同樣的在React中也可以通過HOC來進行一個邏輯的多態(tài)重載，很多時候我們只需要將對應的render組件傳入。通過一個中間層的交換來實現(xiàn)的。那么我們就可以把HOC理解為一個閉包。通過將組件傳入后返回包裝好參數(shù)的組件，從而只需要去關(guān)注傳入組件后，在內(nèi)部對數(shù)據(jù)進行處理后在給與傳入的組件。想深入HOC還是需要多實踐，多學習，了解函數(shù)式編程的思想

const ComponentWith = listComponent => listComponent

插槽

在Vue中我們可以通過slot傳遞組件模板給組件，然后渲染。而React的話顯然是沒有插槽的概念，但其實你在組件內(nèi)部中不論是寫的JSX DOM 都會被傳入到Props的children當中去，那么怎么渲染應該不用我說了吧。這就是一個類似于Vue的普通插槽的實現(xiàn)了。
但是往往我們可能會因為不同的插槽，做不同的事情，比如我有一個footer插槽用來改變模態(tài)框底部的內(nèi)容，header用來改變頂部的內(nèi)容。那么我們可以通過傳入一個對象的形式進行具名插槽的一個場景模擬。同樣的也會將其傳遞到一個Props當中去。是不是感覺非常有意思呢。

<Model> {{header: <div>header slot</div>,footer: <div>footer slot</div> }} </Model>

CSS解決方案

這個是我最頭痛的一見事情了，原諒帥氣的我吃不慣cssModule這碗軟飯， 如果你寫過了Vue，那么都知道在區(qū)分組件樣式的時候你可以在style標簽上聲明一個scoped來作為組件樣式隔離標注。最后打包時其實樣式都加入一個hash的唯一值，但是，當我寫React的時候卻沒有類似于這種方式的解決方案。大部分情況下還是使用的cssModule方案來進行的。雖然看上去是達到了樣式隔離，但是編程體驗相當不好，失去了原本CSS預編譯的優(yōu)勢。

<style lang="sass" scoped> </style>

后面也是使用了現(xiàn)在比較火熱的css in js的方案，styled-components是一個非常優(yōu)質(zhì)的方案，相對于CSSModule我還是更加喜歡它，能夠?qū)Ｗ⒂趯憳邮酱a。在很多的時候，我們不需要要過多的去組件進行隔離化。

styled-components也可以支持嵌套繼承等高級特性，但需要注意的是，內(nèi)部嵌套的class， 并不會轉(zhuǎn)成隨機的類名，因此還是會有上下文沖突的形式存在。

在這里也列舉一些常見的方案：

• Bem CssName
• Style Component
• CssModule
• Css in js

import React from 'react'; import Styled from 'styled-components'export default () => {const Wrapper = Styled.div`& >.title { color: red;.model: {}}`const WrapperDIV2 = Styled.div`.title {.model: {}}`return (<Wrapper>Red Text Wrapper....<p className="title">1111</p><WrapperDIV2><p className="title">222</p></WrapperDIV2></Wrapper>); }web的前端：一篇總結(jié)得超全的前端進階文章！入門、技巧、方法、書籍、網(wǎng)站...?zhuanlan.zhihu.com

后話

2020年，也算是成為了一個雙開的前端切圖仔了，隨著業(yè)務(wù)開發(fā)的時間占比量增加，可能在于某些方面來說需要多加強學習，在JavaScript規(guī)范愈演愈烈的情況下，2020年沒有過去2021年的feature實驗特性就已經(jīng)出來了，所以對于新知識的了解依舊不能松懈，基礎(chǔ)知識是所有項目開發(fā)中的基石，所以我的年末也算是我今年定的最后一個計劃，深入基礎(chǔ)，不得不說紅寶書對我而言提升還是比較大的，在這里希望大家能夠成為更好的工程師。

如果文章對你有幫助，不妨點個贊吧。歡迎各位在評論區(qū)一起交流哦。

作者：wangly19
鏈接：https://juejin.im/post/6882198352549642254
來源：掘金

總結(jié)

以上是生活随笔為你收集整理的react 动态路 嵌套动子路由_2020年，我是如何从一名Vueer转岗到React阵营的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。