一篇包含了React所有基本點的文章
去年，我寫了一本關(guān)于學(xué)習(xí)React.js的小書，原來是大約100頁。 今年我要挑戰(zhàn)自己，把它歸納為一篇文章。
本文不會涵蓋什么是React，或者為什么要學(xué)習(xí)它。 相反，這是面向已經(jīng)熟悉JavaScript并熟悉DOM API基礎(chǔ)知識的人，對React.js的基礎(chǔ)知識的介紹。
以下所有代碼示例均標示為參考。 它們純粹是為了提供概念而寫的例子。 他們大多數(shù)可以寫得更好一些。
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)
用于按鈕標簽的花括號將在下面介紹。 現(xiàn)在不必要擔心他們。 ReactDOM也將在后面解釋，但是如果要測試這個例子和接下來的代碼示例，render函數(shù)就是你需要的。
ReactDOM.render的第二個參數(shù)是React將要接管和控制的目標DOM元素。 在jsComplete REPL中，您就可以使用mountNode變量。
關(guān)于示例1的注意事項有以下幾點：
- 組件名稱以大寫字母開頭。 這是必需的，因為我們將處理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)用程序中的默認設(shè)置。 它被稱為JSX，它是一個JavaScript擴展。 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)建一個由標簽名稱指定的元素，React的createElement函數(shù)是一個更高級別的函數(shù)，可以做類似于document.createElement的功能。 但它也可以用于創(chuàng)建一個表示React組件的元素。 當我們使用上面的例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=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);
關(guān)于以上例子要注意的幾點：
- InputForm不是React組件; 它只是一個React元素。 這就是為什么我們直接在ReactDOM.render調(diào)用中使用它，而不是使用<InputForm />。
- 我們可以嵌套React.createElement調(diào)用，因為它都是JavaScript。
- React.createElement的第二個參數(shù)可以是null，也可以是一個空對象，當元素不需要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ù)。 然而，我們?nèi)祟愊矚g看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)于上面的例子注意以下幾點
- 它不是HTML。 例如，我們?nèi)匀辉谑褂胏lassName而不是類。
- 我們?nèi)匀辉诳紤]將以上HTML作為JavaScript。 看看我在末尾添加了分號。
我們上面寫的(例4)是JSX。 然而，我們在瀏覽器的執(zhí)行版本是它的編譯版本(示例3)。 為了實現(xiàn)這一點，我們需要使用預(yù)處理器將JSX版本轉(zhuǎn)換為React.createElement版本。
那就是JSX。 這是一個折中，允許我們以類似于HTML的語法編寫我們的React組件，這是一個很好的共識。
上面標題中的“Flux”一詞被選為韻腳(...)，但它也是Facebook流行的非常受歡迎的應(yīng)用程序架構(gòu)的名稱。 最著名的實現(xiàn)是Redux。
JSX，順便說一下，可以自己在其他地方使用。 這不是只有在React中才可以使用的。
3: 您可以在JSX中的任何位置使用JavaScript表達式
在JSX部分中，您可以在一對花括號內(nèi)使用任何JavaScript表達式。
- // 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 />, mountNode);
任何JavaScript表達式都可以放在那些花括號內(nèi)。 這相當于JavaScript模板文字中的$ {}插值語法。
這是JSX中唯一的約束：只有表達式。 所以，你不能使用常規(guī)的if語句，但是三元表達式是可以的。
JavaScript變量也是表達式，所以當組件接收到props列表(RandomValue組件沒有，props是可選的)時，可以在花括號內(nèi)使用這些props。 我們在上面的Button組件中這樣做了(示例1)。
JavaScript對象也是表達式。 有時候，我們在一個花括號里面使用一個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"
- />,
- mountNode
- );
請注意，我如何僅解析props參數(shù)中的message的。 這是JavaScript。 還要注意上面的style屬性是一個特殊的屬性(再次，它不是HTML，它更接近于DOM API)。 我們使用一個對象作為style屬性的值。 該對象定義了樣式，就像我們使用JavaScript一樣(因為確實就是)。
甚至可以在JSX中使用React元素，因為這也是一個表達式。 記住，一個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>;
- // Now we can use the MaybeError component:
- ReactDOM.render(
- <MaybeError
- errorMessage={Math.random() > 0.5 ? 'Not good' : ''}
- />,
- mountNode
- );
上面的MaybeError組件將只顯示ErrorDisplay組件，如果有一個errorMessage字符串傳遞給它和一個空的div。 React將{true}，{false}，{undefined}和{null}視為沒有呈現(xiàn)任何內(nèi)容的有效元素子元素。
您還可以使用JSX內(nèi)的集合上的所有JavaScript方法(map，reduce，filter，concat等)。 再次聲明原因是因為它們返回的是表達式：
- // 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 it
- ReactDOM.render(<Doubler />, mountNode);
請注意，我是如何給valueprops默認值的，因為它全是Javascript。 還要注意，我在div中輸出了一個數(shù)組表達式，這在React中是可行的。 它將把每一個雙倍的值放在一個文本節(jié)點中。
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" />, mountNode);
類語法很簡單。 定義一個擴展了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.now();
- }
- render() {
- return <button id={this.id}>{this.props.label}</button>;
- }
- }
- // Use it
- ReactDOM.render(<Button label="Save" />, mountNode);
我們還可以定義類屬性函數(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" />, mountNode);
關(guān)于例子11有幾點需要注意
- handleClick函數(shù)是使用JavaScript中新建的類字段語法編寫的。這種語法仍然屬于stage-2,，但由于很多原因，它是訪問組件安裝實例(由于箭頭功能)的***選擇。 但是，您需要使用像Babel這樣的編譯器來配置它來理解stage-2,(或類字段語法)來獲取上面的代碼。 jsComplete REPL具有預(yù)配置。
- 我們還使用相同的類字段語法定義了ClickCounter實例變量。 這允許我們完全跳過使用類構(gòu)造函數(shù)調(diào)用。
- 當我們將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)用。 例如，為了防止表單從默認提交操作中，您可以執(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組件都有故事
以下僅適用于類組件(擴展為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é)點)的輸出。
- 由于這是React渲染元素的***次，React將與瀏覽器進行通信(代表我們使用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監(jiān)視每個組件狀態(tài)以進行更改。 但是對于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í)的小事情，但是從這一點來看，它主要是你和你的JavaScript技能。
我們來看一下實例13，從類字段開始。 它有兩個。 特殊狀態(tài)字段被初始化為一個對象，該對象包含起始值為0的clickCounter，以及起始值為new Date()的currentTimestamp。
第二個類字段是一個handleClick函數(shù)，我們傳遞給render方法中的button元素的onClick事件。 handleClick方法使用setState修改此組件實例狀態(tài)。 注意到這一點。
我們在componentDidMount生命周期方法內(nèi)部啟動的間隔定時器中修改狀態(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)了。
這兩種方式都是可以接受的，但是當您同時讀取和寫入狀態(tài)時，***個是***的(我們這樣做)。 在間隔回調(diào)之內(nèi)，我們只寫給狀態(tài)，而不是讀取它。 當兩難時，始終使用***個函數(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)性的，而是按計劃進行)而得名。 有一個笑話，反應(yīng)應(yīng)該被命名為Schedule!
然而，當任何組件的狀態(tài)被更新時，我們用肉眼看到的是React對該更新做出反應(yīng)，并自動反映瀏覽器DOM中的更新(如果需要)。
將render函數(shù)輸入視為兩者
- 從父元素得到props
- 可以隨時更新的內(nèi)部私有狀態(tài)
當渲染功能的輸入變化時，其輸出可能會改變。
React保留了渲染歷史的記錄，當它看到一個渲染與前一個渲染不同時，它將計算它們之間的差異，并將其有效地轉(zhuǎn)換為在DOM中執(zhí)行的實際DOM操作。
9: React是你的代理
您可以將React視為我們聘請的與瀏覽器通信的代理。 以上面的當前時間戳顯示為例。 我們不是手動去瀏覽器并調(diào)用DOM API操作來每秒查找和更新p#timestamp元素，而是在組件狀態(tài)上更改了一個屬性，而React代表我們與瀏覽器進行通信。 我相信這是真正受歡迎的真正原因。 我們討厭瀏覽器(和所說的DOM語言的很多方言)，React自愿為我們做所有的談話，免費!
10: 每個React組件都有一個故事(第2部分)
現(xiàn)在我們知道一個組件的狀態(tài)，以及當這個狀態(tài)改變了一些魔法的時候，讓我們來學(xué)習(xí)關(guān)于該過程的***幾個概念。
- 組件可能需要在其狀態(tài)更新時重新呈現(xiàn)，或者當其父級決定更改傳遞給組件的props時，該組件可能需要重新呈現(xiàn)
- 如果后者發(fā)生，React會調(diào)用另一個生命周期方法componentWillReceiveProps。
- 如果狀態(tài)對象或傳入props被更改，則React有一個重要的決定。 組件應(yīng)該在DOM中更新嗎? 這就是為什么它在這里調(diào)用另一個重要的生命周期方法，shouldComponentUpdate。 這個方法是一個實際的問題，所以如果你需要自己定制或優(yōu)化渲染過程，你必須通過返回true或false來回答這個問題。
- 如果沒有指定customComponentUpdate，React默認是一個非常聰明的事情，在大多數(shù)情況下實際上足夠好。
- 首先，React在此時調(diào)用另一個生命周期方法componentWillUpdate。 然后React將計算新的渲染輸出并將其與***渲染的輸出進行比較。
- 如果渲染的輸出完全一樣，React什么都不做。
- 如果存在差異，則React會將這些差異映射到瀏覽器內(nèi)。
- 無論如何，由于更新過程無論如何(即使輸出完全相同)，React會調(diào)用最終的生命周期方法componentDidUpdate。
生命周期方法實際上是艙口。 如果你沒有做任何事情，你可以創(chuàng)建沒有他們的完整的應(yīng)用程序。 他們可以用來非常方便地分析應(yīng)用程序中發(fā)生的情況，并進一步優(yōu)化了React更新的性能。
