快速上手React：從概述到組件與事件處理

這篇具有很好參考價(jià)值的文章主要介紹了快速上手React：從概述到組件與事件處理。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

前言

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript
「作者主頁」：雪碧有白泡泡
「個(gè)人網(wǎng)站」：雪碧的個(gè)人網(wǎng)站
「推薦專欄」：

★java一站式服務(wù) ★
★ React從入門到精通★
★前端炫酷代碼分享 ★
★ 從0到英雄，vue成神之路★
★ uniapp-從構(gòu)建到提升★
★ 從0到英雄，vue成神之路★
★ 解決算法，一個(gè)專欄就夠了★
★ 架構(gòu)咱們從0說★
★ 數(shù)據(jù)流通的精妙之道★
★后端進(jìn)階之路★

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

一、React概述

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

React 是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱作“組件”。

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

在線立即嘗試 React

點(diǎn)擊跳轉(zhuǎn)地址
快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

React框架的書寫方式分為兩種，一種是腳本方式（JavaScript標(biāo)簽引入，練習(xí)使用）；一種是react腳手架方式（常用）。

腳本方式

步驟1 ：在頁面中引入 react 庫和 react-dom 庫；

對于步驟1，你可以在頁面中使用以下代碼來引入react庫和react-dom庫：

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

請確保將 17.0.2 替換為你想要使用的React版本。

步驟2：引入 Babel；React中使用的是JSX語法，但是瀏覽器不識別JSX，我們就需要引入babel

對于步驟2，你可以使用以下代碼來引入Babel并使用JSX語法：

<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.8/babel.min.js"></script>

<script type="text/babel">
  // 在此處編寫React組件和代碼
</script>

你還可以選擇將Babel作為開發(fā)依賴項(xiàng)使用，并使用Babel進(jìn)行項(xiàng)目構(gòu)建。這樣可以更好地支持ES6+語法和更多的Babel插件。

步驟3 ：創(chuàng)建掛載點(diǎn)。

對于步驟3，你可以在HTML中創(chuàng)建一個(gè)帶有特定id的div元素，作為React組件的掛載點(diǎn)。例如：

<div id="root"></div>

你可以將root替換為任何你想要的名稱。

完成以上步驟后，你就可以開始編寫React組件并將它們渲染到掛載點(diǎn)上了。

完整示例

這是一個(gè)完整的示例代碼，包括了引入React庫、引入Babel、創(chuàng)建掛載點(diǎn)以及一個(gè)簡單的React組件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React App</title>
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
  <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.8/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // 創(chuàng)建一個(gè)名為Greeting的React組件
    function Greeting(props) {
      return <p>Hello, {props.name}!</p>;
    }

    // 渲染Greeting組件到頁面上的根元素
    ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
  </script>
</body>
</html>

在上述代碼中，我們引入了React庫和ReactDOM庫的生產(chǎn)版本，并且使用Babel解析了內(nèi)嵌的JSX代碼。然后，我們在頁面中創(chuàng)建了一個(gè)id為root的div作為React組件的掛載點(diǎn)。

接下來，我們定義了一個(gè)名為Greeting的React組件，它通過props接收一個(gè)名為name的屬性，并返回一個(gè)包含問候語的p元素。

最后，我們使用ReactDOM.render方法將Greeting組件渲染到頁面上的掛載點(diǎn)。在這個(gè)例子中，Greeting組件將顯示"Hello, John!"。你可以根據(jù)需要修改組件的屬性值。

腳手架方式

步驟1 - 創(chuàng)建虛擬DOM對象

// 創(chuàng)建虛擬DOM對象
const vNode = React.createElement(
  // 標(biāo)簽名
  "div",
  // 屬性對象
  {
    id: "mydiv",
    className: "cls",
  },
  // 標(biāo)簽內(nèi)的內(nèi)容
  "hello react!"
);

步驟2 - 獲取掛載點(diǎn)

// 獲取掛載點(diǎn)
const root = document.getElementById("root");

步驟3 - 渲染頁面

// 渲染頁面
ReactDOM.render(vNode, root);

完整代碼

完整代碼如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>React 封裝演示</title>
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
</head>

<body>
  <!-- 掛載點(diǎn)：后續(xù)生成的內(nèi)容插入這里 -->
  <div id="root"></div>

  <script type="text/javascript">
    // 步驟1 - 創(chuàng)建虛擬DOM對象
    const vNode = React.createElement(
      // 標(biāo)簽名
      "div",
      // 屬性對象
      {
        id: "mydiv",
        className: "cls",
      },
      // 標(biāo)簽內(nèi)的內(nèi)容
      "hello react!"
    );

    // 步驟2 - 獲取掛載點(diǎn)
    const root = document.getElementById("root");

    // 步驟3 - 渲染頁面
    ReactDOM.render(vNode, root);
  </script>
</body>

</html>

以上代碼以純HTML形式呈現(xiàn)，直接在瀏覽器中打開即可看到渲染后的React組件。在代碼中，首先引入了React和ReactDOM的開發(fā)版本。然后，在<div id="root"></div>標(biāo)簽中設(shè)置了掛載點(diǎn)。接下來，使用React.createElement()方法創(chuàng)建了虛擬DOM對象，并設(shè)置了標(biāo)簽名、屬性對象和標(biāo)簽內(nèi)的內(nèi)容。最后，通過document.getElementById("root")獲取到掛載點(diǎn)，并使用ReactDOM.render()方法將虛擬DOM對象渲染到掛載點(diǎn)上。這樣，頁面上就會渲染出一個(gè)帶有"id"和"className"屬性的div標(biāo)簽，內(nèi)容為"hello
react!"。
組件是 React 中非常重要的概念，它負(fù)責(zé)將頁面劃分為獨(dú)立可復(fù)用的部分，并且可以根據(jù)不同的輸入（props）來動(dòng)態(tài)展示內(nèi)容。

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

二、組件

組件，從概念上類似于 JavaScript 函數(shù)。它接受任意的入?yún)⒓矗╬rops”），并返回用于描述頁面展示內(nèi)容的 React元素。React 定義組件有兩種方式

函數(shù)方式組件

函數(shù)方式組件是 React16.8版本之后新增的語法，它是一種簡單、輕量級的定義組件的方式。我們可以使用函數(shù)聲明一個(gè)組件，接收一個(gè)參數(shù)props，并返回一個(gè)React元素來描述頁面的展示內(nèi)容。

下面是一個(gè)簡單的函數(shù)方式組件的示例代碼：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用該組件
const element = <Welcome name="John" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上面的代碼中，我們定義了一個(gè)名為Welcome的函數(shù)組件，它接收一個(gè)props參數(shù)，這個(gè)props參數(shù)可以包含任意的屬性。在組件內(nèi)部，我們可以使用props對象中的屬性來動(dòng)態(tài)展示頁面內(nèi)容。

類方式組件

類方式組件是 React 中更為傳統(tǒng)和強(qiáng)大的定義組件的方式。我們可以使用類來定義一個(gè)組件，這個(gè)類繼承React.Component，并且實(shí)現(xiàn)一個(gè)render方法來返回React元素。

下面是一個(gè)簡單的類方式組件的示例代碼：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 使用該組件
const element = <Welcome name="John" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在上面的代碼中，我們定義了一個(gè)名為Welcome的類組件，它繼承了React.Component，然后實(shí)現(xiàn)了一個(gè)render方法來描述組件的展示內(nèi)容。在render方法中，我們可以通過this.props來獲取傳入的屬性，并使用它們來動(dòng)態(tài)展示內(nèi)容。

無論是函數(shù)方式還是類方式，組件都是一個(gè)接受props參數(shù)并返回React元素的函數(shù)或類。它們可以根據(jù)props的不同來靈活地展示不同的內(nèi)容，從而實(shí)現(xiàn)頁面的組件化和重用。

快速上手React：從概述到組件與事件處理,React從入門到精通,全部文章,react.js,前端,前端框架,javascript

三.事件

React中的事件處理與DOM元素的事件處理非常相似，但有一些語法上的不同之處。React使用小駝峰式（camelCase）的命名方式來定義事件，并需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。這樣做可以確保事件處理函數(shù)在React組件中正確地綁定和執(zhí)行。

React處理點(diǎn)擊事件

下面是一個(gè)使用React處理點(diǎn)擊事件的示例代碼：

class Button extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }
  
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('root'));

在上面的代碼中，我們創(chuàng)建了一個(gè)Button組件，并在組件的render方法中返回一個(gè) <button> 元素。在 <button>
元素上，我們通過onClick屬性將一個(gè)函數(shù) this.handleClick 作為點(diǎn)擊事件的處理函數(shù)。

當(dāng)按鈕被點(diǎn)擊時(shí)，事件處理函數(shù) handleClick 會被調(diào)用，并輸出一個(gè)日志消息。

需要注意的是，在React中，事件處理函數(shù)會自動(dòng)綁定到組件實(shí)例上。所以在事件處理函數(shù)中可以使用 this 來引用組件實(shí)例。

另外還有一種使用箭頭函數(shù)的方式，在事件處理函數(shù)中訪問組件實(shí)例。

箭頭函數(shù)

下面是一個(gè)使用箭頭函數(shù)的事件處理的示例代碼：

class Button extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  }
  
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('root'));

在上面的代碼中，我們使用了類屬性的方式去定義事件處理函數(shù)，這樣做可以確保箭頭函數(shù)內(nèi)部的 this 與組件實(shí)例保持一致。

總結(jié)一下，React中的事件處理與DOM元素的事件處理語法上有一些區(qū)別，但整體思想非常相似。我們可以通過使用小駝峰式的命名方式和傳入函數(shù)作為事件處理函數(shù)，來實(shí)現(xiàn)在React組件中處理各種用戶交互的事件。

小結(jié)

在本篇文章中，我們首先介紹了React的概述，它是一個(gè)用于構(gòu)建用戶界面的JavaScript庫。我們還介紹了使用腳本方式和腳手架方式來安裝和運(yùn)行React的方法。

其次，我們討論了React組件的概念和兩種定義組件的方式：函數(shù)方式和類方式。函數(shù)方式是React16.8版本之后新增的語法，它更為簡單和輕量級。而類方式是React中傳統(tǒng)和強(qiáng)大的定義組件的方式，它繼承React.Component并實(shí)現(xiàn)render方法來描述組件的展示內(nèi)容。

最后，我們學(xué)習(xí)了React中處理事件的方法。React的事件處理與DOM元素的事件處理相似，但有一些語法上的不同。React事件的命名采用小駝峰式，需要傳入一個(gè)函數(shù)作為事件處理函數(shù)。
文章來源地址http://www.zghlxwxcb.cn/news/detail-645552.html