在上一篇關(guān)于從頭開始學(xué)習(xí)React的博客文章中，我開始通過ReactJS.org的教程進(jìn)行工作。我通過復(fù)制和粘貼代碼構(gòu)建了我的第一個應(yīng)用程序……但是它起作用了！今天，我希望了解一些我運行的代碼。讓我們開始吧。

這一點我想我明白了。React.Component是一個基本組件類，我們創(chuàng)建了一個擴展它的ShoppingList類。我猜組件需要有一個render()方法，它返回一些HTML元素來呈現(xiàn)。這個創(chuàng)建了一個帶有className屬性的——這與HTMLclass屬性類似嗎？--它包含一個標(biāo)題（<h1>）和一個無序列表（<ul>），其中列出了Mark想要購買的所有公司。

我猜，this.props.name訪問this的props變量，我想它引用了ShoppingList類的實例。它訪問name，這是在示例中的類XML標(biāo)記中定義的。如果您可以任意定義這樣的屬性，那么這種語法非?？帷Ｈ绻覀儾话岩粋€name傳給ShoppingList呢？代碼是否拋出錯誤？或者只渲染{this.props.name}應(yīng)該在的地方？

“當(dāng)我們的數(shù)據(jù)更改時，React將有效地更新和重新呈現(xiàn)我們的組件。”

所以它是一個反應(yīng)式編程框架，就像我想的。這是有道理的，因為它的名字。

“這里，ShoppingList是一個反應(yīng)組件類，或者反應(yīng)組件類型。組件接受名為props（properties的縮寫）的參數(shù)，并通過render方法返回要顯示的視圖層次結(jié)構(gòu)?！?/span>

這或多或少是我的想法，但我不明白“視圖層次”是什么意思。教程中說，上面的代碼塊看起來很像HTML，也可以寫成：

React.createElement("div", { className: "shopping-list" },
    React.createElement("h1", null, "Shopping List for ", props.name),
    React.createElement("ul", null,
        React.createElement("li", null, "Instagram"),
        React.createElement("li", null, "WhatsApp"),
        React.createElement("li", null, "Oculus")
     )
 );

這讓我想起了JavaFX與沒有FXML的區(qū)別。使用FXML構(gòu)建javagui時，標(biāo)記更像XML。如果沒有它，它看起來更像上面的代碼塊，其中的函數(shù)和屬性是使用點（.）操作符訪問的。“API參考中對createElement進(jìn)行了更詳細(xì)的描述”，教程中說，因此我點擊了該鏈接，希望找到一些規(guī)范的代碼：

文件看起來真不錯。很容易理解。I thnik[props]是屬性列表嗎？但是，當(dāng)我們在上面的代碼塊中使用它時，我們用大括號（{className: 'shopping-list'}）將第二個參數(shù)發(fā)送到createElement。當(dāng)我們把[...children]的變量列表傳遞給createElement時，它并沒有用大括號括起來。。。我有點糊涂了。也許有兩種名單？一個是單子，一個是詞典（或地圖）？

因此，我們可以從較小的組件中逐個構(gòu)建應(yīng)用程序，在較大的組件中使用它們。下一步是檢查我在上一個條目中復(fù)制和粘貼的JavaScript代碼：

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Square extends React.Component {     render() {         return (            <button className="square">                 {/* TODO */}            </button>         );     } } class Board extends React.Component {      renderSquare(i) {           return <Square />;       }      render() {           const status = 'Next player: X';           return (              <div>              ...

這看起來不言自明。如教程所述，我們有一個Square類和一個Board類，它們?yōu)閠ic-tac-toe游戲呈現(xiàn)九個方塊。我猜有些事情還沒完成，我得去編碼了。

……沒錯。下一步是填兩個小東西，我們嘗試一下

renderSquare(i) {     return <Square />; }

至

renderSquare(i) {     return <Square value={i} />   }

并改變

{/* TO-DO */}

至

{this.props.value}

這將傳遞要在按鈕上呈現(xiàn)的正方形的“值”。我更改此代碼并再次運行npm start。同樣，它需要非常長的時間來渲染。但它確實有用。。。

…所以這是一件事。

祝賀你！您剛剛“傳遞了一個道具”從父級Board到子級Square組件。傳遞道具是信息如何在React應(yīng)用程序中流動，從父類到子類。

接下來我們要做的是在Square中的button中添加一個onClick方法，它將打開一個JavaScriptalert()框。我在幾年前的JavaScript體驗中見過這類東西，所以它們對我來說不是很難。

我們要做的下一件事是用“arrow函數(shù)”替換onClick函數(shù)，因為它們顯然是在JavaScript中調(diào)用的。我認(rèn)為大多數(shù)其他編程語言將它們稱為“l(fā)ambda函數(shù)”：

onClick={function() { alert('click'); }}

…變成…

onClick={() => alert('click')}

省去了一點打字。本教程一定要注意，我們需要向onClick傳遞一個函數(shù)。如果我們只寫…

onClick={alert('click')}

…然后每次組件重新渲染時都會觸發(fā)警報。這大概不是我們想要的。

接下來，我們將state添加到Square類中，這樣它就可以“記住”它是否被點擊了。我認(rèn)為，這類似于大多數(shù)OOP語言中的實例/成員變量?？雌饋砦覀兛梢栽陬惗x中的constructor函數(shù)中設(shè)置React對象

class Square extends React.Component {      constructor(props) {           super(props);           this.state = {              value: null               };       } }

這里有兩件事：

1. 這個Square類顯然是用super()調(diào)用父類的構(gòu)造函數(shù)（React.Component），將props傳遞給父類構(gòu)造函數(shù)。

2. 教程實際上在null后面有一個逗號，我假設(shè)它是一個輸入錯誤

在JavaScript類中，定義子類的構(gòu)造函數(shù)時，始終需要調(diào)用super。所有具有constructor調(diào)用的React組件類都應(yīng)該以super(props)調(diào)用開始。

看起來super(props)在任何子類的constructor中都是必需的。我想知道它是否一定是構(gòu)造器的第一行，就像Java。。。？上面的摘錄有點模棱兩可。

然后，我們使用setState()更改button的onClick以更改按鈕的狀態(tài)，這似乎很簡單。

onClick={() => alert('click')}

更改為

onClick={() => this.setState({value: 'X'})}

這聽起來像是一種被動依賴。如果一個對象更新而其他對象依賴于它，那么這些依賴對象也會更新。

我要做的最后一件事是安裝React Developer Tools Chrome擴展，以便在瀏覽器中檢查我的React代碼：

我已經(jīng)開始明白React是怎么工作的了?？吹较耦悺?gòu)造函數(shù)和lambda函數(shù)這樣熟悉的東西讓我更加自信，這是我能夠很容易學(xué)會的東西。到目前為止，我基本上只是在類固醇上做了些什么，所以我希望這個框架能做得更多。我期待著做一些很酷的互動網(wǎng)頁！