最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要講解了“React基礎(chǔ)知識(shí)有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React基礎(chǔ)知識(shí)有哪些”吧！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、息烽網(wǎng)絡(luò)推廣、微信小程序開發(fā)、息烽網(wǎng)絡(luò)營(yíng)銷、息烽企業(yè)策劃、息烽品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供息烽建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

一切都是組件

React 應(yīng)用由組件組成，數(shù)量繁多且互相嵌套。你或許會(huì)問：”可什么是組件呢？“

組件是可重用的代碼段，它定義了某些功能在 UI 上的外觀和行為。 比如，按鈕就是一個(gè)組件。

讓我們看看下面的計(jì)算器，當(dāng)你嘗試計(jì)算 2 + 2 = 4 -1 = 3（簡(jiǎn)單的數(shù)學(xué)題）時(shí)，你會(huì)在 Google 上看到這個(gè)計(jì)算器。

紅色標(biāo)記表示組件

如上圖所示，這個(gè)計(jì)算器有很多區(qū)域，比如展示窗口和數(shù)字鍵盤。所有這些都可以是許多單獨(dú)的組件或一個(gè)巨大的組件。這取決于在 React  中分解和抽象出事物的程度。你為所有這些組件分別編寫代碼，然后合并這些組件到一個(gè)容器中，而這個(gè)容器又是一個(gè) React  組件。這樣你就可以創(chuàng)建可重用的組件，最終的應(yīng)用將是一組協(xié)同工作的單獨(dú)組件。

以下是一個(gè)你踐行了以上原則并可以用 React 編寫計(jì)算器的方法。

                .    .    .      

沒錯(cuò)！它看起來像HTML代碼，然而并不是。我們將在后面的部分中詳細(xì)探討它。

設(shè)置我們的 Playground

這篇教程專注于 React 的基礎(chǔ)部分。它沒有偏向 Web 或 React Native（開發(fā)移動(dòng)應(yīng)用）。所以，我們會(huì)用一個(gè)在線編輯器，這樣可以在學(xué)習(xí) React 能做什么之前避免 web 或 native 的具體配置。

我已經(jīng)為讀者在 codepen.io 設(shè)置好了開發(fā)環(huán)境。只需點(diǎn)開該鏈接并且閱讀 HTML 和 JavaScript 中的所有注釋。

控制組件

我們已經(jīng)了解到 React 應(yīng)用是各種組件的集合，結(jié)構(gòu)為嵌套樹。因此，我們需要某種機(jī)制來將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。

進(jìn)入 “props”

我們可以使用 props 對(duì)象將任意數(shù)據(jù)傳遞給我們的組件。 React 中的每個(gè)組件都會(huì)獲取 props 對(duì)象。在學(xué)習(xí)如何使用 props 之前，讓我們學(xué)習(xí)函數(shù)式組件。

a) 函數(shù)式組件

在 React 中，一個(gè)函數(shù)式組件通過 props 對(duì)象使用你傳遞給它的任意數(shù)據(jù)。它返回一個(gè)對(duì)象，該對(duì)象描述了 React 應(yīng)渲染的 UI。函數(shù)式組件也稱為無狀態(tài)組件。

讓我們編寫***個(gè)函數(shù)式組件。

function Hello(props) {  return 
{props.name}
}

就這么簡(jiǎn)單。我們只是將 props 作為參數(shù)傳遞給了一個(gè)普通的 JavaScript 函數(shù)并且有返回值。嗯？返回了什么？那個(gè)

上面這個(gè)函數(shù)將在瀏覽器中渲染出以下 HTML。

  rajat

閱讀以下有關(guān) JSX 的部分，這一部分解釋了如何從我們的 JSX 代碼中得到這段 HTML 。

如何在 React 應(yīng)用中使用這個(gè)函數(shù)式組件？ 很高興你問了！ 它就像下面這么簡(jiǎn)單。

屬性 name 在上面的代碼中變成了 Hello 組件里的 props.name ，屬性 age 變成了 props.age 。

記??！ 你可以將一個(gè) React 組件嵌套在其他 React 組件中。

讓我們?cè)?codepen playground 使用 Hello 組件。用我們的 Hello 組件替換 ReactDOM.render() 中的 div，并在底部窗口中查看更改。

function Hello(props) {  return 
{props.name}
} ReactDOM.render(, document.getElementById('root'));

但是如果你的組件有一些內(nèi)部狀態(tài)怎么辦？例如，像下面的計(jì)數(shù)器組件一樣，它有一個(gè)內(nèi)部計(jì)數(shù)變量，它在 + 和 - 鍵按下時(shí)發(fā)生變化。

具有內(nèi)部狀態(tài)的 React 組件

b) 基于類的組件

基于類的組件有一個(gè)額外屬性 state ，你可以用它存放組件的私有數(shù)據(jù)。我們可以用 class 表示法重寫我們的 Hello 。由于這些組件具有狀態(tài)，因此這些組件也稱為有狀態(tài)組件。

class Counter extends React.Component {  // this method should be present in your component  render() {    return (      
        {this.props.name}      
    );  }}

我們繼承了 React 庫的 React.Component 類以在 React 中創(chuàng)建基于類的組件。在這里了解更多有關(guān) JavaScript 類的東西。

render() 方法必須存在于你的類中，因?yàn)?React 會(huì)查找此方法，用以了解它應(yīng)在屏幕上渲染的 UI。為了使用這種內(nèi)部狀態(tài)，我們首先要在組件

要使用這種內(nèi)部狀態(tài)，我們首先必須按以下方式初始化組件類的構(gòu)造函數(shù)中的狀態(tài)對(duì)象。

class Counter extends React.Component {  constructor() {    super();        // define the internal state of the component    this.state = {name: 'rajat'}  }    render() {    return (      
        {this.state.name}      
    );  }} // Usage:// In your react app: 

類似地，可以使用 this.props 對(duì)象在我們基于類的組件內(nèi)訪問 props。

要設(shè)置 state，請(qǐng)使用 React.Component 的 setState()。 在本教程的***一部分中，我們將看到一個(gè)這樣的例子。

提示：永遠(yuǎn)不要在 render() 函數(shù)中調(diào)用 setState()，因?yàn)?setState 會(huì)導(dǎo)致組件重新渲染，這將導(dǎo)致***循環(huán)。

基于類的組件具有可選屬性 “state”。

除了 state 以外，基于類的組件有一些聲明周期方法比如 componentWillMount()。你可以利用這些去做初始化 state這樣的事， 可是那將超出這篇文章的范疇。

JSX

JSX 是 JavaScript Extended 的縮寫，它是一種編寫 React 組件的方法。使用 JSX，你可以在類 XML 標(biāo)簽中獲得 JavaScript 的全部力量。

你把 JavaScript 表達(dá)式放在 {} 里。下面是一些有效的 JSX 例子。

 Press me! Press me {3+1} times!;