摘要：今年我要挑戰自己，把它歸納為一篇文章。將忽略該函數并呈現常規的空按鈕。這是中唯一的約束只有表達式。將，，和視為沒有呈現任何內容的有效元素子元素。使用自己的對象將事件對象包裝起來，以優化事件處理的性能。任何已掛載元件的狀態可能會改變。

去年，我寫了一本關于學習React.js的小書，原來是大約100頁。 今年我要挑戰自己，把它歸納為一篇文章。

本文不會涵蓋什么是React，或者為什么要學習它。 相反，這是面向已經熟悉JavaScript并熟悉DOM API基礎知識的人，對React.js的基礎知識的介紹。

以下所有代碼示例均標示為參考。 它們純粹是為了提供概念而寫的例子。 他們大多數可以寫得更好一些。

React是圍繞可重用組件的概念設計的。 您定義小組件，并將它們放在一起形成更大的組件。

所有小或小的組件都可重復使用，甚至跨不同的項目。

一個React組件（以其最簡單的形式）是一個簡單的JavaScript函數：

// Example 1
// https://jscomplete.com/repl?j=Sy3QAdKHW
function Button (props) {
  // Returns a DOM element here. For example:
  return {props.label};
}
// To render the Button component to the browser
ReactDOM.render(, mountNode)

用于按鈕標簽的花括號將在下面介紹。 現在不必要擔心他們。 ReactDOM也將在后面解釋，但是如果要測試這個例子和接下來的代碼示例，render函數就是你需要的。

ReactDOM.render的第二個參數是React將要接管和控制的目標DOM元素。 在jsComplete REPL中，您就可以使用mountNode變量。

關于示例1的注意事項有以下幾點：

組件名稱以大寫字母開頭。 這是必需的，因為我們將處理HTML元素和React元素的混合。 小寫名稱保留給HTML元素。 事實上，請繼續嘗試將React組件命名為“button”。 ReactDOM將忽略該函數并呈現常規的空HTML按鈕。

每個組件都接收一個屬性列表，就像HTML元素一樣。 在React中，這個列表叫做props。創建功能組件，你可以通過使用任意名稱命名props。

在上面的Button組件的返回中，我們寫出了奇怪的HTML。 這既不是JavaScript也不是HTML，甚至不是React.js。 但是，它非常受歡迎，成為React應用程序中的默認設置。 它被稱為JSX，它是一個JavaScript擴展。 JSX也是妥協！ 繼續嘗試在上面的函數中的任何其他HTML元素，并查看它們是如何支持的（例如，返回一個文本輸入元素）。

上面的示例1可以用純粹的React.js來編寫，而不需要JSX，如下所示：

// Example 2 -  React component without JSX
// https://jscomplete.com/repl?j=HyiEwoYB-
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// To use Button, you would do something like
ReactDOM.render(
  React.createElement(Button, { label: "Save" }),
  mountNode
);

createElement函數是React頂級API中函數。 您需要學習的這個級別中共有7件事情中的1項。 可見ReactApi多么簡短。

很像DOM本身有一個document.createElement函數來創建一個由標簽名稱指定的元素，React的createElement函數是一個更高級別的函數，可以做類似于document.createElement的功能。 但它也可以用于創建一個表示React組件的元素。 當我們使用上面的例2中的Button組件時，我們這里就是創建了一個React組件。

與document.createElement不同，React的createElement可以接受第二個參數之后的動態參數，以表示創建的元素的后代。 所以createElement實際上創建一個樹。

這是一個例子：

/ Example 3 -  React’s createElement API
// https://jscomplete.com/repl?j=r1GNoiFBb
const InputForm = React.createElement(
  "form",
  { target: "_blank", action: "https://google.com/search" },
  React.createElement("div", null, "Enter input and click Search"),
  React.createElement("input", { name: "q", className: "input" }),
  React.createElement(Button, { label: "Search" })
);
// InputForm uses the Button component, so we need that too:
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

關于以上例子要注意的幾點：

InputForm不是React組件; 它只是一個React元素。 這就是為什么我們直接在ReactDOM.render調用中使用它，而不是使用。

我們可以嵌套React.createElement調用，因為它都是JavaScript。

React.createElement的第二個參數可以是null，也可以是一個空對象，當元素不需要attributes和props時。

我們可以將HTML元素與React組件混合使用。 您可以將HTML元素視為內置的React組件。

React的API嘗試盡可能接近DOM API，因此我們為輸入元素使用className而不是類。 私以為，我們都希望React的API將成為DOM API本身的一部分。 因為，你知道的，這有太多的好處了。

上面的代碼是您在引入React庫時了解的內容。 瀏覽器不處理任何JSX業務。 然而，我們人類喜歡看HTML并且使用HTML而不是這些createElement調用（想象一下使用document.createElement構建一個網站，我相信你可以的！）。 這就是為什么存在JSX的原因。 我們可以用非常類似于HTML的語法編寫它，而不是用React.createElement調用上面的表單：

// Example 4 - JSX (compare with Example 3)
// https://jscomplete.com/repl?j=SJWy3otHW
const InputForm =
  

    
Enter input and click Search
    
    
  ;
// InputForm "still" uses the Button component, so we need that too.
// Either JSX or normal form would do
function Button (props) {
  // Returns a DOM element here. For example:
  return 
{props.label};
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

關于上面的例子注意以下幾點

它不是HTML。 例如，我們仍然在使用className而不是類。

我們仍然在考慮將以上HTML作為JavaScript。 看看我在末尾添加了分號。

我們上面寫的（例4）是JSX。 然而，我們在瀏覽器的執行版本是它的編譯版本（示例3）。 為了實現這一點，我們需要使用預處理器將JSX版本轉換為React.createElement版本。

那就是JSX。 這是一個折中，允許我們以類似于HTML的語法編寫我們的React組件，這是一個很好的共識。

上面標題中的“Flux”一詞被選為韻腳(...)，但它也是Facebook流行的非常受歡迎的應用程序架構的名稱。 最著名的實現是Redux。

JSX，順便說一下，可以自己在其他地方使用。 這不是只有在React中才可以使用的。

在JSX部分中，您可以在一對花括號內使用任何JavaScript表達式。

// Example 5 -  Using JavaScript expressions in JSX
// https://jscomplete.com/repl?j=SkNN3oYSW
const RandomValue = () => 
  

    { Math.floor(Math.random() * 100) }
  
;
// To use it:
ReactDOM.render(, mountNode);

任何JavaScript表達式都可以放在那些花括號內。 這相當于JavaScript模板文字中的$ {}插值語法。

這是JSX中唯一的約束：只有表達式。 所以，你不能使用常規的if語句，但是三元表達式是可以的。

JavaScript變量也是表達式，所以當組件接收到props列表（RandomValue組件沒有，props是可選的）時，可以在花括號內使用這些props。 我們在上面的Button組件中這樣做了（示例1）。

JavaScript對象也是表達式。 有時候，我們在一個花括號里面使用一個JavaScript對象，這使得它看起來像雙花括號，但它實際上只是一個大括號內的一個對象。 一個用例是將CSS樣式對象傳遞給React中的style屬性：

// Example 6 - An object passed to the special React style prop
// https://jscomplete.com/repl?j=S1Kw2sFHb
const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// Use it:
ReactDOM.render(
  ,
  mountNode
);

請注意，我如何僅解析props參數中的message的。 這是JavaScript。 還要注意上面的style屬性是一個特殊的屬性（再次，它不是HTML，它更接近于DOM API）。 我們使用一個對象作為style屬性的值。 該對象定義了樣式，就像我們使用JavaScript一樣（因為確實就是）。

甚至可以在JSX中使用React元素，因為這也是一個表達式。 記住，一個React元素就是一個函數調用：

const MaybeError = ({errorMessage}) =>
  

    {errorMessage && }
  
;
  
// The MaybeError component uses the ErrorDisplay component:
const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// Now we can use the MaybeError component:
ReactDOM.render(
   0.5 ? "Not good" : ""}
  />,
  mountNode
);

上面的MaybeError組件將只顯示ErrorDisplay組件，如果有一個errorMessage字符串傳遞給它和一個空的div。 React將{true}，{false}，{undefined}和{null}視為沒有呈現任何內容的有效元素子元素。

您還可以使用JSX內的集合上的所有JavaScript方法（map，reduce，filter，concat等）。 再次聲明原因是因為它們返回的是表達式：

// Example 8 - Using an array map inside {}
// https://jscomplete.com/repl?j=SJ29aiYH-
const Doubler = ({value=[1, 2, 3]}) =>
  

    {value.map(e => e * 2)}
  
;
// Use it
ReactDOM.render(, mountNode);

請注意，我是如何給valueprops默認值的，因為它全是Javascript。 還要注意，我在div中輸出了一個數組表達式，這在React中是可行的。 它將把每一個雙倍的值放在一個文本節點中。

簡單的功能組件非常適合簡單的需求，但有時我們需要更多的功能。 React支持通過JavaScript類語法創建組件。 這是使用類語法編寫的Button組件（在示例1中）：

// Example 9 - Creating components using JavaScript classes
// https://jscomplete.com/repl?j=ryjk0iKHb
class Button extends React.Component {
  render() {
    return {this.props.label};
  }
}
// Use it (same syntax)
ReactDOM.render(, mountNode);

類語法很簡單。 定義一個擴展了React.Component基類的類（需要學習的另一個頂級的React API）。 該類定義一個唯一實例函數render（），該render函數返回虛擬DOM對象。 每次我們使用上面的基于Button類的組件（例如，通過執行），React將從這個基于類的組件中實例化一個對象，并在DOM樹中使用該對象。

這就是為什么我們在上面的渲染輸出中在JSX中使用this.props.label的原因。 因為每個組件都獲得一個稱為props的特殊實例屬性，該實例屬性在實例化時保存傳遞給該組件的所有值。

// Example 10 -  Customizing a component instance
// https://jscomplete.com/repl?j=rko7RsKS-
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.id = Date.now();
  }
  render() {
    return 

{this.props.label}; } } // Use it ReactDOM.render(, mountNode);

我們還可以定義類屬性函數，并在我們想使用的地方使用，包括返回的JSX輸出內：

// Example 11 — Using class properties
// https://jscomplete.com/repl?j=H1YDCoFSb
class Button extends React.Component {
  clickCounter = 0;
handleClick = () => {
    console.log(`Clicked: ${++this.clickCounter}`);
  };
  
  render() {
    return (
      

{this.props.label} ); } } // Use it ReactDOM.render(, mountNode);

關于例子11有幾點需要注意

handleClick函數是使用JavaScript中新建的類字段語法編寫的。這種語法仍然屬于stage-2,，但由于很多原因，它是訪問組件安裝實例（由于箭頭功能）的最佳選擇。 但是，您需要使用像Babel這樣的編譯器來配置它來理解stage-2,（或類字段語法）來獲取上面的代碼。 jsComplete REPL具有預配置。

我們還使用相同的類字段語法定義了ClickCounter實例變量。 這允許我們完全跳過使用類構造函數調用。

當我們將handleClick函數指定為特殊的onClick，React屬性的值時，我們沒有調用它。 我們把handleClick函數引用傳遞給出去了。 在這個屬性里面調用函數是使用React最常見的錯誤之一。

// Wrong:
onClick={this.handleClick()}
// Right:
onClick={this.handleClick}

5: React的事件中，兩個最重要的區別

在React元素中處理事件時，與DOM API的方式有兩個非常重要的區別：

所有React元素屬性（包括事件）使用camelCase命名，而不是小寫。 它是onClick，而不是onclick。

我們傳遞一個實際的JavaScript函數引用作為事件處理程序，而不是一個字符串。 它是onClick = {handleClick}，而不是onClick =“handleClick”。

使用自己的對象將DOM事件對象包裝起來，以優化事件處理的性能。 但是在事件處理程序中，我們仍然可以訪問DOM事件對象上可用的所有方法。 React將包裝的事件對象傳遞給每個句柄調用。 例如，為了防止表單從默認提交操作中，您可以執行以下操作：

// Example 12 - Working with wrapped events
// https://jscomplete.com/repl?j=HkIhRoKBb
class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log("Form submitted");
  };
  
  render() {
    return (
      

        

Submit ); } } // Use it ReactDOM.render(

// Example 13 -  the setState API
// https://jscomplete.com/repl?j=H1fek2KH-
class CounterButton extends React.Component {
  state = {
    clickCounter: 0,
    currentTimestamp: new Date(),
  };
  
  handleClick = () => {
    this.setState((prevState) => {
     return { clickCounter: prevState.clickCounter + 1 };
    });
  };
  
  componentDidMount() {
   setInterval(() => {
     this.setState({ currentTimestamp: new Date() })
    }, 1000);
  }
  
  render() {
    return (
      

        Click
        
Clicked: {this.state.clickCounter}
        
Time: {this.state.currentTimestamp.toLocaleString()}
      
    );
  }
}
// Use it
ReactDOM.render(, mountNode);