原文鏈接：tylermcginnis.com/reactjs-tut… by Tyler McGinnis

這篇文章最初發表于2015年1月，但最近被更新為React 16.3以及它所包含的所有優點。

React.js基礎：

組件是React的構建快。如果你擁有Angular背景，組件非常類似于Direactives.如果你來自于不同的背景，它們本質上是小工具或者模塊。你可以認為組件就是由HTML,CSS,JS和組件內部一些特定的數據組成的集合。它們擁有著你需要的一切東西，被包裹在一個美妙的組合包中。這些組件要么用純JavaScript定義，要么可以在React團隊所稱的“JSX”中定義。如果你決定使用JSX（你最愿意的方式，很標準的——也是我們將使用到的工具），你需要一些編譯工具將JSX轉換成JavaScript，我們之后再說這個。

React之所以能夠如此方便地構建用戶界面，是因為數據既可以來自組件的父組件，也能夠包含在組件本身中。在我們進入到代碼之前，我們要確保對組件高度理解。

上圖是我Twitter賬戶的圖片。如果我們使用React重構這個頁面，我們將把不同的部分拆分成不同的組件（敲黑板）。請注意，組件可以在其內部嵌套組件。我們可以命名左邊的組件（粉紅框部分）為UserInfo組件。在UserInfo組件中有另一個組件（橙色塊），可以將其定義為UserImages組件。這中父/子關系的工作方式是：UserInfo組件(父組件)存放著其本身和UserImages組件（子組件）的“狀態”數據。如果我們想要在自組件中使用任何父級組件的數據，我們會將數據作為屬性傳遞給自組件。在這個例子中，我們傳遞所有用戶的圖片給UserImages組件（這些圖片都存放在UserInfo組件中）。我們將詳細的在代碼中討論，但是我希望你能夠明白上面?的圖片發生了些什么。這種父/子結構使得我們管理數據的方式更加方便，因為我們不需要精確地知道我們的數據到底存放在哪的并且我們不應該在其它地方操縱這些數據。

下面要討論的話題都是關于React基礎方面的東西。如果你了解它們以及它們的原理，閱讀完本教程后，你將更上一層樓。

JSX - 允許我們使用HTML語法類似的寫法，能夠被轉換成輕量級的JavaScript對象。Virtual DOM - 實際DOM的JavaScript表示。React.Component - 創建一個新組件的方式。render（方法）- 為特定的組件描述UI的樣子。ReactDOM.render = 將React組件渲染成DOM節點。state - 組件內部的數據存儲（對象）。construtor (this.state) - 在組件中創建內部狀態（state）的方式。setState - 組件內部更新狀態（state）的工具方法并會重新渲染UI。props - 父組件中傳遞給子組件的數據。propTypes - 允許你控制傳遞給子組件的屬性（props）的存在或者類型。defaultProps - 允許你為自己的組件設置默認的屬性（props）。Component LifeCycle（生命周期）- componentDidMount - 組件被掛載時執行- componentWillUnmount - 組件注銷前執行- getDerivedStateFromProps - 當組件被掛載并且props發生變化時執行。用于更新組件中的狀態（state）當props改變時。Events- onClick- onSubmit- onChange... 復制代碼

我知道這看起來很多，但是你很快就會看到，在使用React構建健壯應用時，這每一個部分都是非常重要的（當我說我希望這是一個全面的指南時，我也不是在開玩笑）。

在這一點上，你應該高度理解React是如何工作的。現在，讓我們看一些代碼。

---

創建你的第一個組件（JSX，Virtual DOM，render，ReactDOM.render）

讓我們繼續創建我們的第一個組件吧！

為了創建React組件，你將使用到ES6中的類。

import React from 'react' import ReactDOM from 'react-dom'class HelloWorld extends React.Component {render() {return (<div>Hello World!</div>)} }ReactDOM.render(<HelloWorld />, document.getElementById('root')); 復制代碼

注意到我們的類中只有唯一的一個方法就是render。每個組件都需要有一個render方法。使用render方法的理由是它能描述組件的UI（user interface）。因此在這個例子中Hello world會被渲染出來展示在屏幕上。現在我們看看ReactDOM是做什么的。ReactDOM.render方法有兩個參數。第一個參數是你想要渲染的組件，第二個參數是你渲染組件的地方（哪個DOM 節點中）。（注意我們使用的是ReactDOM.render而不是React.render。這個改變出現在React.14中為了使React更加模塊化。當你認為React可以呈現比DOM元素更多的內容時，這是有意義的）。在上面的例子中，我們告訴React獲取HelloWorld組件并在ID為root的元素中渲染。正如我們前面提到的React中的父/子關系，你通常只需要在應用中用到一次ReactDOM.render方法，因為通過渲染最父級的組件，所有的自組件也都會被渲染。

此時你可能覺得在Javascript中寫“HTML”有些奇怪。在你開始學習web開發時，就有人告訴你應該將邏輯層和視圖層分開，AKA也就是保持JavaScript與HTML的松耦合。這種模式很強大，但它也有一些缺點。由于篇幅原因，這里將不再詳述，你可以查看這篇文檔一探究竟。隨著你對React的了解越來越多，這種不安應該會很快消退。在render方法中寫的“HTML”并不是真正的HTML而是React所稱的“JSX”。JSX允許我們很容易地編寫類似HTML的語法，這些語法(最終)被轉換為輕量級JavaScript對象。然后，React可以獲取這些JavaScript對象，并將其創建成“虛擬DOM”或實際DOM的JavaScript表示。這創建了雙贏的局面，你可以使用JavaScript的強大功能來訪問模板。

看看下面的例子，這就是你的JSX最終被編譯的樣子：

class HelloWorld extends React.Component {render() {return React.createElement('div', null, 'Hello world');}} 復制代碼

現在，您可以放棄JSX -> JS轉換階段，像上面的代碼一樣編寫您的React組件，但正如你所能想象的，這將是相當棘手的。我不知道有誰沒有使用JSX。有關JSX編譯的更多信息，你可以查看React Elements vs React Components

到目前為止，我們還沒有真正強調我們將要進入的這個新的虛擬DOM范式的重要性。React團隊采用這種方法的原因是，因為虛擬DOM是實際DOM的JavaScript表示，React能夠持續跟蹤當前虛擬DOM（在一些數據更改之后計算）和前一個虛擬DOM（在一些數據更改之前計算）的不同。React將新舊虛擬DOM之間的變化隔離開來，然后只更新需要更改的實際DOM。。通常UI有許多狀態，這使得管理狀態變得困難。每次狀態改變都會重新渲染Virtual DOM, React讓你更容易思考應用程序處于什么狀態。過程是這樣的：

一些用戶事件改變了應用程序的狀態 -> 重新渲染Virtual DOM -> 使用Diff算法計算出新Virtual DOM和前一個Virtual DOM間的差異 -> 只更新實際DOM中必要的變化

因為存在從JSX到JS的轉換過程，所以在開發過程中需要設置某種類型的轉換階段。在本系列的第2部分中，我將介紹Webpack和Babel來進行這種轉換。

讓我們回顧一下我們的“最重要的React的部分”清單，看看我們現在到哪兒了：

---

JSX - 允許我們使用HTML語法類似的寫法，能夠被轉換成輕量級的JavaScript對象。

Virtual DOM - 實際DOM的JavaScript表示。

React.Component - 創建一個新組件的方式。

render（方法）- 為特定的組件描述UI的樣子。

ReactDOM.render = 將React組件渲染成DOM節點。

state - 組件內部的數據存儲（對象）。

construtor (this.state) - 在組件中創建內部狀態（state）的方式。

setState - 組件內部更新狀態（state）的工具方法并會重新渲染UI。

props - 父組件中傳遞給子組件的數據。

propTypes - 允許你控制傳遞給子組件的屬性（props）的存在或者類型。

defaultProps - 允許你為自己的組件設置默認的屬性（props）。

Component LifeCycle（生命周期） - componentDidMount - 組件被掛載時執行 - componentWillUnmount - 組件注銷前執行 - getDerivedStateFromProps - 當組件被掛載并且props發生變化時執行。用于更新組件中的狀態（state）當props改變時。

Events - onClick - onSubmit - onChange ...

---

我們的速度很快。所有粗體部分都是我們已經介紹過了，你至少應該能夠解釋這些特定組件如何適應React生態系統了。

添加state到你的組件中

接下來是state。之前我們提到過管理用戶界面是困難的，因為他們總是有大量的狀態。這是React真正發光的地方。每個組件都有能力管理它們自己的狀態并且在需要的時候將這些狀態傳遞給他們的子組件。回到前面Twitter賬戶的例子，UserInfo組件（上面的粉紅塊）負責管理用戶信息狀態（或者數據）。如果另外一個組件也需要這個state/data，但那個狀態（state）不是UserInfo組件的直接子組件，然后你將創建另一個組件，它將是UserInfo和另一個組件(或兩個組件都需要該狀態)的直接父組件，然后將狀態（state）作為屬性（props）傳遞到子組件中。換句話說，如果你有一個多組件層次結構，那么公共父組件應該管理狀態，并通過屬性（props）將其傳遞給其子組件。

讓我們看一個使用其內部狀態的示例組件：

class HelloUser extends React.Component {constructor(props) {super(props)this.state = {username: 'tylermcginnis'}}render() {return (<div>Hello {this.state.username}</div>)} } 復制代碼

我們在這個例子中引入了一些新的語法。第一個你注意到的是constructor方法。從上面的定義得知，constructor方法是組件中的狀態（state）定義的方式。換句話說，任何你在constructor中設置在this.state上的數據都會成為組件狀態（state）的一部分。在上面的代碼中我們告訴組件我們想要持續跟蹤username的狀態。username現在可以被使用通過調用this.state.username的方式，我們在render方法中確實是這樣做的。

關于state我們需要討論的最后一件事是，我們的組件需要有能力改變它自身內部的狀態（state）。我們可以通過setState來做這件事。還記得我們前面我們提到過當數據發生改變的時候都會出發re-rendering重新渲染virtual dom嗎？

通知我們的應用程序一些數據發生了變化 -> 重新渲染virtual DOM -> 使用diff算法計算前一個virtual DOM和新virtual DOM之間的區別 -> 實際的DOM節點進行必要的更新。

通過我們的應用程序，數據發生了變化的信號就是setState。不論什么時候setState被調用，virtual DOM都會被重新渲染，diff算法會跑起來，并且實際的DOM也會進行必要的更新。

作為旁注，當我們在下面的代碼中介紹setState時，我們也會介紹一些清單中事件。一舉兩得！

因此在下面的例子中，我們將有一個輸入框，無論什么時候進行輸入，它都會自動更新我們的狀態（state）和改變username的值。

class HelloUser extends React.Component {construtor(props) {super(props)this.state = {username: 'tylermcginnis'}this.handleChange = this.handleChange.bind(this)}handleChange (e) {this.setState({username: e.target.value})}render() {return (<div>Hello {this.state.username} <br />Change Name:<inputtype="text"value={this.state.username}onChange={this.handleChange}/></div>)} } 復制代碼

注意到我們介紹了一些東西。第一個是handleChange方法。每當用戶在輸入框中鍵入時，就會調用這個方法。當handleChange被調用時，它會調用setState來重新定義我們的用戶名將其賦值為任何在輸入框中輸入的值(e.target.value)。記住，每次setState被調用時，React都會創建一個新的virtual DOM，執行diff算法，并且更新實際的DOM節點。

現在來看一下我們的render方法。我們添加了一個包含輸入域的新行。它的類型顯然是text。這個值將是我們的用戶名（username）的值，它最初是在getInitialState方法中定義的，將在handleChange方法中更新。請注意，這里有一個你可能從未見過的新屬性，onChange。onChange是一個React事件，它會在每次輸入框中的值發生變化時調用你指定的任何方法，在這里我們指定的方法是handleChange。

上述代碼的處理過程大致是這樣的。

用戶在輸入框中鍵入 -> handleChange調用 -> 組件的狀態被設置為一個新值 -> React重新渲染虛擬DOM -> React執行diff算法計算出差異 -> 實際DOM節點被更新。

之后我們會講到props，我們將看到一些更高級處理state的用例。

我們到這里了！如果你不能很好的解釋上面列舉條目中加粗的部分，你最好重讀一遍。真正學習React的一個技巧是，不要讓被動的閱讀給你一種虛假的安全感，以為你知道發生了什么。你應該在編輯器中創建自己的組件，而不只是看我做了些什么。這是你真正開始學習如何使用React的唯一方法。這適用于本教程和后續教程。

---

從父組件中接收狀態（props，propTypes，getDefaultProps）

我們已經討論過幾次props了，因為沒有它們真的很難做很多事情。前面的定義指出，props是父組件傳遞給子組件的數據。這允許我們的React體系結構保持相當直接的狀態。處理需要使用特定數據的頂級父組件中的狀態，如果你的子組件也需要該數據，則將該數據作為props傳遞下去。

這里有一個使用props非常簡單的例子：

class HelloUser extends React.Component {render() {return (<div> Hello, {this.props.name}</div>)} }ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('root')); 復制代碼

注意，在第9行，我們有一個名為name的屬性，其值為“Tyler”。現在在我們的組件中，我們可以使用{this.props.name}來獲取“Tyler”。

讓我們看一個更高級的例子。我們現在有兩個組件。一個parent，一個child。父組件將跟蹤狀態并將該狀態的一部分作為props傳遞給子進程。讓我們首先看看父組件。

父組件

class FriendsContainer extends React.Component {constructor(props) {super(props)this.state = {name: 'Tyler McGinnis',friends: ['Jake Lingwall', 'Sarah Drasner', 'Merrick Christensen']}}render() {return (<div><h3> Name: {this.state.name} </h3><ShowList names={this.state.friends} /></div>)} } 復制代碼

在這個組件中，沒什么特別的：我們有一個初始狀態，我們將初始狀態的一部分傳遞給另一個組件。大多數新代碼將來自這個子組件，所以讓我們更仔細地研究一下。

子組件：

class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => <li>{friend}</li>)}</ul></div>)} } 復制代碼

請記住，render方法返回的代碼是實際DOM的表示形式。如果你不熟悉Array.prototype.map，這段代碼看起來有點陌生。map所做的就是創建一個新數組，對數組中的每個項目調用回調函數，并將每個項目調用回調函數的結果填充到新數組中。例如，

const friends = ['Jake Lingwall', 'Sarah Drasner', 'Merrick Christensen']; const listItems = friends.map((friend) => {return "<li> " + friend + "</li>"; });console.log(listItems); // ["<li> Jake Lingwall</li>", "<li> Sarah Drasner</li>", "<li> Merrick Christensen</li>"]; 復制代碼

注意，我們創建了一個新數組，并將<li> </li>添加到原始數組中的每一項。

map的偉大之處在于它非常適合于React(JavaScript中的內置方法)。因此，在上面的子組件中，我們映射名稱，將每個名稱包裝在一對<li>標記中，并將其保存到listItems變量中。然后，我們的render方法返回一個無序列表，其中包含我們所有的朋友。

在我們停止討論props之前，讓我們再看一個例子。重要的是要理解，無論數據位于何處，都是你希望操作這些數據的。這樣可以簡化對數據的推理。對于特定數據塊的所有getter/setter方法都將始終位于定義該數據的相同組件中。如果你需要在數據所在位置之外操作一些數據，可以將getter/setter方法作為props傳遞到該組件。讓我們看一個這樣的例子。

class FriendsContainer extends React.Component {construtor(props) {super(props)this.state = {name: 'Tyler McGinnis',friends: ['Jake Lingwall','Sarah Drasner','Merrick Christensen'],}this.addFriend = this.addFriend.bind(this)}addFriend(friend) {this.setState((state) => ({friends: state.friends.concat([friend])}))}render() {return (<div><h3> Name: {this.state.name} </h3><AddFriend addNew={this.addFriend} /><ShowList names={this.state.friends} /></div>)} } 復制代碼

?.注意，在addFriend方法中，我們引入了一種調用setState的新方法。我們不是傳遞一個對象，而是傳遞一個函數，然后這個函數傳遞狀態（state）。當你根據以前的狀態設置組件的新狀態時(正如我們對friends數組所做的那樣)，你希望給setState傳遞一個函數，該函數接收當前狀態（state）并返回數據與新狀態進行合并。

class AddFriend extends React.Component {construtor(props) {super(props)this.state = {newFriend: ''}this.updateNewFriend = this.updateNewFriend.bind(this)this.handleAddNew = this.handleAddNew.bind(this)}updateNewFriend(e) {this.setState({newFriend: e.target.value})}handleAddNew() {this.props.addNew(this.state.newFriend)this.setState({newFriend: ''})}render() {return (<div><inputtype="text"value={this.state.newFriend}onChange={this.updateNewFriend}/><button onClick={this.handleAddNew}> Add Friend </button></div>)} } 復制代碼class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => {return <li> {friend} </li>})}</ul></div>)} } 復制代碼

你會注意到上面的代碼與前面的示例基本相同，只是現在我們能夠向好友列表中添加新名稱。注意我是如何創建一個新的AddFriend組件來管理我們將要添加的新朋友的。這是因為父組件(FriendContainer)并不關心你添加的新朋友，它只關心作為一個整體的所有朋友(朋友數組)。但是，因為我們堅持只操作關心它的組件的數據的規則，所以我們已經將addFriend方法作為一個props傳遞到addFriend組件中，并在handleAddNew方法被調用后與新朋友一起調用它。

在這一點上，我建議你在嘗試使用上面的代碼來重新創建相同的功能，你可能會被卡住3-4分鐘。

在我們繼續將props之前，我想再講兩個關于props的React特性。它們是propTypes和defaultProps。這里我不多講，因為這兩者都很直接。proptype允許你控制展示，或者傳遞給子組件的某些props的類型。使用propTypes，你可以指定特定的props是否是必需的，或者特定props的類型。

從React 15開始，PropTypes不再包含在React包中。你需要通過運行npm install prop-types來單獨安裝它。

defaultProps允許為某些props指定默認(或備份)值，以防這些props從未傳遞到組件中。

我使用propTypes修改了我們的組件，要求addFriend是一個函數，并將其傳遞給AddFriend組件。我還使用了defaultProps，如果沒有向ShowList組件提供朋友數組，它將默認為空數組。

import React from 'react' import PropTypes from 'prop-types'class AddFriend extends React.Component {constructor(props) {super(props)this.state = {newFriend: ''}}updateNewFriend(e) {this.setState({newFriend: e.target.value})}handleAddNew() {this.props.addNew(this.state.newFriend)this.setState({newFriend: ''})}render() {return (<div><input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} /><button onClick={this.handleAddNew}> Add Friend </button></div>)} }AddFriend.propTypes: {addNew: PropTypes.func.isRequired } 復制代碼class ShowList extends React.Component {render() {return (<div><h3> Friends </h3><ul>{this.props.names.map((friend) => {return <li> {friend} </li>})}</ul></div>)} }ShowList.defaultProps = {names: [] } 復制代碼

好了，這是此教程的最后一部分。讓我們看一下檢查一下清單，看看還剩下什么。

Component LifeCycle- componentDidMount — Fired after the component mounted- componentWillUnmount — Fired before the component will unmount- getDerivedStateFromProps - Fired when the component mounts and whenever the props change. Used to update the state of a component when its props change 復制代碼

就快完了！

組件生命周期

你創建的每個組件都有自己的生命周期事件，這些事件是有用的。例如，如果我們想在第一次渲染時發出ajax請求并獲取一些數據，我們應該在哪里做呢?或者，如果我們想在props改變的時候處理一些業務邏輯，我們又該怎么做呢?不同的生命周期事件是這兩個問題的答案。讓我們把它們分解。

class App extends React.Component {constructor(props) {super(props)this.state = {name: 'Tyler McGinnis'}}componentDidMount(){// 當DOM節點被掛載的時候執行一次// 有益于發送AJAX請求}static getDerivedStateFromProps(nextProps, prevState) {// 這個函數返回的對象將被整合到當前的state中}componentWillUnmount(){// 在組件被卸載之前立即執行// 有助于清理一些監聽器（listeners）}render() {return (<div>Hello, {this.state.name}</div>)} } 復制代碼

componentDidMount - 在初始渲染（render）之后調用一次。因為在調用此方法時組件已經被調用，所以如果有需要，你可以訪問虛擬DOM,通過調用this.getDOMNode()來實現。這是一個生命周期事件，在這個事件中，你可以發出AJAX請求以獲取一些數據。

componentWillUnmount - 在從DOM卸載組件之前，將立即調用此生命周期方法。這是你可以做必要清理的地方。

getDerivedStateFromProps - 有時你需要根據傳遞進來的props更新組件的狀態（state）。這是生命周期方法，你可以這樣做。它將傳遞props和state，返回的對象將與當前state合并。

如果你能堅持到現在，做得很好。我希望本教程對你有所幫助，并且你現在至少對React感覺還算滿意。

為了更深入地了解React的基本原理，看看我們的React基礎課程。或者查看官方教程

轉載于:https://juejin.im/post/5c107708e51d4511624d151b

總結

以上是生活随笔為你收集整理的【译】一份通俗易懂的React.js基础指南-2018的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。