細說React(一)

時間 2019-12-10

標籤細說 react 欄目 React 简体版

原文原文鏈接

React 是近期很是熱門的一個前端開發框架。這篇文章將介紹如何使用 React 來建立用戶界面，但願可以起到拋磚引玉的效果。html

"React, A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"前端

正如官網的介紹，一個框架，Just the UI。React的API相對於龐大Angular來講比較簡單，可是精簡的 API 不是意味着沒有必定的學習成本，咱們仍是須要對此框架進行必定的理解。閒話很少說，讓咱們進入正題。首先，讓咱們來了解下 React 中使用到的一些術語。react

React 術語

React Elementsgit

表明 HTML 元素的 JavaScript 對象。這些 JavaScript 對象最後被編譯成對應的 HTML 元素。github
Components算法

封裝 React Elements，包含一個或者多個 React Elements。 Components 用於建立能夠複用的 UI 模塊，例如分頁，側欄導航等。瀏覽器
JSXbabel

JSX 是 React 定義的一種 JavaScript 語法擴展，相似於 XML 。 JSX 是可選的，咱們徹底可使用 JavaScript 來編寫 React 應用，不過 JSX 提供了一套更爲簡便的方式來寫 React 應用。app
Virtual DOM框架

Virtual DOM 是一個模擬 DOM 樹的 JavaScript 對象。 React 使用 Virtual DOM 來渲染 UI，同時監聽 Virtual DOM 上數據的變化並自動遷移這些變化到 UI 上。
DOM Diff

React中最神奇的部分莫過於虛擬DOM，以及其高效的Diff算法。這讓咱們能夠無需擔憂性能問題而」毫無顧忌」的隨時「刷新」整個頁面，由虛擬DOM來確保只對界面上真正變化的部分進行實際的DOM操做。

DEMO 環境準備

首先，在 React Download 頁面下載 Starter Kit，解壓到某個地方。

進入到解壓後的 build 目錄，新建一個 index.html 文件，而且引用 react.js , react-dom.js(0.14版本以前react和react-dom沒有分家，0.14以後將二者分開，react－dom只提供了一個渲染的方法)和 JSXTransformer.js(官方現不建議使用JSXTransformer.js，建議使用babel，配合ES6,寫起來很是爽) 後就能夠開始編寫 React 應用了。須要注意若是使用 JSX，那麼 script 標籤的 type 應該更改成 text/jsx。

<html>
  <head>
    <meta charset="utf-8" >
    <title>demo</title>
  </head>
  <body>
    <script src="react.js"></script>
　　 <script src="react-dom.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx" src="app.js"></script>
  </body>
</html>

第一個 React Element

建立一個 Element 只需調用 React.createElement 方法，並傳入元素信息便可。例如：

var div = React.createElement('div', null, "Hello React");
 // 使用 JSX
var div = <div>Hello React</div>

建立以後就能夠調用 React.render 方法渲染到頁面上：

ReactDOM.render(div, document.body);

第一個 React Component

React Component 抽象出相同 UI 組件的結構和邏輯。經過調用 React.createClass 方法來建立一個 Component，並傳入一個帶有 render 方法的對象類型的參數。

var HelloMessage = React.createClass({ render: function () { return <div>Hello {this.props.name}</div>;
 } }); ReactDOM.render(<HelloMessage name="iissnan" />, document.body);

咱們看到 React.createClass 接收了一個對象，並將這個方法返回賦值給 HelloMessage，最後調用 ReactDOM.render 方法將這個新建的 Component 渲染到頁面上。從這個例子看來，一個 Component 與 Element 並沒有太大的差異。事實上， Component 已經準備好了，咱們能夠增添一些結構和功能來擴展這個 Component 。

Props

在上一個例子中，能夠看到有一個特殊的引用： this.props.name。這個引用稱之爲 Props，能夠將他想象成 Component 的設置選項。

在使用上， Props 相似於 HTML 中的屬性：

ReactDom.render(<HelloMessage name="foo" />, document.body);

在 Component 內部，經過 this.props.name 來引用這個 Props：

var HelloMessage = React.createClass({ render: function () { return <div>Hello {this.props.name}</div>;
 } });

須要注意的是， Props 僅用來定製 Component，這些數據不該該被改動。若是涉及到須要作改動的數據，得考慮使用state。

Stateful Component

State 數據表明 Component 的狀態，用於維護 Component 內部的狀態。當 State 發生改變以後， React 將會從新渲染 UI 。調用與 Props 相似， State 數據經過 this.state 訪問：

var Greeting = React.createClass({ getInitialState: function () { return { greeted: false }; }, greet: function () { this.setState({ greeted: true }); }, render: function () { var response = this.state.greeted ? 'Hi' : ''; return ( <div>
        　　<div>Hello {this.props.name}</div>
        　　<span>{response}</span>
        　　<button onClick={this.greet}>Hi</button>
      　　</div>
 ); } }); ReactDOM.render(<Greeting name="foo" />, document.body);

這個例子中加了幾個函數，咱們一一來看下。首先是 getInitialState ，這個方法在 Component 初始化的時候被調用，返回 Component 初始時的狀態數據。例子中，咱們設置了 Component 初始時的 greeted 爲 false。
而後是 greet 方法，這個方法被調用以後將修改狀態數據 greeted 爲 true。

當 State 發生改變後， React 將 Component 渲染到 Virtual DOM，新的 Virtual DOM 與舊版本的進行比對，檢查出改變的部分並更新瀏覽器的 DOM。在這個例子中，當按鈕被點擊後， greeted狀態數據發生了變化，UI 跟隨着更新。

組合

結合 Props 和 State，咱們就可使用 Component 來建立完整的應用。

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';

    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});

var users = ["foo", "bar", "baz"];

var GreetingApp = React.createClass({
  render: function () {
    var greetings = this.props.users.map(function (user) {
      return <Greeting name={user} />;
    });

    return <div>{greetings}</div>;
  }
});

ReactDOM.render(<GreetingApp users={users} />, document.body);

最後

打個小廣告，github上提供demo演示，項目地址--react學習，歡迎star！但願能對你有所幫助！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。