作者：Sunshine_Lin
簡介：「前端之神」的號主江湖人稱林三心，現已有100+篇原創文章，全網粉絲高達1w+，面試過超過100+個前端程式設計師，全網獲贊2w+，全網閱讀量播放量超過60w，更是B站「面試進階成為大佬」系列影片的Up主。喜歡分享Vue，React，Typescript等高階前端知識。
前言
大家好，我是林三心，因為工作專案的需要，在上個月，我開始在專案中使用
React
去開發，到了今天，差不多一個月了，想跟大家分享一下我在
React
中是怎麼去實現以前
Vue
中的一些功能的。
由於本菜鳥使用React不久，有不妥之處還請大家指出
註明：本文中所指 Vue 的版本是
Vue2
， React 的版本是
React17
1、JSX和template
在Vue2中是使用 template 的，這點使用 Vue 的同學們都知道，而在 React 中使用的是 JSX ， JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件。
它有以下優點：
JSX 執行更快，因為它在編譯為 JavaScript 程式碼後進行了最佳化。
它是型別安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。
JSX 的例子：使用ReactDOM。render函式，將DOM渲染到對應到id為app的節點下
2、React 中給元素設定 style
React 使用內聯樣式。我們可以使用
駝峰法
語法來設定內聯樣式。 React 會在指定元素數字後自動新增
px
。以下例項演示了為
h1
元素新增
myStyle
內聯樣式：
3、React 中給元素設定 class
由於 JSX 就是 JavaScript，一些識別符號像 class 不建議作為 XML 屬性名。作為替代，使用 className 來做對應的屬性。
4、React 中的點選事件
在 Vue 中的點選事件使用的是 @click 來觸發的，而在 JSX 中使用的是 onClick
5、React 中修改值觸發DOM更新
我使用的是 React hook 其中的 useState ，這一個hook在修改常量的時候比較簡單，但是在修改引用 物件 或者 陣列 的時候就需要先進行 淺複製 再進行覆蓋修改
6、生命週期
使用React的hook—— useEffect
第二個引數不傳
當 useEffect 第二個引數不傳時， 頁面初始 和 資料更新 的時候，第一個引數函式都會執行，所以此時初始頁面時會輸出一次 哈哈哈哈 ，然後無論你點修改num或者修改count的按鈕時，也都會輸出 哈哈哈哈
第二個引數傳空陣列
當 useEffect 第二個引數傳 ［］ 時，那麼第一個引數函式只有在 頁面初始 的時候才會執行，也就是隻執行一次，無論你點修改num或者修改count的按鈕，都不會執行這個函式
第二個引數傳非空陣列
當useEffect第二個引數傳非空陣列時， 頁面初始 和 依賴的資料發生更新 的時候，第一個引數函式都會執行。比如上方例子：
①、只有按修改num按鈕時，才會再次輸出 哈哈哈哈
②、只有按修改count按鈕時，才會再次輸出 哈哈哈哈
③、無論按哪個按鈕都會再次輸出 哈哈哈哈
return清除操作
React 會在元件解除安裝的時候執行清除操作。effect 在每次渲染的時候都會執行。React 會在執行當前 effect 之前對上一個 effect 進行清除。
是在還不理解的同學，可以瘋狂點選按鈕，看看 我是定時器 這句話會輸出多遍還是隻輸出一遍，就恍然大悟了
7、React 中實現 v-if & v-else
Vue 中的 v-if & v-else
v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染。
也可以用v-else新增一個“else 塊”：
React中實現
如果單單隻想實現 v-if 的話，可以藉助 && 邏輯運算子
如果想實現 v-if 和 v-else 的話，可以藉助 三元運算子
8、React 中實現 v-show
Vue 中的 v-show
另一個用於根據條件展示元素的選項是v-show指令。用法大致一樣：
不同的是帶有v-show的元素始終會被渲染並保留在 DOM 中。v-show只是簡單地切換元素的 CSS propertydisplay。
React中實現
其實就是改變元素的 display 這個樣式來實現效果
9、React 中實現 v-for
我們可以用v-for指令基於一個數組來渲染一個列表。v-for指令需要使用item in items形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。
Vue 中的 v-for
React中實現
JSX 允許在模板中插入陣列，陣列會自動展開所有成員：
但是我大多數情況會使用陣列的 map 方法來協助渲染
10、React 中實現 computed
Vue 中的 computed
只要 name 或者 food 改變， mag 會更新成相應的值
React中實現
在 React 中需要透過 useMemo 這個 hook 來來實現 computed 的效果
11、React 中實現 watch
使用
