從 Vue 的視角學 React（二）—— 基本語法

基於 Vue.js 開發的時候，每一個 vue 文件都是一個單獨的組件，能夠包含 HTML，JS，CSS

而 React 是以函數爲基礎，每一個 function 就是一個組件。雖然 JSX 讓 HTML 的寫法更加友好，但 CSS 仍是須要另外引入

Vue 還給開發者提供了不少指令，而 React 中並無，因此這片文章會介紹二者之間的經常使用語法差別

 

 

1、私有化 CSS

在 vue 文件中，能夠直接經過 <style> 標籤來寫 CSS 樣式

若是但願這些 CSS 僅對當前的 vue 文件生效，只須要在 <style> 標籤中添加 scoped 屬性

因爲 React 是以 JSX 語法來編寫代碼，能夠寫行內樣式，但不能添加 <style> 標籤，因此一般是單獨寫一個 css 文件，而後直接在 JSX 中引入

// 須要提早安裝 css-loader

 

但這種直接引入的 CSS 是全局生效的，若是隻是針對當前組件的 CSS，能夠經過 CSS Modules 來實現

將 CSS 文件重命名，添加一個 module 中間名，而且做爲一個對象引入

而後以變量的形式添加 className。若是繼續用以前字符串的形式引入，樣式並不會生效

須要注意的是，因爲 className 是以變量屬性的方式引入，不支持短線鏈接，建議改成駝峯命名

這樣一來，CSS 通過編譯以後，每個類都會生成一個哈希值，使這個類全局惟一，從而實現樣式私有化

 

 

2、雙向綁定

Vue 的特性之一就是雙向綁定，而 React 是單向數據流，直接修改屬性沒法即時渲染到頁面

須要在構造函數裏面添加 state 狀態

這裏的 super() 是 ES6 提供的關鍵字，用於調用父類中的構造函數

React 中每個須要用到 props 和 state 的組件都須要 super(props)

以便 React.Component 的構造函數能夠初始化 this.props

若是須要修改 state 中的屬性，須要使用 setState() 

 

 

3、循環渲染

開發的時候常常會有基於數組渲染列表的需求，Vue 提供了 v-for 指令，而 JSX 中就須要藉助數組的 map 函數

假設在 state 中定義了這麼一個數組：

若是須要基於這個數組渲染一個列表，能夠在 render() 函數中定義一個對象，用於循環渲染數組，最後將這個對象放到合適的位置

這裏更好的作法是在 render() 以外建立一個函數，封裝具體的遍歷邏輯，而後返回一段 JSX

須要注意的是，和 Vue 的 v-for 指令相似，在使用 map 函數的時候，也須要給 DOM 節點添加一個 key

 

 

4、條件渲染

經過上面的代碼能夠看出，React 沒有像 Vue 提供各類各樣的語法糖，但全部需求均可以經過 JavaScript 自己語法來實現

因此 React 並不須要 v-if 這樣的條件判斷指令，直接用 if...else... 就能實現條件渲染

若是須要根據條件隱藏組件，只要讓對應的函數返回 null 便可

 

 

5、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、事件上報、狀態提高等辦法來實現一樣的功能 

在開發項目的時候，若是能花更多的時間來思考設計方案，而不是解決某個功能點，對項目、對我的都是很是有益的

 

 

參考資料：

《React 中使用CSS》

《談談JavaScript中super(props)的重要性》