之前我總結了部分react 基礎 根據官網的內容 以及Taro 框架的內容
今天我試著開始寫了一下頁面和開發 說一下我的感受 我之前寫的是vue3 今天是第一次真正根據需求做頁面開發 和邏輯功能 代碼的書寫
主體就是開發了這個頁面?
雖說這個頁面 很簡單 但是如果你要是第一次寫 難說
1.定義變量?
看這一段代碼?
我想在想設置一個變量 需要接收一下我計算的高度 就需要使用到 useState 這個 狀態管理?
突然去寫這個代碼 你會很不習慣 的 因為之前 用的就是ref reactive 直接就定義了 直接就使用了 而這個不太一樣?
2. 頁面渲染執行代碼
當我們想進入這個組件或者頁面的時候 就執行某一個函數的時候 我們就需要使用生命周期或者監聽函數 在vue 中我們之前使用的是onMounted 生命周期?
但是在react 中我們使用的是
?userEffect 鉤子函數?
我們暫且就把他當我 onMounted 來看待
3. 組件的創建
雖然vue 和react 在渲染機制和 模式上不同 但是我們開發者不用去糾結這個問題 我們只需要 使用語法和邏輯去完成功能就行了
當然創建組件的文件或者 文件的都是差不多的 index.jsx 文件和 index.scss 文件
4. 父組件和子組件之間的數據交換
在 vue 中 我們使用 props 父向子組件中傳遞數據 emit 自定義函數 子組件向父組件傳遞組件?
但是在react 中其實大差不差 也是props 也是自定義函數
我們看個例子
?
這個是我的頁面 首頁
我們可以看到用到了Header 組件 filter 組件
?我們拿Filter 組件來說 這個問題?
我們傳遞了一個數組 給他 看一下Filter 組件是怎么接收的?
我們寫的是函數式組件 在參數中 有tab s? 以及 onTabChange 方法 都是父組件 傳遞過來的 所以我感覺react? 讓我更加理解了 父子組件之間的傳值 其實和vue 是一樣的 有可能寫法不太一樣
所以大差不差
也是有一個自定義事件 能把改變的數據 告訴父組件 父組件根據 狀態 做相應的邏輯處理
目前寫的其實就這些 對于我真正開始書寫react 代碼 其實還是不容易的 因為 太繚繞了 畢竟寫了很長時間 的vue 代碼 跟這個代碼完全不一樣 所以得多多練習
最大的感受 不是難? 是感覺比vue 麻煩
)
