版 | 發布日期 |
---|---|
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是一個基於組件的開源前端庫,僅負責應用程序的視圖層 。它由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>
);
const SecondComponent = React.createClass({
render: function () {
return (
<div>{this.props.content}</div>
);
}
});
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,組件將使用新值重新渲染自身。
請參閱反思和可重用組件中的 思考,以深入了解道具與組件的關係。
create-react-app是由Facebook創建的React應用程序樣板生成器。它提供了一個易於使用且配置最少的開發環境,包括:
首先,使用節點包管理器(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>
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
注意:每個組件都可以擁有自己的狀態,或者接受父組件作為道具的狀態。
無狀態組件從功能編程中獲得了他們的理念。這意味著:一個函數在給定的內容上完全返回相同的東西。
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的方式完全相同。