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

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

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

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

所以它是一個(gè)反應(yīng)式編程框架，就像我想的。這是有道理的，因?yàn)樗拿帧?/span>

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

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

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與沒(méi)有FXML的區(qū)別。使用FXML構(gòu)建javagui時(shí)，標(biāo)記更像XML。如果沒(méi)有它，它看起來(lái)更像上面的代碼塊，其中的函數(shù)和屬性是使用點(diǎn)（.）操作符訪(fǎng)問(wèn)的。“API參考中對(duì)createElement進(jìn)行了更詳細(xì)的描述”，教程中說(shuō)，因此我點(diǎn)擊了該鏈接，希望找到一些規(guī)范的代碼：

文件看起來(lái)真不錯(cuò)。很容易理解。I thnik[props]是屬性列表嗎？但是，當(dāng)我們?cè)谏厦娴拇a塊中使用它時(shí)，我們用大括號(hào)（{className: 'shopping-list'}）將第二個(gè)參數(shù)發(fā)送到createElement。當(dāng)我們把[...children]的變量列表傳遞給createElement時(shí)，它并沒(méi)有用大括號(hào)括起來(lái)。。。我有點(diǎn)糊涂了。也許有兩種名單？一個(gè)是單子，一個(gè)是詞典（或地圖）？

因此，我們可以從較小的組件中逐個(gè)構(gòu)建應(yīng)用程序，在較大的組件中使用它們。下一步是檢查我在上一個(gè)條目中復(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>              ...

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

……沒(méi)錯(cuò)。下一步是填兩個(gè)小東西，我們嘗試一下

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

至

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

并改變

{/* TO-DO */}

至

{this.props.value}

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

…所以這是一件事。

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

接下來(lái)我們要做的是在Square中的button中添加一個(gè)onClick方法，它將打開(kāi)一個(gè)JavaScriptalert()框。我在幾年前的JavaScript體驗(yàn)中見(jiàn)過(guò)這類(lèi)東西，所以它們對(duì)我來(lái)說(shuō)不是很難。

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

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

…變成…

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

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

onClick={alert('click')}

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

接下來(lái)，我們將state添加到Square類(lèi)中，這樣它就可以“記住”它是否被點(diǎn)擊了。我認(rèn)為，這類(lèi)似于大多數(shù)OOP語(yǔ)言中的實(shí)例/成員變量?？雌饋?lái)我們可以在類(lèi)定義中的constructor函數(shù)中設(shè)置React對(duì)象

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

這里有兩件事：

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

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

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

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

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

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

更改為

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

這聽(tīng)起來(lái)像是一種被動(dòng)依賴(lài)。如果一個(gè)對(duì)象更新而其他對(duì)象依賴(lài)于它，那么這些依賴(lài)對(duì)象也會(huì)更新。

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

我已經(jīng)開(kāi)始明白R(shí)eact是怎么工作的了。看到像類(lèi)、構(gòu)造函數(shù)和lambda函數(shù)這樣熟悉的東西讓我更加自信，這是我能夠很容易學(xué)會(huì)的東西。到目前為止，我基本上只是在類(lèi)固醇上做了些什么，所以我希望這個(gè)框架能做得更多。我期待著做一些很酷的互動(dòng)網(wǎng)頁(yè)！