React開發日記-react的服務端渲染框架Next.js 的開發體驗

背景

做爲一個react初學者，本文主要分享一下在一個開發者的角度 從vuejs轉到reactjs+nextjs的差異

目錄

vue和react區別
csr和ssr區別
next.js項目開發使用的特性
next.js遇到的問題
next.js開發友好的點
複製代碼

vue和react區別

1 生命週期不一樣

基本的created mounted destroy update 等生命週期二者都有
可是觸發時機和使用方法有所不一樣，使用時須要注意
舉個🌰
    X同窗實現了一個組件modal須要知道本身被關閉和打開的時機，修改css,實現防止頁面滾動的狀況。
    X同窗使用componentWillUpdate 判斷組件的active prop 修改的時機
    然鵝，因此不管是active發生了修改，仍是父組件的其餘prop/state發生了更新，都會觸發modal的componentWillUpdate
複製代碼

parent.tsx
    👇
  constructor(props) {
    super(props)
    this.state = {
      test:1
    }
    setInterval(() => {
      this.setState({
        test:Math.random()
      })
    }, 3000)
  }
  public componentWillUpdate(prop,state){
    console.log('page triggered update')
  }
  
  component.tsx
  👇
   public componentWillUpdate(prop,state){
    console.log('modal triggered update')
  }
複製代碼

我在parent.tsx 定時修改了某個state，此state與component無關
    然鵝，子組件也一塊兒觸發了update
複製代碼

上圖 👏：

在一樣的狀況下 vue項目是不會的

顯然這是不合理的。
    而在vue中，若是咱們分別在父子組件使用update鉤子，父組件的update觸發不會同時觸發子組件的update
複製代碼

2 react 對 typescript的支持更友好

緣由實際上是 typescript對react進行了支持
  
  2.1
    vue的ts須要分別引用 vue-class-component vue-property-decorator vuex-class 來支持組件聲明 組件 vue api ,vuex 等功能。
    
    react相對簡單。
    
  2.2 
    vue 開發過程當中 須要使用 vue-property-decorator 等第三方模塊規定的語法,因此加上以後，還得習慣新語法。而且在調用window等全局對象或者其餘module的時候須要先在typing下聲明一次。
複製代碼

react 只需

npx create-react-app my-app --typescript
複製代碼

而且調用一些對象 的時候，因爲有內置的類型，不須要咱們手動作
複製代碼

👏 3 react沒有vue的各類指令

用慣了vue的各類指令，切換到react的時候，會不習慣沒有各類指令。
但後面發現能夠用mobx的Reactive，react hook的USEEffect解決  實現v-model,watch 的相似功能。
複製代碼

4 組件通訊方式

vue 能夠直接在子組件上監聽事件，$refs調用子組件的方法，:variable.sync 的方式實現屬性的同步。

    react 是單向數據流
複製代碼

通常狀況下
    父組件把handlechange的方式傳給子組件，子組件在propchange的時候執行對應的方法。若是是須要父子組件共享的數據，可能須要考慮使用狀態提高/mobx作數據狀態管理

    狀態提高：
    https://www.reactjscn.com/docs/lifting-state-up.html
複製代碼

5 聲明模板的方式

vue 使用拓展的html語法

react jsx方式， 可使用全部js語法特性,較爲靈活
複製代碼

csr和ssr

1
    之前調試csr項目的時候，習慣在控制檯debugger或者查看network的請求
    而ssr項目的首屏資源是在服務器完成請求和組裝的，
    因此只能在服務端的控制檯查看輸出
2 
    當咱們項目須要作狀態管理
    例如 vuex redux mobx等
    在ssr開發時要注意客戶端和服務端的store數據同步問題
    csr不須要考慮這個問題，由於全部的邏輯都在客戶端執行
3
    在服務器端的環境不一樣於瀏覽器，沒有window,document等對象
    沒注意的話可能致使報錯
複製代碼

next.js遇到的問題

1 從page/index 跳轉到 page/b 的時候，會出現頁面樣式錯亂的問題 緣由是瀏覽器加載的style.chunk.css中的樣式不存在page/b的樣式 而構建出來的css 已經有page/b的樣式了 目前在本地環境會出現這個問題 但生產環境沒有 官方還未提供解決方案

3

因爲next中是使用className設置樣式
而且在構建後生成 .class__hash的形式
因此當咱們試圖在其餘模塊設置引用的模塊的樣式的時
會出現hash 對不上，樣式不生效的問題
複製代碼

a.tsx ---組件a
.footerwrapper{XXX}
pageb.tsx --引用了a
.footerwrapper{XXX}
複製代碼

最後的dom結構和css文件是這樣的
複製代碼

後者的樣式沒法生效 這時我就遇到一個問題，我不能在特殊狀況下修改組件的樣式 但其實咱們也不該該修改組件的樣式，而是讓組件通用。 4 項目結構固定，可是熟悉react和vue開發的同窗仍是能很快習慣的 官方： next.js enforces a_structure_so that we can do more advanced things like:

*   Server side rendering
*   Automatic code splitting
複製代碼

next.js用到的特性

1 bucket問題

因爲頁面可能須要在不一樣國家訪問
    而咱們根據不一樣的地區訪問的服務器不一樣致使接口地址是不一樣的
    所以咱們使用bucket作區分
    經過url上面的contry或者buckte參數,存儲到globalstore對象中，而後map.get對應的s_bucket，
    拼接好對應的接口地址。
    這裏一樣涉及到了store數據同步的問題。每一個頁面實例咱們會維護一個單獨的store對象，防止數據污染。
複製代碼

2 使用mobx作reactive

全局狀態 咱們放在mobx進行管理。
    
    經過@action修改到@observable變量的時候 mobx會幫咱們更新視圖
    
    便於管理
複製代碼

3 多語言

使用 react-intl 將local和 對應地區的messages注入到app中
    
    這樣app下面的component都能都過 const { messages } = this.props.intl
    
    拿到須要的多語言文案
複製代碼

next.js開發友好的點

1 
    對於熟悉react 而且想使用ssr的團隊 nextjs的生態完善,文檔齊全,遇到問題容易搜到，或者能及時在github上得到回覆。
    
2
     對ts支持友好，
     react 和 next 擁有各類內置類型，
     咱們聲明組件或者頁面的時候
     不須要咱們手動聲明類型
複製代碼

3 開箱即用,執行兩行命令就能夠愉快的開始開發了

npx create-next-app
npm install --save next react react-dom
複製代碼

支持使用now一鍵部署（不須要自定義服務器的狀況下）
複製代碼

總結

熟悉react開發的同窗 基本是能夠順利上手nextjs的 學習成本不高
歡迎補充 指正
複製代碼

參考文章

juejin.im/post/5b8b56…