React基礎(chǔ)知識有哪些

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

一切都是組件

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

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

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

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

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

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

<Calculator>  <DisplayWindow />  <NumPad>    <Key number={1}/>    <Key number={2}/>    .    .    .    <Key number={9}/>  </NumPad></Calculator>

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

設(shè)置我們的 Playground

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

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

控制組件

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

進(jìn)入 “props”

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

a) 函數(shù)式組件

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

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

function Hello(props) {  return <div>{props.name}</div>}

就這么簡單。我們只是將 props 作為參數(shù)傳遞給了一個普通的 JavaScript 函數(shù)并且有返回值。嗯？返回了什么？那個 <div>{props.name}</div>。它是 JSX（JavaScript Extended）。我們將在后面的部分中詳細(xì)了解它。

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

<!-- If the "props" object is: {name: 'rajat'} --><div>  rajat</div>

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

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

<Hello name='rajat' age={26}/>

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

記?。?你可以將一個 React 組件嵌套在其他 React 組件中。

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

function Hello(props) {  return <div>{props.name}</div>} ReactDOM.render(<Hello name="rajat"/>, document.getElementById('root'));

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

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

b) 基于類的組件

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

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

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

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

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

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

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

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

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

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

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

JSX

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

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

 <button disabled={true}>Press me!</button> <button disabled={true}>Press me {3+1} times!</button>; <div className='container'><Hello /></div>

它的工作方式是你編寫 JSX 來描述你的 UI 應(yīng)該是什么樣子。像 Babel 這樣的轉(zhuǎn)碼器將這些代碼轉(zhuǎn)換為一堆 React.createElement() 調(diào)用。然后，React 庫使用這些 React.createElement() 調(diào)用來構(gòu)造 DOM 元素的樹狀結(jié)構(gòu)。對于 React 的網(wǎng)頁視圖或 React Native 的 Native 視圖，它將保存在內(nèi)存中。

React 接著會計算它如何在展示給用戶的 UI 的內(nèi)存中有效地模仿這個樹。此過程稱為 reconciliation。完成計算后，React 會對屏幕上的真正 UI 進(jìn)行更改。

React 如何將你的 JSX 轉(zhuǎn)化為描述應(yīng)用 UI 的樹。

你可以使用 Babel 的在線 REPL 查看當(dāng)你寫一些 JSX 的時候，React 的真正輸出。

使用Babel REPL 轉(zhuǎn)換 JSX 為普通 JavaScript

由于 JSX 只是 React.createElement() 調(diào)用的語法糖，因此可以在沒有 JSX 的情況下使用 React。

現(xiàn)在我們了解了所有的概念，所以我們已經(jīng)準(zhǔn)備好編寫我們之前看到之前的 GIF 圖中的計數(shù)器組件。

代碼如下，我希望你已經(jīng)知道了如何在我們的 playground 上渲染它。

class Counter extends React.Component {  constructor(props) {    super(props);        this.state = {count: this.props.start || 0}        // the following bindings are necessary to make `this` work in the callback    this.inc = this.inc.bind(this);    this.dec = this.dec.bind(this);  }    inc() {    this.setState({      count: this.state.count + 1    });  }    dec() {    this.setState({      count: this.state.count - 1    });  }    render() {    return (      <div>        <button onClick={this.inc}>+</button>        <button onClick={this.dec}>-</button>        <div>{this.state.count}</div>      </div>    );  }}

感謝各位的閱讀，以上就是“React基礎(chǔ)知識有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對React基礎(chǔ)知識有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！