鵝廠優文 | ReactJS一點通

時間 2019-11-18

標籤 reactjs 一點 1點简体版

原文原文鏈接

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~javascript

本文由鵝廠新鮮事兒發表於雲+社區專欄html

做者：盧文喆騰訊雲 UI工程師前端

導語 | 當React 剛開始紅的時候，一直以爲 JSX 的設計思想極其獨特，屬於革命性的創新，它性能出衆，代碼邏輯卻很是簡單，因此，受到不少開發者的關注和使用，認爲它多是未來 Web 開發的主流工具。java

React 最先起源於 Facebook 的一個內部項目，由於公司對現有的 JavaScript MVC 框架都不滿意，就決定本身開發一套，用來架設 Instagram 的網站。開發完成後，發現這套東西很好用，就在2013年5月開源了。react

那麼 React 優點在哪裏呢？webpack

首先：虛擬 DOM，在 DOM 樹的狀態須要發生變化時，虛擬 DOM 機制會將同一Event loop先後的 DOM樹進行對比，若是兩個 DOM 樹存在不同的地方，那麼 React 僅僅會針對這些不同的區域來進行響應的 DOM 修改，從而實現最高效的 DOM 操做和渲染。git

好比，咱們修改了 DOM 樹上一些節點或 UI 組件對應綁定的 state，React 會即刻將其標記爲「髒狀態」，在一個 Event loop 結束時，React 會計算得出 DOM 樹上須要修改的地方及其最終的狀態，並僅僅針對這些地方進行一次性的從新渲染。github

因而好處顯而易見，並不是每修改一次組件的 state，就會從新渲染一次，而是在 Event loop 結束後作一次計算，減小冗餘的 DOM 操做。另外 React 只針對須要修改的地方來作新的渲染，而非從新渲染整個 DOM 樹，天然效率很高。web

其次：組件可嵌套，並且，能夠模版化 —— 其實在 React 裏說起的「組件」，常規是一些可封裝起來、複用的 UI 模塊，能夠理解爲「帶有細粒度UI功能的部分DOM區域」。而後咱們能夠把這些組件層層嵌套起來使用，固然這樣組件間會存在依賴關係。ajax

至於模塊化，相似於 ejs 那樣能夠做爲獨立的模塊被引用到頁面上來複用，它能夠直接把 UI 組件看成腳本模塊那樣來使用，徹底能夠配合 CommonJS、AMD、CMD 等規範來 require 須要的組件模塊，並處理好它們的依賴關係。

基於上述的兩點，React 很天然的就得到一部分開發者的青睞。不過在這以前得先理清兩件事情：

\1. React 是一個純 View 層，不擅長於和動態數據打交道，所以它不一樣於，也替代不了常規的框架；

\2. React 很擅長於處理組件化的頁面，在頁面上搭組件的形式有點像搭積木同樣，所以用上React的項目需求常規爲界面組件化。

簡單點說，React組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有它建立的子組件，經過這個特性，一個複雜的UI能夠拆分紅多個簡單的 UI 組件；

（2）可重用（Reusable）：每一個組件都是具備獨立功能的，它能夠被使用在多個UI場景；

（3）可維護（Maintainable）：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

組件化一直是網頁開發的利器，許多開發者最但願可以最大程度的重複使用過去的開發的組件，避免重複造輪子。在 React 中組件就是一切，前端開發可能須要花點時間轉變思惟，尤爲過去咱們每每習慣將 HTML 、CSS 和 JavaScript 分離，如今卻要把它們都封裝在一塊兒。

如下是通常 React Component 書寫的主要兩種方式：

1.使用 ES6 的 Class

//  注意組件首字母須要大寫
class MyComponent extends React.Component {
    // render 是 Class based 元件惟一必須的方法（method）
    render() {
        return (
            <div>Hello, World!</div>
        );
    }
}

// 將 <MyComponent /> 組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

2.使用 Functional Component 寫法

// 使用 arrow function 來設計 Functional Component 讓 UI 設計更便捷，避免互相干擾（side effect）
const MyComponent = () => (
    <div>Hello, World!</div>
);

// 將 <MyComponent /> 組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

前面說到 React 有獨有的 JSX 語法，那麼到底什麼是 JSX 呢？

JSX在ECMAScript的基礎上提供了相似於XML的擴展。 JSX和HTML有點像，但也有不同的地方。例如，HTML中的class屬性在JSX中爲className。其餘不同的地方，你能夠參考FB的HTML Tags vs. React Components 這篇文章。

可是因爲瀏覽器原生並不支持JSX，所以咱們須要將其編譯爲JS，有不少方法可以完成這個任務，後面咱們會提到這些方法。此外，Babel也可以講JSX編譯爲JS。

一些參考資料：

通常而言 JSX 一般有兩種使用方式：

1.使用 browserify 或 webpack 等 CommonJS bundler 並整合 babel 預處理

2.在瀏覽器端作解析

請你們注意JSX的語法書寫方式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- 請先載入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // 代碼寫在這裏！
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

通常載入 JSX 方式有：

內嵌

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

從外部引入

總結：以上都是我對 React 簡單的瞭解，包括 React 的優點、組件化的特徵、React Component 的方法、以及 React 中爲什麼要使用 JSX，以及 JSX 基本概念和用法。在 React 裏，全部的事物都是以 Component 爲基礎，一般會將同一個 Component 相關的資源放在一塊兒，而在撰寫 React Component 時咱們常會使用 JSX 的方式來提高書寫效率。 JSX 是一種語法相似 XML 的 ECMAScript 語法擴充，能夠發揮 JavaScript 的強大能力，放棄蹩腳的模板語言。固然 JSX 並不是強制使用，你也能夠選擇不用，由於最終 JSX 的內容都會轉化成 JavaScript。

以上就是對 React 入門的部分理解。