1：組件是React的一切

React是圍繞可重用組件的概念設(shè)計的。 您定義小組件，并將它們放在一起形成大的組件。
小或小的組件都可重復(fù)使用，跨不同的項目。
一個React組件（以其簡單的形式）是一個簡單的JavaScript函數(shù)：
// Example 1 // https://jscomplete.com/repl?j=Sy3QAdKHW function Button (props) { // Returns a DOM element here. For example: return <button type="submit">{props.label}</button>;} // To render the Button component to the browser ReactDOM.render(<Button label="Save" />, mountNode)
用于按鈕標(biāo)簽的花括號將在下面介紹。 現(xiàn)在不要擔(dān)心他們。 ReactDOM也將在后面解釋，但是如果要測試這個例子和接下來的代碼示例，render函數(shù)就是你需要的。
ReactDOM.render的參數(shù)是React將要接管和控制的目標(biāo)DOM元素。 在jsComplete REPL中，您就可以使用mountNode變量。
關(guān)于示例1的注意事項有以下幾點(diǎn)：
組件名稱以大寫字母開頭。因為我們將處理HTML元素和React元素的混合。 小寫名稱保留給HTML元素。請繼續(xù)嘗試將React組件命名為“button”。 ReactDOM將忽略該函數(shù)并呈現(xiàn)常規(guī)的空HTML按鈕。
每個組件都接收一個屬性列表，就像HTML元素一樣。 在React中，這個列表叫做props。創(chuàng)建功能組件，你可以通過使用任意名稱命名props。
在上面的Button組件的返回中，我們寫出了奇怪的HTML。 這既不是JavaScript也不是HTML，不是React.js。 但是，它很受歡迎，成為React應(yīng)用程序中的默認(rèn)設(shè)置。 它被稱為JSX，它是一個JavaScript擴(kuò)展。 JSX也是妥協(xié)！ 繼續(xù)嘗試在上面的函數(shù)中的其他HTML元素，并查看它們是如何支持的（例如，返回一個文本輸入元素）。
2: What the flux is JSX?

上面的示例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);
上面的示例1可以用的React.js來編寫，而不需要JSX，如下所示：
createElement函數(shù)是React API中函數(shù)。 您需要學(xué)習(xí)的這個中有7件事情中的1項。 可見ReactApi多么簡短。
很像DOM本身有一個document.createElement函數(shù)來創(chuàng)建一個由標(biāo)簽名稱的元素，React的createElement函數(shù)是一個高的函數(shù)，可以做類似于document.createElement的功能。 但它也可以用于創(chuàng)建一個表示React組件的元素。 當(dāng)我們使用上面的例2中的Button組件時，我們這里就是創(chuàng)建了一個React組件。
與document.createElement不同，React的createElement可以接受參數(shù)之后的動態(tài)參數(shù)，以表示創(chuàng)建的元素的后代。 所以createElement實際上創(chuàng)建一個樹。
這是一個例子：
/ Example 3 -  React’s createElement API // https://jscomplete.com/repl?j=r1GN oiFBb 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, mountN ode);
關(guān)于以上例子要注意的幾點(diǎn)：
InputForm不是React組件; 它只是一個React元素。 這就是為什么我們直接在ReactDOM.render調(diào)用中使用它，而不是使用<InputForm />。
我們可以嵌套React.createElement調(diào)用，因為它都是JavaScript。
React.createElement的參數(shù)可以是null，也可以是一個空對象，當(dāng)元素不需要attributes和props時。
我們可以將HTML元素與React組件混合使用。 您可以將HTML元素視為內(nèi)置的React組件。
React的API嘗試盡可能接近DOM API，因此我們?yōu)檩斎朐厥褂胏lassName而不是類。 私以為，我們都希望React的API將成為DOM API本身的一部分。
上面的代碼是您在引入React庫時了解的內(nèi)容。 瀏覽器不用JSX業(yè)務(wù)。 然而，我們喜歡看HTML并且使用HTML而不是這些createElement調(diào)用（想象一下使用document.createElement構(gòu)建一個網(wǎng)站，我相信你可以的！）。 這就是為什么存在JSX的原因。 我們可以用類似于HTML的語法編寫它，而不是用React.createElement調(diào)用上面的表單：
// Example 4 - JSX (compare with Example 3) // https://jscomplete.com/repl?j=SJWy3otHW const InputForm =  <form target="_blank" action="https://google.com/search">    <div>Enter input and click Search</div>    <input name="q" className="input" />    <Button label="Search" />  </form>; // 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 <button type="submit">{props.label}</button>;} // Then we can use InputForm directly with .render ReactDOM.render(InputForm, mountNode);
關(guān)于上面的例子注意以下幾點(diǎn)
它不是HTML。 例如，我們?nèi)匀辉谑褂胏lassName而不是類。
我們?nèi)匀辉诳紤]將以上HTML作為JavaScript。 看看我在末尾添加了分號。
我們上面寫的（例4）是JSX。 然而，我們在瀏覽器的執(zhí)行版本是它的編譯版本（示例3）。 為了實現(xiàn)這一點(diǎn)，我們需要使用預(yù)處理器將JSX版本轉(zhuǎn)換為React.createElement版本。
那就是JSX。 這是一個折中，允許我們以類似于HTML的語法編寫我們的React組件，這是一個好的共識。
上面標(biāo)題中的“Flux”一詞被選為韻腳(...)，但它也是Facebook流行的受歡迎的應(yīng)用程序架構(gòu)的名稱。 著名的實現(xiàn)是Redux。
JSX，順便說一下，可以自己在其他地方使用。 這不是只有在React中才可以使用的。
3: 您可以在JSX中的位置使用JavaScript表達(dá)式

在JSX部分中，您可以在一對花括號內(nèi)使用JavaScript表達(dá)式。
// Example 5 -  Using JavaScript expressions in JSX // https://jscomplete.com/repl?j=SkNN3oYSW const RandomValue = () => <div> { Math.floor(Math.random() * 100) } </div>; // To use it: ReactDOM.render(<RandomValue />, mountN ode);
JavaScript表達(dá)式都可以放在那些花括號內(nèi)。 這相當(dāng)于JavaScript模板文字中的$ {}插值語法。
這是JSX中的約束：只有表達(dá)式。 所以，你不能使用常規(guī)的if語句，但是三元表達(dá)式是可以的。
JavaScript變量也是表達(dá)式，所以當(dāng)組件接收到props列表（RandomValue組件沒有，props是可選的）時，可以在花括號內(nèi)使用這些props。 我們在上面的Button組件中這樣做了（示例1）。
JavaScript對象也是表達(dá)式。 有時候，我們在一個花括號里面使用一個JavaScript對象，這使得它看起來像雙花括號，但它實際上只是一個大括號內(nèi)的一個對象。 一個用例是將CSS樣式對象傳遞給React中的style屬性：
// Example 6 - An object passed to the special React style prop // https://jscomplete.com/repl?j=S1Kw2sFHb const ErrorDisplay = ({message}) =>  <div style={ { color: "red", backgroundColor: "yellow" } }>    {message}  </div>; // Use it: ReactDOM.render(  <ErrorDisplay     message="These aren"t the droids you"re looking for" />,  mountN ode);
請注意，我如何解析props參數(shù)中的message的。 這是JavaScript。 還要注意上面的style屬性是一個的屬性（再次，它不是HTML，它接近于DOM API）。 我們使用一個對象作為style屬性的值。 該對象定義了樣式，就像我們使用JavaScript一樣（因為確實就是）。
可以在JSX中使用React元素，因為這也是一個表達(dá)式。 記住，一個React元素就是一個函數(shù)調(diào)用：
const MaybeError = ({errorMessage}) =>  <div>    {errorMessage && <ErrorDisplay message={errorMessage} />}  </div>; // The MaybeError component uses the ErrorDisplay component: const ErrorDisplay = ({message}) =>  <div style={ { color: "red", backgroundColor: "yellow" } }>    {message}  </div>; // N ow we can use the MaybeError component: ReactDOM.render(  <MaybeError    errorMessage={Math.random() > 0.5 ? "N ot good" : ""}  />,  mountN ode);
上面的MaybeError組件將只顯示ErrorDisplay組件，如果有一個errorMessage字符串傳遞給它和一個空的div。 React將{true}，{false}，{undefined}和{null}視為沒有呈現(xiàn)內(nèi)容的元素子元素。
您還可以使用JSX內(nèi)的集合上的JavaScript方法（map，reduce，filter，concat等）。 再次聲明原因是因為它們返回的是表達(dá)式：
// Example 8 - Using an array map inside {}// https://jscomplete.com/repl?j=SJ29aiYH- const Doubler = ({value=[1, 2, 3]}) =>  <div>    {value.map(e => e * 2)}  </div>;// Use itReactDOM.render(<Doubler />, mountN ode);
請注意，我是如何給valueprops默認(rèn)值的，因為它全是Javascript。 還要注意，我在div中輸出了一個數(shù)組表達(dá)式，這在React中是可行的。 它將把一個值放在一個文本節(jié)點(diǎn)中。
4: 您可以使用JavaScript類編寫React組件

簡單的功能組件適合簡單的需求，但有時我們需要多的功能。 React支持通過JavaScript類語法創(chuàng)建組件。 這是使用類語法編寫的Button組件（在示例1中）：
// Example 9 - Creating components using JavaScript classes // https://jscomplete.com/repl?j=ryjk0iKHb class Button extends React.Component {  render() { return <button>{this.props.label}</button>;  }} // Use it (same syntax) ReactDOM.render(<Button label="Save" />, mountN ode);
類語法很簡單。 定義一個擴(kuò)展了React.Component基類的類（需要學(xué)習(xí)的另一個的React API）。 該類定義一個實例函數(shù)render（），該render函數(shù)返回虛擬DOM對象。 每次我們使用上面的基于Button類的組件（例如，通過執(zhí)行<Button ... />），React將從這個基于類的組件中實例化一個對象，并在DOM樹中使用該對象。
這就是為什么我們在上面的渲染輸出中在JSX中使用this.props.label的原因。 因為每個組件都獲得一個稱為props的實例屬性，該實例屬性在實例化時保存?zhèn)鬟f給該組件的值。
// Example 10 -  Customizing a component instance // https://jscomplete.com/repl?j=rko7RsKS- class Button extends React.Component {  constructor(props) { super(props); this.id = Date.n ow();  }  render() { return <button id={this.id}>{this.props.label}</button>;  }} // Use it ReactDOM.render(<Button label="Save" />, mountN ode);
我們還可以定義類屬性函數(shù)，并在我們想使用的地方使用，包括返回的JSX輸出內(nèi)：
// 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 (      <button id={this.id} onClick={this.handleClick}>        {this.props.label}      </button>    );  }} // Use it ReactDOM.render(<Button label="Save" />, mountN ode);
關(guān)于例子11有幾點(diǎn)需要注意
handleClick函數(shù)是使用JavaScript中新建的類字段語法編寫的。這種語法仍然屬于stage-2,，但由于很多原因，它是訪問組件安裝實例（由于箭頭功能）的選擇。 但是，您需要使用像Babel這樣的編譯器來配置它來理解stage-2,（或類字段語法）來獲取上面的代碼。 jsComplete REPL具有預(yù)配置。
我們還使用相同的類字段語法定義了ClickCounter實例變量。 這允許我們跳過使用類構(gòu)造函數(shù)調(diào)用。
當(dāng)我們將handleClick函數(shù)的onClick，React屬性的值時，我們沒有調(diào)用它。 我們把handleClick函數(shù)引用傳遞給出去了。 在這個屬性里面調(diào)用函數(shù)是使用React的錯誤之一。
// Wrong: onClick={this.handleClick()} // Right: onClick={this.handleClick}
5: React中，兩個重要的區(qū)別

在React元素中處理時，與DOM API的方式有兩個重要的區(qū)別：
React元素屬性使用camelCase命名，而不是小寫。 它是onClick，而不是onclick。
我們傳遞一個實際的JavaScript函數(shù)引用作為處理程序，而不是一個字符串。 它是onClick = {handleClick}，而不是onClick =“handleClick”。
使用自己的對象將DOM對象包裝起來，以優(yōu)化處理的性能。 但是在處理程序中，我們?nèi)匀豢梢栽L問DOM對象上可用的方法。 React將包裝的對象傳遞給每個句柄調(diào)用。 例如，為了不讓表單從默認(rèn)提交操作中，您可以執(zhí)行以下操作：
// 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 (      <form onSubmit={this.handleSubmit}>        <button type="submit">Submit</button>      </form>    );  }} // Use it ReactDOM.render(<Form />, mountNode);
6: React組件都有故事

以下適用于類組件（擴(kuò)展為React.Component的組件）。 函數(shù)組件有一個略有不同的故事。
我們?yōu)镽eact定義一個模板，以從組件創(chuàng)建元素。
然后，我們指示React在某處使用它。 例如，在另一個組件的render調(diào)用中，或者使用ReactDOM.render。
然后，React實例化一個元素，并給出一組我們可以使用this.props訪問的props。 那些props正是我們在上面的步驟2中傳遞的。
由于它都是JavaScript，所以構(gòu)造方法將被調(diào)用（如果已經(jīng)定義的話）。 這是我們要說的：組件生命周期方法。
然后React計算render方法（虛擬DOM節(jié)點(diǎn)）的輸出。
由于這是React渲染元素，React將與瀏覽器進(jìn)行通信（代表我們使用DOM API）來顯示元素。 這個過程通常被稱為掛載。
然后，React調(diào)用另一個生命周期方法，稱為componentDidMount。 我們可以使用這種方法做一些事情，例如，在DOM上做一些我們現(xiàn)在知道在瀏覽器中支持處理的東西。 在此生命周期方法之前，我們處理的DOM是虛擬的。
一些組件故事在這里結(jié)束。 出于原因，其他組件可以從瀏覽器DOM中解除掛載。 在后一種情況發(fā)生之前，React調(diào)用另一個生命周期方法componentWillUnmount。
已掛載元件的狀態(tài)可能會改變。 該元素的父代可能會重新呈現(xiàn)。 在任一種情況下，安裝的元件可能會接收不同的props。 這里的發(fā)生了，我們現(xiàn)在開始需要React了！ 在此之前，我們不需要做事情
這個組件的故事繼續(xù)下去，但在之前，我們需要了解我所說的這個狀態(tài)。
7: React組件有一個私有狀態(tài)

以下適用于類組件。 有沒有人提到有些人把只做展現(xiàn)的組件叫做啞巴？
狀態(tài)類字段是React類組件中的字段。 React每個組件狀態(tài)以進(jìn)行修改。 但是對于React要執(zhí)行這些操作，我們通過另一個需要學(xué)習(xí)的React API函數(shù)來修改state字段，this.setState：
// 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 ( <div> <button onClick={this.handleClick}>Click</button> <p>Clicked: {this.state.clickCounter}</p> <p>Time: {this.state.currentTimestamp.toLocaleString()}</p> </div> );  }} // Use it ReactDOM.render(<CounterButton />, mountNode);
這是了解state重要的例子。 它將完善您對React交互方式的基礎(chǔ)知識。 在這個例子之后，還有一些你需要學(xué)習(xí)的小事情，但是從這一點(diǎn)來看，它主要是你和你的JavaScript技能。
我們來看一下實例13，從類字段開始。 它有兩個。 狀態(tài)字段被初始化為一個對象，該對象包含起始值為0的clickCounter，以及起始值為new Date()的currentTimestamp。
類字段是一個handleClick函數(shù)，我們傳遞給render方法中的button元素的onClick。 handleClick方法使用setState修改此組件實例狀態(tài)。 注意到這一點(diǎn)。
我們在componentDidMount生命周期方法啟動的間隔定時器中修改狀態(tài)。 它每秒鐘打勾并執(zhí)行調(diào)用this.setState。
在render方法中，我們使用了正常讀取語法對state兩個屬性的讀取。 沒有的API。
現(xiàn)在，請注意，我們使用兩種不同的方式新了狀態(tài)：
傳遞返回一個對象的函數(shù)。 我們handleClick函數(shù)中實現(xiàn)了這部分內(nèi)容。
通過傳遞一個常規(guī)對象。 我們在間隔回調(diào)中實現(xiàn)了。
這兩種方式都是可以接受的，但是當(dāng)您同時讀取和寫入狀態(tài)時在間隔回調(diào)之內(nèi)，我們只寫給狀態(tài)，而不是讀取它。 當(dāng)兩難時，使用函數(shù)參數(shù)語法。 setState實際上是一個異步方法。
我們?nèi)绾螤顟B(tài)？ 我們返回一個包含我們要的值的對象。 注意在兩次調(diào)用setState中，我們只是從state字段傳遞一個屬性，而不是兩者。 這是可以的，因為setState實際上將您傳遞的內(nèi)容（函數(shù)參數(shù)的返回值）與現(xiàn)有狀態(tài)合并。 因此，在調(diào)用setState時不選擇屬性意味著我們不希望改該屬性（而不是刪除它）。
8:React是可以響應(yīng)的

React從它對狀態(tài)變化做出響應(yīng)（雖然不是反應(yīng)性的，而是按計劃進(jìn)行）而得名。 有一個笑話，反應(yīng)應(yīng)該被命名為Schedule！
然而，當(dāng)組件的狀態(tài)被時，我們用肉眼看到的是React對該做出反應(yīng)，并自動反映瀏覽器DOM中的（如果需要）。
將render函數(shù)輸入視為兩者
從父元素得到props
當(dāng)渲染功能的輸入變化時，其輸出可能會改變。
React保留了渲染歷史的記錄，當(dāng)它看到一個渲染與前一個渲染不同時，它將計算它們之間的差異，并將其轉(zhuǎn)換為在DOM中執(zhí)行的實際DOM操作。
9: React是你的代理

您可以將React視為我們聘請的與瀏覽器通信的代理。 以上面的當(dāng)前時間戳顯示為例。 我們不是手動去瀏覽器并調(diào)用DOM API操作p＃timestamp元素，而是在組件狀態(tài)上更改了一個屬性，而React代表我們與瀏覽器進(jìn)行通信。 我相信這是受歡迎的原因。 
10: 每個React組件都有一個故事（第2部分）

現(xiàn)在我們知道一個組件的狀態(tài)，以及當(dāng)這個狀態(tài)改變了的時候，讓我們來學(xué)習(xí)關(guān)于該過程的幾個概念。
組件可能需要在其狀態(tài)時重新呈現(xiàn)，或者當(dāng)其決定傳遞給組件的props時，該組件可能需要重新呈現(xiàn)
如果后者發(fā)生，React會調(diào)用另一個生命周期方法componentWillReceiveProps。
如果狀態(tài)對象或傳入props被改，則React有一個重要的決定。 組件應(yīng)該在DOM中嗎？ 這就是為什么它在這里調(diào)用另一個重要的生命周期方法，shouldComponentUpdate。 這個方法是一個實際的問題，所以如果你需要自己定制或優(yōu)化渲染過程，你通過返回true或false來回答這個問題。
如果沒有customComponentUpdate，React默認(rèn)是一個好的事情，在大多數(shù)情況下好。
React在此時調(diào)用另一個生命周期方法componentWillUpdate。 然后React將計算新的渲染輸出并將其與渲染的輸出進(jìn)行比較。
如果渲染的輸出一樣，React不做。
如果存在差異，則React會將這些差異映射到瀏覽器內(nèi)。
無論如何，由于過程無論如何（即使輸出相同），React會調(diào)用的生命周期方法componentDidUpdate。
生命周期方法實際上是艙口。 如果你沒有做事情，你可以創(chuàng)建沒有他們的完整的應(yīng)用程序。 他們可以用來方便地分析應(yīng)用程序中發(fā)生的情況，并進(jìn)一步優(yōu)化了React新的性能。