ReactReact入門

備註

React是一個聲明性的，基於組件的JavaScript庫，用於創建用戶界面。

為了實現像React中的功能一樣的MVC框架，開發人員將其與選擇的Flux風格結合使用，例如Redux 。

版本

版	發布日期
0.3.0	2013年5月29日
0.4.0	2013年7月17日
0.5.0	2013年10月16日
0.8.0	二零一三年十二月十九日
0.9.0	2014年2月20日
0.10.0	2014年3月21日
0.11.0	2014年7月17日
0.12.0	2014年10月28日
0.13.0	2015年3月10日
0.14.0	2015年10月7日
15.0.0	2016年4月7日
15.1.0	二零一六年五月二十零日
15.2.0	2016年7月1日
15.2.1	2016年7月8日
15.3.0	2016年7月29日
15.3.1	2016年8月19日
15.3.2	2016年9月19日
15.4.0	2016年11月16日
15.4.1	2016年11月23日
15.4.2	2017年1月6日
15.5.0	2017年4月7日
15.6.0	2017年6月13日

什麼是ReactJS？

ReactJS是一個基於組件的開源前端庫，僅負責應用程序的視圖層 。它由Facebook維護。

ReactJS使用基於虛擬DOM的機制來填充HTML DOM中的數據（視圖）。虛擬DOM快速工作，因為它只更改單個DOM元素，而不是每次都重新加載完整的DOM

React應用程序由多個組件組成 ，每個組件負責輸出一小塊可重用的HTML。組件可以嵌套在其他組件中，以允許使用簡單的構建塊構建複雜的應用程序。組件還可以維護內部狀態 - 例如，TabList組件可以存儲對應於當前打開的選項卡的變量。

React允許我們使用名為JSX的特定於域的語言編寫組件。 JSX允許我們使用HTML編寫組件，同時混合使用JavaScript事件。 React將在內部將其轉換為虛擬DOM，並最終為我們輸出HTML。

反應在組件“ 做出反應 ”國家快速變化，並自動利用虛擬DOM重新呈現在HTML DOM的組件。虛擬DOM是實際DOM的內存中表示。通過在虛擬DOM內部進行大部分處理而不是直接在瀏覽器的DOM中進行處理，React可以快速行動，只添加，更新和刪除自上次渲染週期發生以來已更改的組件。

創建可重用組件的絕對基礎知識

組件和道具

由於React僅關注應用程序的視圖，因此React中的大部分開發都將是組件的創建。組件表示應用程序視圖的一部分。 “Props”只是JSX節點上使用的屬性（例如<SomeComponent someProp="some prop's value" /> ），是我們的應用程序與組件交互的主要方式。在上面的代碼片段中，在SomeComponent內部，我們可以訪問this.props ，其值將是對象{someProp: "some prop's value"} 。

將React組件視為簡單函數可能很有用 - 它們以“props”的形式獲取輸入，並將輸出生成為標記。許多簡單的組件更進一步，使自己成為“純函數”，這意味著它們不會產生副作用，並且是冪等的（給定一組輸入，組件將始終產生相同的輸出）。通過實際創建組件作為函數而不是“類”，可以正式實現此目標。有三種方法可以創建React組件：

功能（“無狀態”）組件

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass（）

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015課程

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

這些組件的使用方式完全相同：

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

上面的例子都會產生相同的標記。

功能組件不能在其中具有“狀態”。因此，如果您的組件需要具有狀態，那麼請選擇基於類的組件。有關更多信息，請參閱創建組件

作為最後一點，反應道具一旦被傳入就是不可變的，這意味著它們不能在組件內進行修改。如果組件的父級更改了prop的值，則React處理用new替換舊的props，組件將使用新值重新渲染自身。

請參閱反思和可重用組件中的思考，以深入了解道具與組件的關係。

創建React App

create-react-app是由Facebook創建的React應用程序樣板生成器。它提供了一個易於使用且配置最少的開發環境，包括：

ES6和JSX轉換
具有熱模塊重新加載的開發服務器
代碼linting
CSS自動添加前綴
使用JS，CSS和圖像捆綁以及源映射構建腳本
Jest測試框架

安裝

首先，使用節點包管理器（npm）全局安裝create-react-app。

npm install -g create-react-app

然後在您選擇的目錄中運行生成器。

create-react-app my-app

導航到新創建的目錄並運行啟動腳本。

cd my-app/
npm start

組態

默認情況下，create-react-app是故意不可配置的。如果需要非默認使用，例如，要使用編譯的CSS語言（如Sass），則可以使用eject命令。

npm run eject

這允許編輯所有配置文件。注意，這是一個不可逆轉的過程。

備擇方案

替代React鍋爐板包括：

構建React應用程序

要為生產準備好構建應用程序，請運行以下命令

npm run build

你好，世界

沒有JSX

這是一個使用React的主API來創建React元素的基本示例，以及用於在瀏覽器中呈現React元素的React DOM API。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

使用JSX

不是從字符串創建React元素，而是可以使用JSX（由Facebook創建的Javascript擴展，用於向JavaScript添加XML語法），這允許編寫

var rElement = React.createElement('h1', null, 'Hello, world!');

作為等價物（對於熟悉HTML的人來說更容易閱讀）

var rElement = <h1>Hello, world!</h1>;

包含JSX的代碼需要包含在<script type="text/babel"> 標記中。此標記中的所有內容都將使用Babel庫轉換為純Javascript（除了React庫之外還需要包含它）。

所以最後上面的例子變成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Hello World Component

React組件可以定義為擴展基礎React.Component 類的ES6類。在其最小形式中，組件必須定義一個render 方法，該方法指定組件如何呈現給DOM。 render 方法返回React節點，可以使用JSX語法將其定義為類似HTML的標記。以下示例顯示如何定義最小組件：

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

組件也可以接收props 。這些是由其父級傳遞的屬性，以指定組件本身無法知道的某些值;屬性還可以包含在某些事件發生後可以由組件調用的函數 - 例如，按鈕可以為其onClick 屬性接收函數，並在單擊它時調用它。編寫組件時，可以通過Component本身上的props 對象訪問其props ：

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

上面的示例顯示了組件如何呈現由其父級傳遞給name prop的任意字符串。請注意，組件無法修改它接收的道具。

組件可以在任何其他組件中呈現，或者如果它是最頂層組件則直接呈現在DOM中，使用ReactDOM.render 並為其提供組件和DOM節點，您希望在其中呈現React樹：

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

到現在為止，您知道如何製作基本組件並接受props 。讓我們更進一步，介紹state 。

為了演示，讓我們製作我們的Hello World應用程序，如果給出了全名，則只顯示第一個名稱。

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

注意：每個組件都可以擁有自己的狀態，或者接受父組件作為道具的狀態。

Codepen鏈接到示例。

具有無狀態功能的Hello World

無狀態組件從功能編程中獲得了他們的理念。這意味著：一個函數在給定的內容上完全返回相同的東西。

例如：

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

從上面的例子可以看出，statelessSum總是會返回給定a和b的相同值。但是，即使沒有參數，statefulSum函數也不會返回相同的值。這種類型的函數的行為也稱為副作用 。因為，該組件會影響某些事物。

因此，建議更頻繁地使用無狀態組件，因為它們沒有副作用，並且總是會創建相同的行為。這就是您希望在應用程序中使用的內容，因為波動狀態是可維護程序的最壞情況。

最基本的反應組分類型是沒有狀態的反應組分。 React組件是其道具的純函數，不需要任何內部狀態管理，可以編寫為簡單的JavaScript函數。據說它們是Stateless Functional Components 因為它們只是props 的功能，沒有任何state 可以跟踪。

這是一個簡單的例子來說明Stateless Functional Component 的概念：

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

請注意，此組件執行的所有操作都將呈現包含name prop的h1 元素。此組件不跟踪任何狀態。這是一個ES6示例：

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

由於這些組件不需要後台實例來管理狀態，因此React有更多優化空間。實現是乾淨的，但到目前為止還沒有實現對無狀態組件的這種優化。

安裝或設置

ReactJS是一個包含在單個文件react-<version>.js 中的JavaScript庫，可以包含在任何HTML頁面中。人們通常也會安裝React DOM庫react-dom-<version>.js 以及主要的React文件：

基本包容

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

要獲取JavaScript文件，請轉到官方React文檔的安裝頁面。

React還支持JSX語法。 JSX是由Facebook創建的擴展，它為JavaScript添加了XML語法。為了使用JSX，您需要包含Babel庫並將<script type="text/javascript"> 更改為<script type="text/babel"> ，以便將JSX轉換為Javascript代碼。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

通過npm安裝

您還可以通過執行以下操作使用npm安裝React：

npm install --save react react-dom

要在JavaScript項目中使用React，您可以執行以下操作：

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

通過紗線安裝

Facebook發布了自己的名為Yarn的包管理器，它也可用於安裝React。安裝Yarn後，您只需運行此命令：

yarn add react react-dom

然後，您可以在項目中使用React，方法與通過npm安裝React的方式完全相同。

PDF - Download React for free

Previous Next

Related Tags

This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0

This website is not affiliated with Stack Overflow

Email: tutorialpedia@outlook.com