你真的弄懂 React 了嗎？（一）

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

說一說你對 React 的理解？

1、是什麼

React，用於構建用戶界面的 JavaScript 庫，只提供了 UI 層面的解決方案

遵循組件設計模式、聲明式編程範式和函數式編程概念，以使前端應用程序更高效

使用虛擬DOM來有效地操做DOM，遵循從高階組件到低階組件的單向數據流

幫助咱們將界面成了各個獨立的小塊，每個塊就是組件，這些組件之間能夠組合、嵌套，構成總體頁面

react 類組件使用一個名爲 render() 的方法或者函數組件return，接收輸入的數據並返回須要展現的內容

class HelloMessage extends React.Component {
  render() {
    return (
      <div> Hello {this.props.name} </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);
複製代碼

上述這種相似 XML形式就是JSX，最終會被babel編譯爲合法的JS語句調用

被傳入的數據可在組件中經過 this.props 在 render() 訪問

2、特性

React特性有不少，如：

• JSX語法
• 單向數據綁定
• 虛擬DOM
• 聲明式編程
• Component

着重介紹下聲明式編程及Component

聲明式編程

聲明式編程是一種編程範式，它關注的是你要作什麼，而不是如何作

它表達邏輯而不顯式地定義步驟。這意味着咱們須要根據邏輯的計算來聲明要顯示的組件

如實現一個標記的地圖：

經過命令式建立地圖、建立標記、以及在地圖上添加的標記的步驟以下：

// 建立地圖
const map = new Map.map(document.getElementById('map'), {
    zoom: 4,
    center: {lat,lng}
});

// 建立標記
const marker = new Map.marker({
    position: {lat, lng},
    title: 'Hello Marker'
});

// 地圖上添加標記
marker.setMap(map);
複製代碼

而用React實現上述功能則以下：

<Map zoom={4} center={lat, lng}>
    <Marker position={lat, lng} title={'Hello Marker'}/>
</Map>
複製代碼

聲明式編程方式使得React組件很容易使用，最終的代碼簡單易於維護

Component

在React 中，一切皆爲組件。一般將應用程序的整個邏輯分解爲小的單個部分。 咱們將每一個單獨的部分稱爲組件

組件能夠是一個函數或者是一個類，接受數據輸入，處理它並返回在UI中呈現的React元素

函數式組件以下：

const Header = () => {
    return(
        <Jumbotron style={{backgroundColor:'orange'}}> <h1>TODO App</h1> </Jumbotron>
    )
}
複製代碼

類組件（有狀態組件）以下：

class Dashboard extends React.Component {
    constructor(props){
        super(props);

        this.state = {

        }
    }
    render() {
        return (
            <div className="dashboard"> <ToDoForm /> <ToDolist /> </div>
        );
    }
}
複製代碼

一個組件該有的特色以下：

• 可組合：個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部
• 可重用：每一個組件都是具備獨立功能的，它能夠被使用在多個UI場景
• 可維護：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護

3、優點

經過上面的初步瞭解，能夠感覺到React存在的優點：

• 高效靈活
• 聲明式的設計，簡單使用
• 組件式開發，提升代碼複用率
• 單向響應的數據流會比雙向綁定的更安全，速度更快

參考文章：

• web前端面試 - 面試官系列