基於 Vue.js 開發的時候，每個 vue 文件都是一個單獨的組件，可以包含 HTML，JS，CSS
而 React 是以函數為基礎，每個 function 就是一個組件。雖然 JSX 讓 HTML 的寫法更加友好，但 CSS 還是需要另外引入
Vue 還給開發者提供了很多指令，而 React 中並沒有，所以這片文章會介紹兩者之間的常用語法差異
一、私有化 CSS
在 vue 文件中，可以直接通過 <style> 標簽來寫 CSS 樣式
如果希望這些 CSS 僅對當前的 vue 文件生效，只需要在 <style> 標簽中添加 scoped 屬性
由於 React 是以 JSX 語法來編寫代碼，可以寫行內樣式，但不能添加 <style> 標簽，所以通常是單獨寫一個 css 文件，然后直接在 JSX 中引入
// 需要提前安裝 css-loader
但這種直接引入的 CSS 是全局生效的，如果只是針對當前組件的 CSS，可以通過 CSS Modules 來實現
將 CSS 文件重命名，添加一個 module 中間名，並且作為一個對象引入
然后以變量的形式添加 className。如果繼續用之前字符串的形式引入，樣式並不會生效
需要注意的是，由於 className 是以變量屬性的方式引入，不支持短線連接，建議改為駝峰命名
這樣一來，CSS 經過編譯之后，每一個類都會生成一個哈希值，使這個類全局唯一，從而實現樣式私有化
二、雙向綁定
Vue 的特性之一就是雙向綁定，而 React 是單向數據流，直接修改屬性無法即時渲染到頁面
需要在構造函數里面添加 state 狀態
這里的 super() 是 ES6 提供的關鍵字，用於調用父類中的構造函數
React 中每一個需要用到 props 和 state 的組件都需要 super(props)
以便 React.Component 的構造函數可以初始化 this.props
如果需要修改 state 中的屬性，需要使用 setState()
三、循環渲染
開發的時候經常會有基於數組渲染列表的需求，Vue 提供了 v-for 指令，而 JSX 中就需要借助數組的 map 函數
假設在 state 中定義了這么一個數組：
如果需要基於這個數組渲染一個列表，可以在 render() 函數中定義一個對象，用於循環渲染數組，最后將這個對象放到合適的位置
這里更好的做法是在 render() 之外創建一個函數，封裝具體的遍歷邏輯，然后返回一段 JSX
需要注意的是，和 Vue 的 v-for 指令類似，在使用 map 函數的時候，也需要給 DOM 節點添加一個 key
四、條件渲染
通過上面的代碼可以看出，React 沒有像 Vue 提供各種各樣的語法糖，但所有需求都可以通過 JavaScript 本身語法來實現
所以 React 並不需要 v-if 這樣的條件判斷指令，直接用 if...else... 就能實現條件渲染
如果需要根據條件隱藏組件，只要讓對應的函數返回 null 即可
五、DOM 操作
主流的前端框架都在倡導數據驅動，不過在實際業務中難免會有需要操作 DOM 的時候
在 Vue 項目中，可以通過 ref 為組件添加唯一 ID，從而獲取到該組件實例，其中就包含了該組件的 DOM 對象
React 也有 ref 屬性，功能和 Vue 中的 ref 相仿，不過具體的使用有些差異
首先需要通過 React.createRef() 在構造函數中創建一個 ref 對象
然后將這個對象掛到 render() 中的 DOM 元素或 class 組件上
另外還可以通過 React.forwardRef() 來轉發 ref，通常在包裝組件、開發高階組件的時候會用到
主要用來透傳某些 props，具體的使用可以參考官方文檔
雖然 Vue 和 React 都提供了 ref，但官方並不推薦頻繁使用
項目中用到 ref 的時候，更多的是用來處理一些特殊需求，比如獲取 DOM 元素的坐標
如果需要用到 ref 來做數據處理或者頁面渲染，通常也能通過 props、state、事件上報、狀態提升等辦法來實現同樣的功能
在開發項目的時候，如果能花更多的時間來思考設計方案，而不是解決某個功能點，對項目、對個人都是非常有益的
參考資料：