長沙做網站,長沙建網站,湖南做網站

react的基本點

1:組件是React的一切

React是圍繞可重用組件的概念設計的。 您定義小組件,并將它們放在一起形成大的組件。
小或小的組件都可重復使用,跨不同的項目。
一個React組件(以其簡單的形式)是一個簡單的JavaScript函數:
// 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)
用于按鈕標簽的花括號將在下面介紹。 現在不要擔心他們。 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元素,并查看它們是如何支持的(例如,返回一個文本輸入元素)。
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函數是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=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);
關于以上例子要注意的幾點:
InputForm不是React組件; 它只是一個React元素。 這就是為什么我們直接在ReactDOM.render調用中使用它,而不是使用<InputForm />。
我們可以嵌套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 =  <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);
關于上面的例子注意以下幾點
它不是HTML。 例如,我們仍然在使用className而不是類。
我們仍然在考慮將以上HTML作為JavaScript。 看看我在末尾添加了分號。
我們上面寫的(例4)是JSX。 然而,我們在瀏覽器的執行版本是它的編譯版本(示例3)。 為了實現這一點,我們需要使用預處理器將JSX版本轉換為React.createElement版本。
那就是JSX。 這是一個折中,允許我們以類似于HTML的語法編寫我們的React組件,這是一個好的共識。
上面標題中的“Flux”一詞被選為韻腳(...),但它也是Facebook流行的受歡迎的應用程序架構的名稱。 著名的實現是Redux。
JSX,順便說一下,可以自己在其他地方使用。 這不是只有在React中才可以使用的。
3: 您可以在JSX中的位置使用JavaScript表達式

在JSX部分中,您可以在一對花括號內使用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 />, mountN ode);
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}) =>  <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參數中的message的。 這是JavaScript。 還要注意上面的style屬性是一個的屬性(再次,它不是HTML,它接近于DOM API)。 我們使用一個對象作為style屬性的值。 該對象定義了樣式,就像我們使用JavaScript一樣(因為確實就是)。
可以在JSX中使用React元素,因為這也是一個表達式。 記住,一個React元素就是一個函數調用:
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}視為沒有呈現內容的元素子元素。
您還可以使用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]}) =>  <div>    {value.map(e => e * 2)}  </div>;// Use itReactDOM.render(<Doubler />, mountN ode);
請注意,我是如何給valueprops默認值的,因為它全是Javascript。 還要注意,我在div中輸出了一個數組表達式,這在React中是可行的。 它將把一個值放在一個文本節點中。
4: 您可以使用JavaScript類編寫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 <button>{this.props.label}</button>;  }} // Use it (same syntax) ReactDOM.render(<Button label="Save" />, mountN ode);
類語法很簡單。 定義一個擴展了React.Component基類的類(需要學習的另一個的React API)。 該類定義一個實例函數render(),該render函數返回虛擬DOM對象。 每次我們使用上面的基于Button類的組件(例如,通過執行<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.n ow();  }  render() { return <button id={this.id}>{this.props.label}</button>;  }} // Use it ReactDOM.render(<Button label="Save" />, mountN ode);
我們還可以定義類屬性函數,并在我們想使用的地方使用,包括返回的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 (      <button id={this.id} onClick={this.handleClick}>        {this.props.label}      </button>    );  }} // Use it ReactDOM.render(<Button label="Save" />, mountN ode);
關于例子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 (      <form onSubmit={this.handleSubmit}>        <button type="submit">Submit</button>      </form>    );  }} // Use it ReactDOM.render(<Form />, mountNode);
6: React組件都有故事

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

以下適用于類組件。 有沒有人提到有些人把只做展現的組件叫做啞巴?
狀態類字段是React類組件中的字段。 React每個組件狀態以進行修改。 但是對于React要執行這些操作,我們通過另一個需要學習的React API函數來修改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交互方式的基礎知識。 在這個例子之后,還有一些你需要學習的小事情,但是從這一點來看,它主要是你和你的JavaScript技能。
我們來看一下實例13,從類字段開始。 它有兩個。 狀態字段被初始化為一個對象,該對象包含起始值為0的clickCounter,以及起始值為new Date()的currentTimestamp。
類字段是一個handleClick函數,我們傳遞給render方法中的button元素的onClick。 handleClick方法使用setState修改此組件實例狀態。 注意到這一點。
我們在componentDidMount生命周期方法啟動的間隔定時器中修改狀態。 它每秒鐘打勾并執行調用this.setState。
在render方法中,我們使用了正常讀取語法對state兩個屬性的讀取。 沒有的API。
現在,請注意,我們使用兩種不同的方式新了狀態:
傳遞返回一個對象的函數。 我們handleClick函數中實現了這部分內容。
通過傳遞一個常規對象。 我們在間隔回調中實現了。
這兩種方式都是可以接受的,但是當您同時讀取和寫入狀態時在間隔回調之內,我們只寫給狀態,而不是讀取它。 當兩難時,使用函數參數語法。 setState實際上是一個異步方法。
我們如何狀態? 我們返回一個包含我們要的值的對象。 注意在兩次調用setState中,我們只是從state字段傳遞一個屬性,而不是兩者。 這是可以的,因為setState實際上將您傳遞的內容(函數參數的返回值)與現有狀態合并。 因此,在調用setState時不選擇屬性意味著我們不希望改該屬性(而不是刪除它)。
8:React是可以響應的

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

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

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



關鍵詞:長沙做網站,湖南做網站,湖南用友ERP對接,湖南網站優化,湖南做網站的公司,長沙網站制作公司,長沙網絡公司
先锋影院亚洲欧美,先锋在线综合亚洲欧美,先锋在线亚洲欧美中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>